This is the fourth module in the ongoing course, HTML5 Development for ASP.NET Developers. In case you’re just joining us, here’s what we’ve covered so far:
- Hello jQuery
- Hello Services / WebAPI, REST, JSON and AJAX
- Hello HTML5
In this module, we’ll focus on ASP.NET Web Forms.
ASP.NET Web Forms has been around for a very long time. Over the years, it has evolved dynamically. Today, it provides a robust platform for building web applications, including those that target HTML5.
In the previous article of this series, Burke Holland (@BurkeHolland) provided an excellent overview of HTML5 and its support in Visual Studio. I would strongly urge you to review his blog post if you’re new to HTML5, as it provides a number of great tools and resources worth checking out.
In this blog post, I’ll be taking a different viewpoint on HTML5; developers targeting ASP.NET Web Forms and HTML5. In part 1, I’ll cover the high level aspects and a bit of the background. In part 2, I’ll go into much deeper detail about the technical aspects of ASP.NET Web Forms and HTML5.
Background
I remember my first experiences with ASP.NET Web Forms quite well. This was over a decade ago when ASP.NET was known as Active Server Pages+ (ASP+). I recommend reading Dave Sussman’s MSDN article on ASP+ if you’re interested in taking a trip down memory lane.
Back in 2000, ASP+ represented a complete departure from the way websites were traditionally built on the Microsoft stack. Prior to its introduction, developer cobbled together websites with a combination of VBScript, server-side includes, COM components, and a lot of coffee. The developer experience of ASP was incredibly frustrating to say the least.
When ASP+ introduced the concept of Web Forms, it took off like a rocket. For developers, it was a huge boost to productivity:
- It supported an event model that enabled developers to build web applications in a similar manner as the rapid development environment of Visual Basic 6.
- It provided a framework and runtime environment that elevated object-orientation to the forefront.
- It enabled developers to build web applications in a much more productive manner than ASP through its rich object model.
While the branding for ASP+ eventually changed to ASP.NET, the ideas remained the same. And for the most part, not a great deal has changed. In fact, many of the original abstractions introduced in the first version of ASP.NET, such as Web Forms, remain in-place and are widely used today.
This, of course, begs the question: if a technology ASP.NET Web Forms is such a mature technology, can it be used to build applications in HTML5? I’m happy to state that the short answer is a resounding “yes”. However, the longer answer is somewhat nuanced. Depending on which version of ASP.NET you’re building against, your experience (and productivity) will vary. However, the good news is that much like wine, the story around HTML5 support in ASP.NET (and in ASP.NET Web Forms) is getting better as time goes on.
ASP.NET Web Forms and HTML5
There’s nothing preventing you from supporting HTML5 in ASP.NET Web Forms today. The reason for this is simple: HTML5 elements are defined as markup with a client-side event model. There’s no requirement on the server. Also, it’s worth noting that the HTML elements and attributes emitted by ASP.NET server controls are well formed and validate against the HTML5 specification. That stated, there are many developers who would like built-in server controls to leverage the new aspects of HTML5 like semantic elements. Until recently, this scenario was generally supported two ways: custom controls or content adapters.
Custom controls have been supported since the beginning of ASP.NET. Often, they are created as aggregates of other controls found in the framework. However, they are also created to new server controls that developers can use in-place of existing ones found in ASP.NET. Creating a custom control is fairly trivial and there a many articles online that show you how to do this. In the case where you’re looking to emit specific HTML5 elements, you can accomplish this through the Render method of the UserControl class.
Another mechanism of supporting HTML5 elements is through content adapters, which were introduced in ASP.NET 2.0. Content adapters are powerful because they allow you to specify how specific controls should emit markup – including build-in controls like the Calendar. Don’t like the default rendering of a particular control? Why not write a control adapter to modify its output to include HTML5 semantic elements? For more information about content adapters, make sure to check out Fritz Onion’s article on MSDN.
Today and Tomorrow with ASP.NET Web Forms and HTML5
There have been a lot of improvements made to ASP.NET Web Forms over the past year. Developers targeting ASP.NET Web Forms and looking to support the latest trends in web development should be encouraged by recent announcements made by teams at Microsoft. However, that doesn’t mean you should wait until HTML5 is supporting entirely by ASP.NET and Visual Studio. The reality is that the specification continues to evolve. This means that has parts of HTML5 start to stablize, one should expect to see a gap in its support in Visual Studio and ASP.NET. However, as we demonstrated throughout this blog series, these gaps are easily bridged through other tools and framework that are available.
Preliminary support for HTML5 IntelliSense and validation was first introduced in Visual Studio 2010 SP1 in the beginning of 2011. However, it was somewhat limited in its effectiveness; integrating support for HTML5 IntelliSense and validation presented some serious challenges given the flux in the HTML5 specification at the time. In June 2011, the Web Platform and Tools team released the Web Standards Update, which added HTML5 and CSS3 support to Visual Studio 2010 SP1. If you haven’t taken the time to download and install this extension, I would strongly encourage you to do so. Essentially, it’s an extension that adds HTML5 and CSS3 IntelliSense and validation to Visual Studio.
I would recommend reading Scott Hanselman’s blog post that covers the Web Standards Update from a high level perspective. While I can appreciate all of the work that’s gone into supporting HTML5 and CSS3 through the Web Standards Update, some important parts – such as HTML5 form elements – are left unsupported. The good news is that support is coming in the next version of ASP.NET.
Looking Ahead to Visual Studio 2012 and ASP.NET 4.5
There are many exciting improvements planned for Visual Studio 2012 and ASP.NET 4.5. For developers targeting HTML5 with ASP.NET Web Forms, there are a number of features worth noting in the next release. Here’s a table I stole repurposed from MSDN that highlights just of the few things to look forward to:
|
Feature
|
Description
|
|
Model binders
|
Web Forms now supports model binding, which lets you bind data controls directly to data-access methods. ASP.NET automatically converts data from form fields, query strings, cookies, session state, and view state into method parameters. You can use these parameters to select data from or make updates to the database. (This technique is similar to model binding in ASP.NET MVC.)
|
|
Strongly typed binding expressions in data controls
|
You can now write strongly typed, two-way data-binding expressions in Web Forms data controls, instead of using Bind or Eval expressions. This approach lets you access complex properties in data controls. These expressions can be used with the new model binding feature.
|
|
Unobtrusive JavaScript for client-side validation
|
Unobtrusive validation moves the code for client-side validation into a single external JavaScript file, which makes pages smaller and faster to load. It also provides better caching of script files.
|
|
HTML encoded data-binding expressions
|
New syntax lets you encode HTML output in page markup.
|
|
Fallback support for content distribution networks (CDNs) in the ScriptManager control
|
When you set the EnableCdn property of the ScriptManager control, the control tests whether the script was loaded successfully from the CDN. If not, the control falls back to loading the script from an alternate (local) location.
|
|
Support for HTML5 form types
|
You can use HTML5 elements like email, tel, url, and search in Web Forms pages.
|
|
Improved paging in the GridView control
|
The new AllowCustomPaging and VirtualItemCount properties of the GridView control let you customize paging functionality. These new properties remove the need for the control to retrieve all rows from the data source each time a new page is displayed.
|
Reference: ASP.NET Web Forms - ASP.NET 4.5 and Visual Studio for Web Release Candidate
Although it’s not specifically related to HTML5, I am also looking forward to leveraging the new bundling and minification support that’s being introduced to ASP.NET 4.5. Effectively, this will allow you to structure your server-side markup to point to a script or style directory, and have the ASP.NET runtime automatically bundle and minify all of its resources:
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/Scripts/js")
Awesome stuff!
Related Links and Resources
There are many sites worth checking out if you’re interested about learning more about HTML5 in ASP.NET Web Forms. Here are just a few:
