Removing junk markup from web controls

As delighted as I am that Microsoft has courteously created a half-witted solution to their own problem markup, CSS Friendly control adapters (otherwise known as code-bloat), sometimes you just need to solve it yourself.

Microsoft considers it a favor, apparently, to stick <span>s <br />s and a myriad of other nonsense markup amid your carefully designed <itemtemplates> in web controls.

Solution : Roll out your own inherited control.

This example is for a DataList control, but the principle is the same for all other DataBound controls.

namespace DX.Controls
{
 [ToolboxData("<{0}:DXDataList runat=server></{0}:DXDataList>")]
 public class DXDataList : DataList
 {
  public DXDataList() { }

  public override void RenderControl(HtmlTextWriter writer)
  {
     base.RenderControl(writer);
  }

  public override void RenderBeginTag(HtmlTextWriter writer)
  {
     //base.RenderBeginTag(writer);
  }

  public override void RenderEndTag(HtmlTextWriter writer)
  {
     //base.RenderEndTag(writer);
  }

  protected override void Render(HtmlTextWriter writer)
  {
     base.Render(writer);
  }

  protected override void RenderContents(HtmlTextWriter writer)
  {
     foreach (DataListItem li in this.Items)
     {
        // Select each item inside and re-render
        li.RenderControl(writer);
     }
  }
 }
}

This should clean up most of the garbage. It will still leave a few <span> tags in there. Remember to set your DataList to TableLayout=”Flow” to keep things clean.

Now I need to find a way to type code on TinyMCE and not have it blow up.

Update 03/11

I recieved a few emails asking some questions about this code.

To use the code, you basically create a blank .cs file in your App_Code folder or compile one into the Bin directory via Visual Studio. I wrote the above code in Notepad and put it into the App_Code folder.

Just make sure to include the following directives before typing this code:

using System;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

The Security and HtmlControls namespaces are there if you intend to use special permssions and other custom controls inside your inherited control. You will not need them for basic functionality.

To use the code, make sure you have registered this control on the top of your page or master page. In my case, since I’ve called my namespace “DX.Controls” :

<%@ Register TagPrefix="DX" Assembly="__code" Namespace="DX.Controls" %>

Now when I need to call this control on my page :

<DX:DXDataList ID="ContentList" runat="server" TableLayout="Flow" 
DataSourceID="[YourDataSource]"></DX:DXDataList>

Here is an example DataGrid class that has the same effect… This is handy if you want DataGrid functionality, but intend on creating all your controls yourself…

namespace DX.Controls
{
 [ToolboxData("<{0}:DXGrid runat=server></{0}:DXGrid>")]
 public class DXGrid : GridView
 {
   public DXGrid()
   {
    //
    // TODO: Add constructor logic here
    //
  }

  protected override void RenderContents(HtmlTextWriter writer)
  {
    base.RenderContents(writer);
  }

  public override void RenderBeginTag(HtmlTextWriter writer)
  {
    writer.WriteLine();
  }

  public override void RenderEndTag(HtmlTextWriter writer)
  {
    writer.WriteLine();
  }

  public override void RenderControl(HtmlTextWriter writer)
  {
    foreach (Control t in this.Controls)
    {
      foreach (Control c in t.Controls)
      {
        foreach (Control m in c.Controls)
        {
          foreach (Control k in m.Controls)
          {
            k.RenderControl(writer);
          }
        }
      }
    }
  }

  protected override void Render(HtmlTextWriter writer)
  {
    base.Render(writer);
  }
 }
}

If someone can please show me a way to type code on the WordPress text editor without giving myself a seizure, please let me know. Apparently disabling the WYSIWYG editor doesn’t work either.