ASP.NET Web Forms and HTML5, Part 1

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:

1. Hello jQuery
2. Hello Services / WebAPI, REST, JSON and AJAX
3. 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:

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:

• ASP vNext - your one-stop-shop for everything relating to the next version of ASP.NET
• Control Adapters by Fritz Onion (@fritzonion)
• Announcing the Web Standards Update - HTML5 Support for the Visual Studio 2010 Editor by Scott Hanselman (@ScottHanselman)
• Visual Studio 2012 RC is released - The Big Web Rollup by Scott Hanselman (@ScottHanselman)
• Integrate HTML5 into Existing ASP.NET Web Forms and ASP.NET MVC Applications by Rachel Appel (@RachelAppel)