Viewing ASP.NET Adaptive Rendering

I remembered when ASP.NET launched hearing about adaptive rendering.  Using ASP.NET I did not notice different renderings.  This post shows how one can observe ASP.NET adaptive renderings using fiddler.

The software used for this post is:

• Visual Studio 2008 SP1
• Windows Server 2008 R2 Standard
• Fiddler v2.2.8.6 64-bit
• IE 8.0

1. Using Visual Studio create a new ASP.NET Web Application
2. Modify Default.aspx.cs as follows:
   public partial class _Default : Page
   
   
   
   {

       /// <summary>

       /// Ignores this pages children and demonstrates different HtmlWriters based on

       /// different request strings.

       /// </summary>

       /// <param name="writer">An HtmlWriter passed by ASP.NET.</param>

       protected override void Render(HtmlTextWriter writer)

       {

           writer.Write(HttpContext.Current.Request.Browser.TagWriter.ToString());

   
   

           writer.AddStyleAttribute(HtmlTextWriterStyle.Color, "Red");

           writer.RenderBeginTag(HtmlTextWriterTag.P);

           writer.Write("Red text");

           writer.RenderEndTag();

       }

   }
3. Run the project and note the port it runs on.  In my case the url is http://localhost:56449.  Running in IE 8 I see:
   System.Web.UI.HtmlTextWriter
   
   
   
   Red text
4. In Fiddler enter Request Builder, build and execute the following request:
   Get http://ipv4.fiddler:YOURPORT HTTP/1.1
   User-Agent: Mozilla(compatible;MSIE 3.0;)
    Host: ipv4.fiddler:YOURPORT
5. In the Web Sessions click the session resulting from your request
6. Select the Inspectors tab and select TextView.  On my machine I see:
   System.Web.UI.Html32TextWriter<p><font color="Red">Red text</font></p>
   Since we specified our user-agent as MSIE 3.0 ASP.NET is rendering the style color using the font tag.
7. Go back to Fiddler Request Builder, build and execute the following request:
   Get http://ipv4.fiddler:YOURPORT HTTP/1.1
   User-Agent: Mozilla(compatible;MSIE 4.0;)
    Host: ipv4.fiddler:YOURPORT
8. In the Web Sessions click the session resulting from your request
9. Select the Inspectors tab and select TextView. On my machine I see:
   System.Web.UI.HtmlTextWriter<p style="color:Red;">Red text</p>
10. There are a couple of differences between the two responses:
1. HtmlTextWriter was used whereas in the previous request it was an Html32TextWriter.
2. ASP.NET renedered the style color using CSS instead of the font tag.

To undestand the mechanics making this happen 4 Guys From Rolla have an article describing the details.

Above I used ipv4.fiddler instead of localhost to enable seeing traffic sent to localhost as described in Fiddler's help.