Many businesses have invested thousands of man-hours into ASP.NET Web Forms. These same businesses don't have time to rewrite their systems using the latest Web technologies, such as MVC. However, with just a little reworking of your Web Forms, you can still get all the advantages of modern Web techniques, such as HTML 5, CSS 3, Bootstrap, and jQuery. Lately, I've been assisting many clients as they upgrade their Web Forms applications to take advantage of Bootstrap, jQuery, JavaScript, friendly URLs, and many other modern Web application techniques.

This article is another in my series on how to upgrade your Web Forms application without rewriting. In this article, I'll present how you can take advantage of HTML 5 generation from Text Box controls, use the new HTML 5 attributes and input types, and see techniques for working with jQuery.

HTML 5 and Visual Studio

Prior to HTML 5, you were limited to an input type of text for normal textual input by a user. To restrict input to numbers, dates, or any other domain type, you wrote JavaScript/jQuery. HTML 5 defines several new input types such as number, date, email, etc. The browser now enforces the entry of the data matching the input type. This means that you'll write much less code! In addition, when a user data on a mobile phone, most of these types bring up the appropriate keyboard for the data entry.

Visual Studio 2010 had a service pack (Web Standards Update for Microsoft Visual Studio 2010 SP1) that you could download to add on the new HTML 5 input types to the TextBox control. Visual Studio 2012/2013 has the HTML 5 input types built right into the TextMode property in IntelliSense and the Property Window (see Figure 1).

Figure 1: HTML 5 input types are built into the TextMode property.

The newer browsers recognize all of the new HTML 5 input types. If they don't recognize one, the browser treats them as text. This means that you can start using these types immediately. If you have a JavaScript library that you use to enforce data types, most likely it will still work for the older browsers.

A better approach is to use the Modernizr() library to detect which features and input types your browser recognizes and only bring in your old JavaScript library if needed. When you create a Web Form application in Visual Studio 2012/2013, the Modernizr library is included automatically as a part of the project.

To use any of the new HTML 5 input types, you add a TextBox control to a Web page or go into an existing Web page and select the input type from the TextMode property. All of the new HTML 5 input types are outlined in Table 1.

To use an ASP.NET TextBox control that requires a Date input type, your Web Form markup looks like the following code snippet:

<asp:TextBox runat="server"
             TextMode="Date">
</asp:TextBox>

When this code generates, the resulting HTML looks like the following:

<input name="ctl02" type="date" />

The above code is valid HTML 5 and all modern browsers will recognize this as a date input type. Many of those browsers display a drop-down calendar control from which the user can select a date. If a browser doesn't recognize the date input type, it treats it as a text type.

Customizing Your Input Using Attributes

You can further customize the input types by applying attributes to your input fields. Even though these attributes don't display in the IntelliSense list of your ASP.NET TextBox controls, you can emit them in the final HTML by adding them to the TextBox control. There are several HTML 5 attributes that you can use, as shown in Table 2. An example of the autofocus and required attributes are shown in the following code snippet:

<asp:TextBox runat="server"
             ID="txtFirst"
             autofocus="autofocus"
             required="required"
             TextMode="SingleLine" />

Server and jQuery Controls

Prior to .NET 4, when ASP.NET controls generated HTML, the ID attribute that uniquely identified an HTML control was “munged” into a value that was not necessarily what you set it to in your server control. For example, if you use a TextBox control and set the name to txtProductName, the resulting ID in the generated HTML might be MainContent_txtProductName. When you're using all server-side code, this isn't a problem. However, once you start to use JavaScript and jQuery, you now have to know what the client-side ID attribute will be.

A work-around that we've employed for years in Web Forms is to use some script code with the ClientID property to set the generated ID within some JavaScript code. The following code snippet shows an example of setting the value of your txtProductName text box using a jQuery selector with the script code to give you the generated client-side ID.

<script>
    function SetProductName() {
        $("#<%=txtProductName.ClientID %>")
            .val("A New Product");
    }
</script>

Most of us know what we're doing and can ensure that we won't generate duplicate IDs within an HTML page, so it would be nice if we didn't have to work with these “munged” IDs that Microsoft generates. You now have that option by using the ClientIDMode property. This property can be set in the Web.Config, in a Master Page, in a Page, or even on an individual control. There are four different values you may set this property to, as shown in Table 3.

If you wish to simplify your JavaScript/jQuery programming, set the ClientIDMode to Static. When you use Static, you know that the ID you create on your server control is the same on the client side. Thus, you may use code like the following on your client side.

<script>
    function SetProductName() {
        $("#txtProductName").val("A New Product");
    }
</script>

One thing you need to be aware of when using the Static mode is that you may hit problems when working with user controls. If you use the same user control multiple times on the same page, you could end up with duplicate IDs. In this case, you might want to set the user control to continue to use ClientIDMode=“Auto”. By the way, you'll have the same issue when you use multiple partial views on the same page in MVC. You'll also have to add some prefix to your controls within the partial view in order to not duplicate the ID.

Where to Set ClientIDMode

You have a few options on where to set the ClientIDMode. First, you can set it in the Web.Config if you wish to have every page use the same mode. Within the <pages> element, add the clientIDMode="Static" in order to make all pages use the static mode of ID generation.

<system.web>
    <pages clientIDMode="Static" />
</system.web>

You may also set the ClientIDMode within a master page in your site. Setting ClientIDMode="Static" within the master page makes all pages that use that master page generate static IDs.

<%@ Master Language="C#"
    ClientIDMode="Static"
    Inherits="Samples.Site" %>

You may also set the ClientIDMode on an individual Web page in the @Page directive. Or, you can set the ClientIDMode even on an individual control. As in most things in the Web world, the closest setting to a control wins. So even though you set the Web.Config setting of ClientIDMode equal to Static, if you set a TextBox control on an individual page to AutoID, then AutoID is what is used because it is the closest setting to the control.

Summary

Microsoft is actively adding new features and updating the underlying ASP.NET engine to support both Web Forms and MVC. In Visual Studio 2013, a new Web Forms project uses the same JavaScript and jQuery libraries, Bootstrap, Modernizr, and other technologies that are also included in a new MVC project. The existing server controls in Web Forms can take full advantage of HTML 5 and CSS 3. With the use of the new ClientIDMode directive, you can now generate JavaScript/jQuery friendly control IDs as well.