ASP.net render HTML nicely (Beautify)

Question

When I generate my controls in ASP.net they come out like this:

<div id="ctl00_mainContent_ApprovalSelectPanel" class="discussWrapper">

        <span class="cbox highlighted"><input id="ctl00_mainContent_ctl00" type="checkbox" name="ctl00$mainContent$ctl00" checked="checked" value="70" /><label for="ctl00_mainContent_ctl00">Buyer1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl01" type="checkbox" name="ctl00$mainContent$ctl01" value="75" /><label for="ctl00_mainContent_ctl01">Buyer2</label></span><span class="cbox"><input id="ctl00_mainContent_ctl02" type="checkbox" name="ctl00$mainContent$ctl02" value="280" /><label for="ctl00_mainContent_ctl02">Client3</label></span><span class="cbox"><input id="ctl00_mainContent_ctl03" type="checkbox" name="ctl00$mainContent$ctl03" value="281" /><label for="ctl00_mainContent_ctl03">Client4</label></span><span class="cbox"><input id="ctl00_mainContent_ctl04" type="checkbox" name="ctl00$mainContent$ctl04" value="283" /><label for="ctl00_mainContent_ctl04">Client2</label></span><span class="cbox"><input id="ctl00_mainContent_ctl05" type="checkbox" name="ctl00$mainContent$ctl05" value="289" /><label for="ctl00_mainContent_ctl05">Client1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl06" type="checkbox" name="ctl00$mainContent$ctl06" value="346" /><label for="ctl00_mainContent_ctl06">artworker1</label></span><span class="cbox"><input id="ctl00_mainContent_ctl07" type="checkbox" name="ctl00$mainContent$ctl07" value="362" /><label for="ctl00_mainContent_ctl07">buyer3</label></span><span class="cbox"><input id="ctl00_mainContent_ctl08" type="checkbox" name="ctl00$mainContent$ctl08" value="367" /><label for="ctl00_mainContent_ctl08">meeeee</label></span><span class="cbox"><input id="ctl00_mainContent_ctl09" type="checkbox" name="ctl00$mainContent$ctl09" value="368" /><label for="ctl00_mainContent_ctl09">stake</label></span>

    </div>  

Pretty ugly and hard to understand when you view the source. This isn't a problem usually, but my site is offering visitors resources and tutorials where looking at the source is part of the experience.

Is there any way to render these controls nicely? Indented properly, better id's and names etc?

Answer 1

In .NET 4.0 you can set the ClientIDMode to one of 4 options AutoID, Static, Predictable and Inherit. You're probably looking for Static as this will ensure that your controls render to the page with the IDs you've assigned to them.

You can set it at application level by adding:

<pages clientIDMode="Static">

To your web.config

There's more details on these changes here: http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx

Answer 2

ASP.NET WebForms HTML rendering and control markup have been improved in .NET 4.0 and this will help with the control IDs and structure of the HTML elements themselves (as mentioned in Rob Stone's answer to your question). However, the indents and line breaks might still be less than desirable for your needs.

If the HTML source truly is part of the user experience for your application, you might consider writing an HttpModule attached to the ReleaseRequestState event. This approach will address the actual line breaks and indentations of your HTML source. To avoid re-inventing the wheel you could use either the .NET port of HTML Tidy or a .NET Wrapper for HTML Tidy as part of your custom filter on the response.

There is a nice example of how you might write a custom filter in an HttpModule in this blog. The section of the code that I found most useful is as follows (slightly edited but you can get the full understanding from the blog itself):

public class CustomModule : IHttpModule
{
  public void Init(HttpApplication context)
  {
    context.ReleaseRequestState += new EventHandler(context_ReleaseRequestState);
  }

  private void context_ReleaseRequestState(object sender, EventArgs e)
  {
    HttpResponse response = HttpContext.Current.Response;
    if (string.Compare(response.ContentType,"text/html",true) == 0)
    {
      response.Filter = new CustomFilter(response.Filter,response.ContentEncoding);
    }
  }
}

and inside your CustomFilter class...

public override void Write(byte[] buffer, int offset, int count)
{
  sb = new StringBuilder(count + 1024);
  sb.Append(enc.GetString(buffer,offset,count));

  // <---- Run the sb content through HTML Tidy here ---->

  byte[] buff = enc.GetBytes(sb.ToString());
  s.Write(buff,0,buff.Length);
  }
}