Cleaner HTML markup in ASP.NET 4 Web Forms

Original author: Scott Gu
  • Transfer
imageThis is the sixteenth article in a series on the upcoming release of VS 2010 and .NET 4.

Today's post is the first of a series to highlight the important changes we made with Web Forms in ASP.NET 4 to generate clean, CSS-friendly markup standards. Today I will talk about the work we have done to provide better control over the “ID” attribute generated by server controls for the client.

Generate clean, CSS-friendly markup standards


One of the most common complaints of developers was the inability to generate a normal layout for server controls in ASP.NET Web Forms. Here is a list of specific issues in previous versions of ASP.NET:
  • Auto-generating an ID attribute in HTML makes it difficult to work with JavaScript and CSS.
  • Using tables instead of semantic markup for some controls (for example asp: menu), which is ugly for styling.
  • Some controls generated inline styles, even when no style properties were explicitly specified.
  • ViewState was often large enough, far from ideal.

ASP.NET 4 provides improved support for building standards-compliant pages right out of the box. Now, the built-in server control in ASP.NET 4 generates cleaner markup and supports CSS styling, which eliminates all of the above problems.

Markup compatibility while updating existing ASP.NET Web Forms applications


A common question people ask when they hear about the cleaner markup that appeared in ASP.NET 4 is “Great, but what will happen to my existing applications now?” Will these innovations break everything when I update the project? ”

To make sure that layout and styling are constant in existing ASP.NET Web Forms applications, we added a configuration flag - controlRenderingCompatbilityVersion, to web.config, which allows you to decide which version of the markup generator to use: When the controlRenderingCompatbilityVersion flag is set to “3.5”, your application and server controls by default render markup corresponding to .NET 3.5. When the flag is controlRenderingCompatbilityVersion

image

set to “4.0”, your application and server controls generate semantic markup conforming to the XHTML 1.1 standard, cleaner client IDs, and there are no extraneous line styles.

By default, this flag is 4.0 for all new ASP.NET Web Forms applications built using ASP.NET 4. For all other, earlier applications that are updated using VS 2010, we automatically set the controlRenderingCompatbilityVersion flag to 3.5. Later, you can easily change its value, both at the level of the entire application, and in the web.config file separately for each page or for the entire directory.

Client ID


The ability to have a clean, predictable ID attribute on the generated HTML element is what developers have long asked for Web Forms (ID values ​​like “ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1” are not very popular). With control over the ID value, it makes it easier for you to write JavaScript, use CSS, and reduce the amount of markup on large pages.

New Property for ClientIDMode Controls

ASP.NET 4 supports the new ClientIdMode property in the Control base class. The ClientIdMode property specifies how the control should generate a client ID. The ClientIdMode property supports four possible values:
  • AutoID - generates according to the principle of .NET 3.5 (the auto-generated ID still adds the ctrl00 prefix for compatibility)
  • Predictable (default) - truncates “ ctl00 ” at the line ID and, if it is a list or container, it adds the parent ID to the children (id = ”ParentControl_ChildControl”)
  • Static - gives full control over the naming of the control to the developer, no matter what it indicates for the ID, everything will be displayed in the result.
  • Inherit - tells the control to use the naming mode of the parent control

The ClientIDMode property can be set directly to any control or in the container and then the internal elements will be with inherited settings: Or it can be set at the whole page level using the directives <% @ Page%> or <% @ Control%>, in this case The controls inside the page or user control inherit settings and can optionally overload them. Or it can be installed in the web.config of the application, in this case the pages in the application will inherit the settings and, in the same way, may overload them. All this gives you the flexibility to customize or overload the naming behavior the way you want it.

image



image



image



Example: using the ClientIdMode property for non-list controls


Let's take a look at how you can use the new ClientIdMode property for controls on the page by setting “ID”. For demonstration, we will create a simple page, call it “SingleControlExample.aspx”, which is based on the master-page “Site.Master”, and contains one element with the ID “Message" located in named “MainContent”: In our code-behind file, add a simple code, as shown below, to set Label text dynamically: If we run the application using ASP.NET 3.5 or we configured the ASP.NET 4 application to use rendering from version 3.5, or set ClientIdMode = AutoID, then the generated markup sent to the client will look like this: the ID is unique, which is good, but ugly due to the “ctl100” prefix, which is not very happy.

image



image



image



Generate markup when ClientIdModel is set to “Predictable”

With ASP.NET 4, server-side controls are generated by default using ClientIdMode = ”Predictable”. This allows you to be sure that all ID values ​​are unique and that there are no conflicts on the page, while the ID is less verbose and more predictable. This means that the generated control layoutby default, in ASP.NET 4, it will look like this: Note that the “ct100” prefix has disappeared. Since the “Message” control is located in the “MainContent” container, by default, its ID will be prefixed with “MainContent_Message” to prevent potential conflicts with other controls on the page.

image



Generate markup when ClientIdModel is set to “Static”

Sometimes you don’t want the ID values ​​not to be hierarchical, but just go with the value we want to set: All this gives us the opportunity to fully control the value of the client ID of the controls.

image



Example: using the ClientIdMode property for lists associated with data


Lists or grids associated with data have historically been difficult to use or customize styles when working with automatically generated IDs in Web Forms. Now let's take a look at the scenario where we will configure the ID for the ListView in ASP.NET 4.

The following is a snippet of ListView code that displays the contents of a linked collection, in our case airports: Next, we can write the code in a code-behind file to dynamically link the list airports with ListView: At runtime, the default list will look like

image



image

    . Note that
      and
    • the items in the ListView are not server controls, and for them there is no ID in the markup:

      image

      Add a client ID for each line

      Let's imagine that we need to add a client ID, for programmatic access to each
    • , via JavaScript. We want the ID data to be unique, predictable and recognizable.

      Need to tag each
    • in the template as a server control by setting the runat = ”server” attribute and giving each id “airport”: By default, ASP.NET 4 will generate a clean ID, as shown below, there will be no ctl001:

      image



      image

      We use property ClientIDRowSuffix

      Our above template now generates unique IDs for each
    • element, but if we programmatically access it through JavaScript, we would like the ID to contain the airport code. The good news is that you can do this very simply using the new ClientIDRowSuffix property in the associated ASP.NET 4 control:

      To do this, set the ClientIDRowSuffix property to “Code” in our ListView. It tells ListView to use the associated “Code” property from our Airport class when generating the ID: Now, instead of the suffix “1” or “2”, we get the value Airport.Code (_CLE, _CAK, _PDX): You can use ClientIDRowSuffix in any other elements that have a data connection, such as a GridView.

      image



      image



      Summary


      ASP.NET allows you to generate much cleaner HTML markup for server controls.

      In the next article, I will talk about other innovations that affected markup in ASP.NET 4.

Also popular now: