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.
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.
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.