Bill Evjen - Real World .NET, C#, and Silverlight: Indispensible Experiences from 15 MVPs

Chapter 1

ASP.NET and jQuery

by David Giard

Approximately ten years ago, Microsoft introduced ASP.NET a framework for building web applications using the new .NET platform. ASP.NET was designed to assist developers to build, deploy, and maintain web pages and websites. ASP.NET integrates with Microsoft Internet Information Server (IIS) and provides developers with a rich set of tools to develop dynamic web applications.

When it was introduced, this framework focused on Web Forms. Web Forms abstracted away many of the low-level complexities of HTML and HTTP, giving developers an experience similar to one used to build Windows Forms. By using Web Forms, developers could quickly create an interactive web page, even if they knew little about the underlying technologies of the web. This development experience was similar to the popular Visual Basic language, so it appealed to developers familiar with that language.

Like its predecessor Active Server Pages (ASP), ASP.NET provides a developer with the ability to build web applications using a combination of code and markup.

Unlike the classic ASP, ASP.NET is built on top of the Common Language Runtime (CLR) and uses the power of .NET. Because of this, ASP.NET can take advantage of CLR benefits, such as automatic garbage collection, a rich set of libraries, and a robust security model.

The latest version of ASP.NET includes enhancements to the ASP.NET Web Forms Framework and an updated version of the new ASP.NET Model-View-Controller (MVC) framework. Visual Studio .NET 2010 is also the first version to ship with jQuery libraries, which enable developers to build rich client-side functionality into their websites.

This chapter focuses on what is new in ASP.NET 4. First, you learn about some of the new features and enhancements of ASP.NET 4 Web Forms. Next, you learn about the ASP.NET MVC framework. Finally, this chapter covers how to effectively use jQuery to enhance your application.

Along the way, a sample application provides guidance on how to implement these new features.

Understanding Web Forms

The Web Forms Framework was introduced with ASP.NET 1.0. Countless websites have been successfully built and deployed using this platform.

Essentially, the Web Forms Framework was designed to abstract away the complexities of Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP) to make web development feel more like Visual Basic forms development. Following are characteristics of Web Forms application development:

• The developer is presented with a design surface that looks like a web page.
• Web controls are dragged onto this design surface.
• Properties are set on the page and on the controls.
• Code is written to manipulate the page, controls, and associated data.

Using Visual Studio, developers can quickly build a web application. A rich set of built-in controls and third-party controls adds to this abstraction and helps cut down on many development tasks.

However, this rapid application development (RAD) comes at a cost. Web Forms and associated controls automatically generate HTML and JavaScript. Sometimes the generated code does not exactly match your needs. To add to the difficulty, different web browsers often render the same HTML in different ways, and understand JavaScript differently particularly as JavaScript interacts with the web page's Document Object Model (DOM). A common problem is that a page renders properly in one browser but improperly in another.

Using Web Forms, it is difficult to modify the output HTML or JavaScript. This is especially an issue when you target multiple browsers. If you have trouble tweaking HTML, you will have trouble supporting some browsers. For this reason, web developers should learn as much as they can about HTML, Cascading Style Sheets (CSS), and HTTP. Abstractions such as Web Forms are fine, but they do not excuse the responsibility to understand the technologies they abstract.

Microsoft introduced a number of enhancements to ASP.NET with version 4. Following are a few of the most important ones:

• Improved handling of View State provides users with greater flexibility over the controls that participate in View State .
• The web.config file has been greatly simplified.
• A new Web Project template provides greater functionality.
• web.config transformations make it easier to deploy to a new environment.

Let's take a look at these in a bit more detail.

View State

By default, the web and its underlying transport protocol (HTTP) are stateless. This means that, by default, each request remembers nothing about any previous request. ASP.NET introduced View State as a way to maintain state between pages in a web application.

View State works by automatically creating an extra, hidden input within an HTML form. To save the state of the submitted fields on a page, ASP.NET encodes View State data into a single string and sets the value of this hidden field to that string. This field is created on the server and sent down to the client with the rest of the web page.

This convenience comes at a price. The encoded data is submitted each time the form is submitted and it is returned to the browser with each response. If you have a lot of data stored in View State , that data can get quite large, slowing down communication between the client and the server.

Using a previous version of ASP.NET, a developer could turn View State on or off at the page level, or at the control level. Prior to ASP.NET 4, you basically had three options for enabling View State :

• Turn off View State for the entire page If you do this, you do not realize any of the benefits of View State .
• Turn on View State for the entire page If you do this, you may encode and add unneeded items to View State , bloating the payload sent between the server and the browser, slowing your application, and degrading the user experience.
• Turn on View State for the page, and then disable View State for controls that do not need it This strategy works well if you want View State for almost every control on the page, but not for a few controls. It can be a real pain if you want View State enabled only for a couple controls.

ASP.NET 4 provides two relevant properties to control View State : ViewStateMode and EnableViewState . Only ViewStateMode is new in version 4, but the two properties work together.

EnableViewState has been around since the first version of ASP.NET. It can be set for an entire page, or for a single control, and it can be set to either True or False . EnableViewState does not turn on View State for any controls. Rather, it determines whether View State may be turned on for a control, and for any controls below it in the control containership hierarchy. A control's ViewStateMode turns on or off View State , but only if EnableViewState is True . ViewStateMode can be enabled or disabled explicitly, or by inheriting this property from its parent container.

Setting a Page or Control's View State attribute to False disables View State for that Page/Control and for any controls contained therein.

In previous versions of ASP.NET, the only way to selectively enable and disable View State on controls was to set EnableViewState=True on the page, and set EnableViewState=False on the controls for which you did not want to maintain the overhead of passing View State between the client and the server.

You can set ViewStateMode as an attribute of a page or control, or you can set it in code. Following are the allowable values:

• Enabled Turns on View State for a control.