SharePoint 2010 Step-by-Step: How to remove table in WebPart Zone

First, I want to clarify that the content of this post is not original. The content is based on various sources (see below). All credits go to their respective composers. While reading various posts, I have realized that those who are new to creating custom .Net Adapter would love to have step-by-step instructions at very detailed level. This was my inspiration for this post  What I am doing here is to summarize and present contents in a manner for novice like me to easily follow. So, this is like my notes while implementing custom .NET adapter.

The problem I had is that my co-worker who does amazing CSS styling hates SharePoint because of what SharePoint's default components render at the end of  the page life cycle. Each component like WebPart zone has own way of rendering contents, in this case, with table. Basically, my co-worker hates table tag (except displaying tabular data) when it comes down to the styling of web pages. To convince and help him out, I have decided to investigate a way to remove table tag in WebPart zone. Interestingly, I found a tons of solutions while searching the web, but the problem I had is that each article assumes some background knowledge I did not have. So it took a while to actually make it happen in my testing environment. I am not complaining since the whole experience was a part of the learning process, but I wished I had step-by-step instructions on how to do this. Personally, this post will definitely serve me as a note on how to create a custom adapter in .NET and hopefully make someone easier when they need to do the same. By the way, the example below is done with C#.

1. Open Visual Studio 2010 Professional. Select File - New - Project.
2. Under Installed Templates (left pane), select Visual C#. Then, you will see the list of templates you can use in the right pane.
3. Select .NET Framework 3.5 and select Class Library template.
   
   
4. I called it SPNoTableAdapter and click OK.

Before continuing with the implementation, let me explain what I am doing here in my own words. I think ASP.NET provides a way of altering the way ASP.NET application renders pages. It uses a control adapter which can be used to change the rendering process of ASP.NET control. Since SharePoint 2010 is based on ASP.NET, it is possible to apply the same process to change the page rendering. My understanding is that the WebPart zone control uses nested tables as page layout. 

Basically, you add an entry (custom control adapter) in .browser file of you ASP.NET application (located in App_Browsers folder of your ASP.NET application). Once a custom entry becomes available in .browser file, ASP.NET calls CustomAdapter.Render() function instead of Default Control.Render(). In this case, instead of calling WebPart Zone control's Render() function, it calls my custom SPNoTableAdapter.Render() function which I am going to implement here.

5. Add the following using statements. I decided to rename System.Web.UI.WebControls.WebParts as NETWebPart and Microsoft.SharePoint.WebPartPages as SPWebPart. This is not necessary.
   
   using System.Web.UI;
   using System.Web.UI.Adapters;
   using NETWebPart = System.Web.UI.WebControls.WebParts;
   using SPWebPart = Microsoft.SharePoint.WebPartPages;
   using Mcirosoft.SharePoint;
6. I have decided to name SPAdapters for this project namespace.
   
   namespace SPAdapters
7. Inherit this class (SPNoTableAdapter) from ControlAdapter
   
   public class SPNoTableAdapter : ControlAdapter
   {
8. Override Render function. First, convert Control as WebPartZone.
   
   NETWebPart.WebPartZone wpz;
   wpz = Control as NETWebPart.WebPartZone;
9. Then, get the current WebPartManager and cast it to SPWebPartManager.
   
   var swpm = (SPWebPart.SPWebPartManager) NETWebPart.WebPartManager.GetCurrentWebPartManager(wpz.Page);
10. Now the custom adapter can check whether the SharePoint web part is in design (edit) mode or not. If the SharePoint web part is in design mode, the custom adapter will let the web part render as usual (with table).
    
    edit = swpm.GetDisplayMode().AllowPageDesign;
11. If the page is not in design mode, and there are web parts in the WebPartZone, the custom adapter renders each web part control without the layout of the WebPartZone control.
    
    NETWebPart.WebPartCollection wpcol = new NETWebPart.WebPartCollection(wpz.WebParts);
    
    foreach (NETWebPart.WebPart wp in wpcol)
    {
         wp.RenderControl(writer);
    }

Below is the complete code for SPNoTableAdapter.cs

using System.Web.UI;

using System.Web.UI.Adapters;

using SPWebPart = Microsoft.SharePoint.WebPartPages;

using NETWebPart = System.Web.UI.WebControls.WebParts;

using Microsoft.SharePoint;

namespace SPAdapters

{

    public class SPNoTableAdapter : ControlAdapter

    {

        protected override void Render(HtmlTextWriter writer)

        {            

            bool edit = false;

            NETWebPart.WebPartZone wpz = Control as NETWebPart.WebPartZone;

            if (wpz != null)

            {

                var swpm = (SPWebPart.SPWebPartManager)NETWebPart.WebPartManager.GetCurrentWebPartManager(wpz.Page);

                if (swpm != null)

                {

                    edit = swpm.GetDisplayMode().AllowPageDesign;

                }

            }

            if (!edit)

            {             

                if (wpz.WebParts.Count > 0)

                {

                    NETWebPart.WebPartCollection wpcol = new NETWebPart.WebPartCollection(wpz.WebParts);

                    foreach (NETWebPart.WebPart wp in wpcol)

                    {

                        wp.RenderControl(writer);

                    }

                }

            }

            else

            {

                base.Render(writer);

            }

        }

    }

}

12. Before compiling this code (SPNoTableAdapter.cs) into an assembly (SPNoTableAdatper.dll) and register it in GAC (Global Assembly Cache), I had to create a key to make this assembly strongly typed. To do this, click Start (e.g. Windows 7) - All Programs - Microsoft Visual Studio 2010 - Visual Studio Tools - Visual Studio Command Prompt (2010).
13. Create a directory called VSKeys in C:\
    
    C:\>mkdir VSKeys
    
    C:\>cd VSKeys
    
    C:\VSKeys>_
14. Issue sn command to create a key.
    
    C:\VSKeys>sn -k SPNoTableAdapter.snk
    
    C:\VSKeys>_
15. Go to Visual Studio 2010 IDE. Under Solution Explorer, click Solution SPNoTableAdapter - Properties. Open AssemblyInfo.cs file.
16. Add a key entry in AssemblyInfo.cs file as shown below:
    
    [assembly: AssemblyKeyFile(@"C:\VSKeys\SPNoTableAdapter.snk")]
17. Build the solution and go to the folder where the dll file is located or copy this file where you want to store. Then, register the dll file.
    
    ~>gacutil -i SPNoTableAdapter.dll
    
    Note: if you need to remove it from GAC, use gacutil -u SPNoTableAdapter. If you need to find out the public key from GAC, use gacutil -l SPNoTableAdapter.
18. Go to the SharePoint's App_Browser folder. In my case, it is located in C:\inetpub\wwwroot\wss\VirtualDirectories\80\App_Browser. Open compat.browser file and add the following entry: 
    
    <adapter controlType="System.Web.UI.WebControls.WebParts.WebPartZone" adapterType="SPAdapters.SPNoTableAdapter, SPNoTableAdapter, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d6f7eb2367b686ed" />
    
    Note that I had to add the assembly name with complete namespace (SPAdapters.SPNoTableAdapter) and the dll/package name (SPNoTableAdapter). In addition, PublicKeyToken and Version were added. You can retrieve the information by issuing:
    
    ~> gacutil -l SPNoTableAdapter
19. You are almost done. Go to Start - Administrative Tools - Internet Information Services (IIS) Manager. Under Connections pane (left), click Start Page - Your server name - Application Pools. Select SharePoint - 80 and right click to bring a context menu. Select Recycle.
20. Open the browser and check the result.

I hope these steps are useful to solve your problem as it helped me to solve mine.


Removing Web Parts tables in SharePoint 2010 from http://blog.mastykarz.nl/removing-web-parts-tables-sharepoint-2010/

Remove Web Part Zone table with Control Adapter from http://www.theroks.com/remove-table-from-web-part-zone-with-control-adapter/

ASP.NET 2.0 Control Adapter Architecture from http://weblogs.asp.net/scottgu/archive/2005/12/21/asp-net-2-0-control-adapter-architecture.aspx

iGOOGLE UI for SharePoint 2010 - PART FOUR: Control Adapters from http://www.lifeinsharepoint.co.uk/2012/04/29/igoogle-ui-sharepoint-2010-part-four-control-adapters/