ASP.NET Web Forms

Now let's switch gears a little and take a look at ASP.NET Web Forms. We get a lot of email from people worried that with the release of ASP.NET MVC, ASP.NET Web Forms may be going away. We want to let you know that this is certainly not the case. Microsoft has invested a lot in Web forms for the .NET 4 release, with the aim of making your productive experience in building Web applications using ASP.NET and ASP.NET Web forms easier and more powerful than ever.

Client ID flexibility. One major piece of feedback that we've heard from developers involves controlling the Client ID of controls. With the explosion in popularity of JavaScript-based client-side APIs such as the JQuery JavaScript library, many people have found that the controls generated by an ASP.NET page on the server side have obscure or hard-to-recognize IDs because the framework would modify the client-side IDs to uniquely identify each control. It could give you the ID that you had previously defined, or could leave you with something long and obscure like ctl00_MasterPageBody_ctl07_TextBox1, and if you needed to write some client-side script against this, the experience wasn't optimal. Now, with ASP.NET 4, all controls have a ClientIDMode property which can be used to control this behavior. Note also that the overall ClientID mode can be set for the application in Web.config.

So, for example, consider this simple ASP.NET Web Form that uses a master page:

<asp:TextBox ID="MyTextBox1" runat="server"></asp:TextBox>

that will produce the following HTML:

<input name="ctl00$ContentPlaceHolder1$MyTextBox1" type="text" id="ctl00_ContentPlaceHolder1_MyTextBox1" />

The ClientIDMode property has a number of settings that you can use. In this case, as you have a single control, setting it to Static lest you generate the ID on the client exactly as it is specified on the server, so the following ASP.NET markup:

<asp:TextBox runat="server" ID="MyTextBox1" ClientIDMode="Static" ></asp:TextBox>

will produce the following HTML:

<input name="ctl00$ContentPlaceHolder1$MyTextBox1" type="text" id="MyTextBox1" />

Another option for the ClientID mode property are Predictable which is typically used in a data binding scenario where n controls are created at runtime where n is determined by how many records you are binding to. So, for example, consider a GridView control like this:

<asp:GridView ID="Friends" runat="server" AutoGenerateColumns="false" ClientIDMode="Predictable" >
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="FriendID" runat="server" Text='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="FriendName" runat="server" Text='<%# Eval("Name") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

The HTML that is generated will have a table whose ID is the name of the Grid, and elements whose names are derived from the name of the grid, the name of the field and an incremental value, so you can predict that a field will be called GridName_FieldName_X.

<table id="Friends">
..
<td><span id="Friends_FriendID_0">1</span></td>
<td><span id="Friends_FriendName_0">Scott Guthrie</span></td>
..
<td><span id="Friends_FriendID_1">2</span></td>
<td><span id="Friends_FriendName_1">Laurence Moroney</span></td>
..
</table>

Other options are Inherit where the name will inherit from the parent container, and AutoID where the legacy behavior of pre-NET 4 is maintained for backwards compatibility.

Cleaner HTML

Going beyond ClientID control, ASP.NET 4 also gives you the ability to emit very clean HTML. This makes it a lot easier for you to do CSS styling on your HTML, make AJAX programming simpler and be more bandwidth efficient. ASP.NET 4 gives you clean markup through removing many of the extraneous inline styles, and by removing outer table rendering on template controls.

As a simple example of this, consider an Image control, which in ASP.NET is defined like this:

<asp:Image ID="Image1" runat="server" />

When you'd execute the application, this would generate markup like this, where a style with border width of 0 has been added for you whether you want it or not:

<img id="MainContent_Image1" src="" style="border-width:0px;" />

With ASP.NET 4, this behavior is turned off by default, so you'll get cleaner HTML, and its xHTML conformance is set to be strict. The earlier Image will look like this:

<img id=" Image1" src="" />

There are many other instances of using controls where styles like this would be added, or the output would be wrapped in a table, so that inline styles could be applied. In .NET 4, this is removed, but, for backwards compatibility, you can turn it back on. You do this using the <pages> node in your web.config. If you load an older project into Visual Studio 2010, this will be set to the "old" mode so as not to break your markup. Here's the Web.config setting for the "old" way. Change the value to "4.0" for cleaner HTML.

<pages controlRenderingCompatibilityVersion="3.5"/>