Channels ▼
RSS

Parallel

What's New in Visual Studio 2010 & .NET 4 for Web Developers


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"/>


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video