Stephen Walther on ASP.NET MVC

Speaking at Tech-Ed Europe Next Week

Stephen Walther — Tue, 03 Nov 2009 15:15:02 GMT

I’m going to Berlin! Next week, I’m giving talks at Tech-Ed Europe on two of my favorite topics:

What's New in Microsoft ASP.NET Model-View-Controller
ASP.NET Model-View-Controller (MVC) 2 introduces new features to make you more productive when building an ASP.NET MVC application. Templated helpers allow automatically associatiating edit and display elements with data types. Areas provide a means of dividing a large Web application into multiple projects. Data annotations allow attaching metadata attributes on a model to control validation.

Microsoft ASP.NET AJAX: Taking AJAX to the Next Level
Hear how ASP.NET AJAX 4.0 makes building pure client-side AJAX Web applications even easier, and watch us build an entire data-driven ASP.NET AJAX application from start to finish by taking advantage of only JavaScript, HTML pages, and Windows Communication Foundation (WCF) services. Also learn about new ASP.NET AJAX features including the DataView control, declarative templates, live client-side data binding, WCF, and REST integration.

The conference has sold out, but you can register for the wait list:

http://www.microsoft.com/europe/TechEd/

The Microsoft Ajax Library and Visual Studio Beta 2

Stephen Walther — Wed, 21 Oct 2009 16:21:39 GMT

Visual Studio 2010 Beta 2 was released this week and one of the first things that I hope you notice is that it no longer contains the latest version of ASP.NET AJAX. What happened? Where did AJAX go?

Just like Sting and The Police, just like Phil Collins and Genesis, just like Greg Page and the Wiggles, AJAX has gone out of band! We are starting a solo career.

A Name Change

First things first. In previous releases, our Ajax framework was named ASP.NET AJAX. We now have changed the name of the framework to the Microsoft Ajax Library. There are two reasons behind this name change.

First, the members of the Ajax team got tired of explaining to everyone that our Ajax framework is not tied to the server-side ASP.NET framework. You can use the Microsoft Ajax Library with ASP.NET Web Forms, ASP.NET MVC, PHP, Ruby on RAILS, and even pure HTML applications. Our framework can be used as a client-only framework and having the word ASP.NET in our name was confusing people.

Second, it was time to start spelling the word Ajax like everyone else. Notice that the name is the Microsoft Ajax Library and not the Microsoft AJAX library. Originally, Microsoft used upper case AJAX because AJAX originally was an acronym for Asynchronous JavaScript and XML. And, according to Strunk and Wagnell, acronyms should be all uppercase. However, Ajax is one of those words that have migrated from acronym status to “just a word” status.

So whenever you hear one of your co-workers talk about ASP.NET AJAX, gently correct your co-worker and say “It is now called the Microsoft Ajax Library.”

Why OOB?

But why move out-of-band (OOB)? The short answer is that we have had approximately 6 preview releases of the Microsoft Ajax Library over the last year. That’s a lot.

We pride ourselves on being agile. Client-side technology evolves quickly. We want to be able to get a preview version of the Microsoft Ajax Library out to our customers, get feedback, and make changes to the library quickly. Shipping the Microsoft Ajax Library out-of-band keeps us agile and enables us to continue to ship new versions of the library even after ASP.NET 4 ships.

Showing Love for JavaScript Developers

One area in which we have received a lot of feedback is around making the Microsoft Ajax Library easier to use for developers who are comfortable with JavaScript. We also wanted to make it easy for jQuery developers to take advantage of the innovative features of the Microsoft Ajax Library.

To achieve these goals, we’ve added the following features to the Microsoft Ajax Library (these features are included in the latest preview release that you can download right now):

A simplified imperative syntax – We wanted to make it brain-dead simple to create client-side Ajax controls when writing JavaScript.
A client script loader – We wanted the Microsoft Ajax Library to load all of the scripts required by a component or control automatically.
jQuery integration – We love the jQuery selector syntax. We wanted to make it easy for jQuery developers to use the Microsoft Ajax Library without changing their programming style.

If you are interested in learning about these new features of the Microsoft Ajax Library, I recommend that you read the following blog post by Scott Guthrie:

http://weblogs.asp.net/scottgu/archive/2009/10/15/announcing-microsoft-ajax-library-preview-6-and-the-microsoft-ajax-minifier.aspx

Downloading the Latest Version of the Microsoft Ajax Library

Currently, the best place to download the latest version of the Microsoft Ajax Library is directly from the ASP.NET CodePlex project:

http://aspnet.codeplex.com/

As I write this, the current version is Preview 6. The next version is coming out at the PDC.

Summary

I’m really excited about the future of the Microsoft Ajax Library. Moving outside of the ASP.NET framework provides us the flexibility to remain agile and continue to innovate aggressively. The latest preview release of the Microsoft Ajax Library includes several major new features including a client script loader, jQuery integration, and a simplified client control creation syntax.

Using the New Microsoft Ajax Minifier

Stephen Walther — Fri, 16 Oct 2009 20:25:13 GMT

Last night, Scott Guthrie announced that the ASP.net team published a free tool that enables you to improve the performance of your Ajax applications by reducing the size of its JavaScript files. The new tool is named the Microsoft Ajax Minifier.

You can read Scott Guthrie’s announcement here:

http://weblogs.asp.net/scottgu/archive/2009/10/15/announcing-microsoft-ajax-library-preview-6-and-the-microsoft-ajax-minifier.aspx

And you can download and install the free tool from the CodePlex website here:

http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488

In this blog entry, I explain how you can take advantage of the Microsoft Ajax from the command-line and when you are using Visual Studio.

Overview of the Microsoft Ajax Minifier

The Microsoft Ajax Minifier was created by Ron Logan (who is clearly a super-genius). The Microsoft Ajax team (I work on this team) has been using this tool internally for a number of years. For example, we use the Microsoft Ajax Minifier to minify the Microsoft Ajax Library before publishing it.

The Microsoft Ajax Minifier enables you to reduce the size of a JavaScript file by removing unnecessary content from the JavaScript file. The tool supports two modes: normal crunching and hypercrunching.

When you use normal crunching, the Microsoft Ajax Minifier strips all comments, unnecessary whitespace, curly-braces, and semicolons from a JavaScript file. Surprisingly, just removing all of this unnecessary code fluff can make a significant difference to the size of a JavaScript file.

When you use hypercrunching, the Microsoft Ajax Minifer gets more aggressive about reducing the size of a JavaScript file. In hpercrunching mode, the Microsoft Ajax Minifier shortens the names of local variables (variables in functions but not global variables) and it removes unreachable code.

For example, here’s an unminified JavaScript file:

// Adds two numbers

function addNumbers(firstNumber, secondNumber, thirdNumber)

{

var result = firstNumber + secondNumber + thirdNumber;

return result;

}

// Calculate cost

var cost = addNumbers(1, 2, 3);

And here is the same JavaScript file after it has been hypercrunched using the Microsoft Ajax Minifier:

function addNumbers(b,a,c){var d=b+a+c;return d}var cost=addNumbers(1,2,3)

It is important not to confuse minifying with compressing. Both approaches to reducing the size of a JavaScript file are important. You can configure IIS to compress JavaScript files using GZIP compression automatically. You get additional performance benefits from minifying JavaScript files before compressing them.

Using the Microsoft Ajax Minifier from the Command-Line

When you install the Microsoft Ajax Minifier, you get a convenient Microsoft Ajax Minifier Command Prompt that you can invoke from Start, Microsoft Ajax Minifier program group.

This command prompt adds the Microsoft Ajax Minifier to the path variable so that you can change directories and still run the Microsoft Ajax Minifier.

Use the following command to perform normal crunching:

ajaxmin inputfile.js –o outputfile.js

Use the following command to perform hypercrunching:

ajaxmin –hc inputfile.js –o outputfile.js

The Microsoft Ajax Minifier has a number of different switches that you can use to control how a file gets minified. These options are documented in the Microsoft Ajax Minifier documentation included in the Microsoft Ajax Minifier program group.

Using the Microsoft Ajax Minifier as a Visual Studio Build Task

You also can integrate the Microsoft Ajax Minifier directly into the Visual Studio build process. In that case, every time you perform a build, you can minifying all of the JavaScript files in your project automatically.

When you install the Microsoft Ajax Minifier, a new MSBuild task named ajaxmin is added to the following folder:

Program Files\MSBuild\Microsoft\MicrosoftAjax

In order to use this custom build task in a Visual Studio Project, you need to modify the project file. You can modify a project file by opening the project file in Notepad. Just open Notepad and browse to your project folder and open the projectname.csproj or projectname.vbproj file.

Alternatively, you can modify your project file directly within Visual Studio by right-clicking your project name in the Solution Explorer window and selecting the menu option Unload Project. Next, you need to select the menu option Edit Project Name (see the following screenshots).

I admit that, even though I work on the ASP.NET team, I had never noticed the Unload Project, or Edit Project Name menus before. A good day is a day when you can discover a super obscure Visual Studio menu item!

After you open your project file using Notepad or Visual Studio, you need to add the following section anywhere within the project file (within the opening and closing <project> elements):

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />

<Target Name="AfterBuild">

<ItemGroup>

<JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />

</ItemGroup>

<AjaxMin SourceFiles="@(JS)" SourceExtensionPattern="\.js$" TargetExtension=".min.js" />

</Target>

This section imports the AjaxMin task. It causes the task to be executed after a build. The <ItemGroup> element is used to specify the set of files to minify. In this case, all files ending in the extension .js, but not files ending in the extension .min.js are selected for minification. All the files from the Scripts folder are also excluded (So jQuery and MicrosoftAjax won’t get re-minified). Finally, the files are actually minified by invoking the task with the <AjaxMin> element.

After you make these changes, you can reload your Visual Studio project by right-clicking your project in the Solution Explorer window and selecting the Reload Project menu option.

Because we added a custom task to our project -- and a custom task could do evil things like delete your entire hard drive -- you get the following warning dialog:

Select Load project normally and your project will appear in the Solution Explorer window again.

Now here is the fun part. Now, that we have added the Microsoft Ajax Minifier task to our project file, every JavaScript file will get minified every time we perform a build. Just select the Build, Build Solution or Build, Build Project to perform the minification (or hit F5).

Be aware that minified files are not added to a project automatically after a build. After performing a build, select the menu option Project, Show All Files to see the new minified files.

Conclusion

The Microsoft Ajax Minifier makes it much easier to build high-performance Ajax applications. By reducing the size of your JavaScript files, you can enable the visitors to your website to download your Ajax applications much faster.

New AJAX Control Toolkit Release

Stephen Walther — Thu, 01 Oct 2009 15:44:44 GMT

We just released a new version of the AJAX Control Toolkit today. This new version includes significant bug fixes and two new controls. You can download the latest version – the September 30^th release – from the CodePlex website right here:

http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

Read the following tutorial to learn how to install the AJAX Control Toolkit:

http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-47-cs.aspx

In this blog entry, I provide a brief walkthrough of the two new controls included with this release and list the new bug fixes.

Seadragon Control

The Seadragon control enables you to pan, zoom, and make an image full screen. The control performs all of these fancy image effects using pure JavaScript and it works with any modern web browser.

You can try out Seadragon by visiting the following web page. Click on the image of the bicycle that appears half-way down the page.

http://livelabs.com/seadragon-ajax/

The Seadragon control displays a menu of buttons:

When you click the plus + or minus – buttons, you zoom in and out of the image. When you click the home button you reset the zoom state. Finally, when you click the final button, the image becomes full screen (or more accurately, full browser window).

You can also use your mouse to drag the image from side to side – you can stitch lots of images together to create a truly humongous image that you can drag through. And, if you click the image, you zoom in on the image.

This control is super useful for displaying interactive pictures of products. For example, a customer can zoom in and zoom out of a picture of a shiny new laptop. A customer can use Seadragon to easily make the picture full screen.

In order to use the Seadragon control, you need to (1) Create the image (2) Add the Seadragon control to a page. James Senior has created a great video quick start that demonstrates how you can use the Seadragon control for the Channel9 website:

http://channel9.msdn.com/posts/jsenior/Seadragon-Ajax-Control-Quick-Start-Guide/

In the following section, I provide a brief written tutorial that explains how you use the control.

Creating an Image with Deep Zoom Composer

Before you can display an image with the Seadragon control, you must first process the image with a tool named the Deep Zoom Composer. Luckily, Microsoft makes this tool available for free. You can download it from the following address:

http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

After you install Deep Zoom Composer, you can convert an image into a format that is compatible with the Seadragon control. When you launch Composer, the following dialog appears:

Click the New Project button and call your new project anything that you like.

After you create your project, Deep Zoom Composer displays the following three tabs at the top of the screen:

In order to create a Seadragon compatible image, you need to import the image, compose the image, and export the image.

You import an image by clicking the Import tab (selected by default) and clicking the Add Image button that appears on the right of the screen. You can import images in standard formats such as PNG and JPEG. I used the Penguins.jpg sample picture included with Windows.

Next, you need to compose your image. If you don’t complete this step then you end up with an empty image and nothing works.

Click on the Compose tab and you will see the following screen:

The picture that you imported appears at the bottom of the screen. You need to drag that picture into the main window area.

The final step is to export the image. Click the Export tab, click Custom, and select Images as the Output Type and give your processed set of files a name (I named mine Penguins). Click the Export button to generate the files.

After the files have been generated, you can click the View Image Folder button to see the generated files. You also can click the Preview in Browser button to get a preview of the image when displayed with Seadragon.

When you click the View Image Folder button, you will see the processed files. In particular, you should see a file named dzc_output.xml. Copy the entire folder to your Visual Studio/Visual Web Developer project folder.

The last step – and the easiest step – is to create an ASP.NET page that uses the Seadragon control. The following page contains an instance of the Seadragon control that displays the image of the Penguins.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSeadragon._Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Seadragon Demo</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<cc1:ToolkitScriptManager ID="ScriptManager1" runat="server"/>

<cc1:Seadragon

ID="Seadragon1"

SourceUrl="Penguins/dzc_output.xml"

runat="server">

</cc1:Seadragon>

</div>

</form>

</body>

</html>

There are two things that you should notice about this page. First, notice that the page includes a ToolkitScriptManager control. You must include either a ToolkitScriptManager control or a ScriptManager control when using controls from the AJAX Control Toolkit such as the Seadragon control.

Second, notice that the Seadragon SourceUrl property points to the dzc_output.xml file. This XML file describes the image of the Penguins that the Seadragon control displays.

AsynFileUpload Control

The second new control included in the newest release of the AJAX Control Toolkit is the AsyncFileUpload control. You can use this control to display a fancier interface for uploading files. The AsyncFileUpload control:

Enables you to perform file uploads without doing a postback
Displays a throbber images while an image is being uploaded
Raises both server and client events when a file upload completes or when there is an error.
Works inside and outside of an UpdatePanel

Admit it! The standard file upload widget that you get with HTML is boring. You can’t display a picture while a file is uploading. And, it forces you to do a postback which is bad in this new Ajax world.

Here’s a simple example of how you use the AsyncFileUpload control in an ASP.NET page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestAsnycFileUpload.aspx.cs" Inherits="TestSeadragon.TestAsnycFileUpload" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>AsyncFileUpload Demo</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="sm1" runat="server" />

<asp:UpdatePanel ID="up1" runat="server">

<ContentTemplate>

<h1>Add File</h1>

File: <br />

<cc1:AsyncFileUpload

ID="AsyncFileUpload1"

onuploadedcomplete="AsyncFileUpload1_UploadedComplete"

runat="server" />

<br /><br />

Description:<br />

<asp:TextBox ID="txtDescription" runat="server" />

<br /><br />

<asp:Button ID="btnSubmit" Text="Add File" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Notice that the AsyncFileUpload control is included in an UpdatePanel. You aren’t required to include the control in an UpdatePanel. However, unlike the standard ASP.NET FileUpload, you can place the AsyncFileUpload control in an UpdatePanel.

The AsyncFileUpload control includes an event handler for the server-side UploadComplete event. You can handle this event to save the uploaded file:

using System.IO;

namespace TestSeadragon

{

public partial class TestAsnycFileUpload : System.Web.UI.Page

{

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)

{

System.Threading.Thread.Sleep(5000);

string savePath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);

AsyncFileUpload1.SaveAs(savePath);

}

}

}

In order for this code to work, ASP.NET needs permissions to write to the Uploads folder on the file system. Typically, you need to add write permissions for either the NT Authority\Network Service account or the MACHINE\ASPNET account (in the case of IIS 5).

After you select a file, and the file is successfully uploaded, the background color of the AsyncFileUpload control turns green:

If you want to get fancier then you can display a “throbber” image while the file is being uploaded. I like to use a website named AjaxLoad.info – located at http://AjaxLoad.info -- to create my progress images. This website enables you to generate the standard rotating circle progress indicator as well as fancier progress indicators such as a bouncing ball.

I picked Circle Ball and saved the image to my project with the name ajax-loader.gif.

After you create a throbber image, you can add the image to your page and associate the image with the AsyncFileUpload by taking advantage of the ThrobberID property like this:

File: 

<asp:Label ID="throbber" style="display:none" runat="server">

<img align="absmiddle" alt="loading" src="ajax-loader.gif" />

</asp:Label>

<br />

<cc1:AsyncFileUpload

ID="AsyncFileUpload1"

ThrobberID="throbber"

onuploadedcomplete="AsyncFileUpload1_UploadedComplete"

runat="server" />

Notice that ThrobberID points to a Label control that contains the image (and the Label is hidden with display:none). During a file upload, the image is displayed.

AJAX Control Toolkit Bug Fixes

With each release of the AJAX Control Toolkit, we look at the top voted bugs associated with the AJAX Control Toolkit at the CodePlex website and fix them. In other words, we take your feedback on bugs from the CodePlex website very seriously. If you notice an issue with the AJAX Control Toolkit, please do report the issue:

http://ajaxcontroltoolkit.codeplex.com/WorkItem/List.aspx

With this release of the AJAX Control Toolkit, we performed over 20 bug fixes.

One of the major bug fixes addresses an issue with positioning when using Internet Explorer 8. In the previous release, when you opened a Calendar or ColorPicker control by clicking in a text field, the position of the Calendar or ColorPicker that popped up could be slightly off. All of these popup positioning issues should be fixed in the current release.

We also made several substantial bug fixes to the Calendar, Tabs, and CollapsiblePanel controls. Here is a complete list of bug fixes (including links to the corresponding CodePlex issue for more details):

Bug Number	Description	Control
8843	Support wrapping tab headers to prevent horizontal scrolling if there are too many tabs	Tabs
1514	CollapsiblePanel doesn't completely collapse when the target has padding or other styles	CollapsiblePanel
9171	Disable TabPanel (not hiding)	Tabs
5335	Accessibility: Slider: Add keyboard support for slider	Slider
9601	Change default view of Calendar	Calendar
12957	Calendar control clears time value	Calendar
9365	Calendar Extender Is Cut Off	Calendar
7857	Calendar Extender Inside GridView or DetailsView	Calendar
9332	Calendar: today's date and title localization	Calendar
14845	ScriptObjectBuilder.DescribeComponent performance	Calendar
11238	TABS: Problem using CSSClass	Tabs
12206	Strange CalendarExtender Behavior...code/sample link provided.	Calendar
14639	CollapsiblePanelExtender flashes in UpdatePanel for Framework v3.5	CollapsiblePanel
10161	Accordian Panel, Dynamically created buttons, CommandEventHandler hookup on Command doesn't work	Accordion
11129	TabIndex and TabPanel Visible Property	Tabs
11446	Tab Control Not Data Binding inside of FormView	Tabs
16321	TabPanel Visible=false causes other tab panels to show mixed content when setting ActiveTabIndex	Tabs
9099	Calendar on scrollable page, position not set by textbox position	Calendar
12147	positioning problem when in a relative div	Calendar
9242	Calendar Days Not Shown	Calendar
10703	TabContainer inside UpdatePanel	Tabs
15658	TabContainer: Specified argument was out of the range of values #2	Tabs

A big thanks to Obout consulting – http://obout.com – for making these bug fixes.

Summary

With each release of the AJAX Control Toolkit, we add new controls and improve the quality of the existing controls. Stay tuned! We have major plans for the AJAX Control Toolkit in the coming months.

Microsoft Ajax CDN and the jQuery Validation Library

Stephen Walther — Wed, 16 Sep 2009 20:10:15 GMT

Scott Guthrie announced the launch of the Microsoft Ajax CDN on his blog last night. If you have not read his post, I recommend that you read it now to get a general overview of the CDN and how you can take advantage of the CDN to improve the performance of your ASP.NET Web Forms and ASP.NET MVC applications:

http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx

In his announcement, Scott describes how both the ASP.NET Ajax and the jQuery libraries are included in the CDN. There is one more set of JavaScript files that we added to the CDN today that Scott did not announce: the jQuery Validation library.

If you are not familiar with the jQuery Validation library then you should know that this is one of the most popular form validation libraries used by jQuery developers. We are shipping the jQuery validation library with both ASP.NET Web Forms and ASP.NET MVC when we ship Visual Studio 2010.

Furthermore, we are integrating the jQuery Validation library with ASP.NET MVC. When you add an error to ModelState – for example, by using ModelState.AddModelError() – the error will float up to the client automatically. The jQuery Validation library is the JavaScript library used by ASP.NET MVC to implement client-side validation.

I had the pleasure of meeting Jörn Zaefferer at the jQuery conference in Cambridge last weekend (You pronounce Jörn’s name like Yearn). He has written a really great validation library and now you can use his validation library directly from the Microsoft Ajax CDN.

Here are the URLs for the jQuery Validation library:

The first URL contains the unminified (human readable) version of the jQuery validation library. The second URL contains a minified version of the library that you should use in production applications. Finally, the third URL points to a JavaScript file that contains Intellisense comments for the jQuery validation library that is used by Visual Studio 2010 automatically.

Here’s a simple Web Forms page that uses the jQuery Validation library to validate a Registration form (see Figure 1):

Listing 1 – Registration Form

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestjQueryValidation.aspx.cs" Inherits="WebApplication2.TestjQueryValidation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Registration Form</title>

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" 
        type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js" 
        type="text/javascript"></script>
    
    <style type="text/css">
    
    input.error
    {
        background-color: #FFFF99;
    }
    
    </style>
    
    <script type="text/javascript">
      $(documentReady);
      
      function documentReady() 
      {
        $("#form1").validate();
      };
      
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <h1>Register</h1>
    
    <asp:Label 
        ID="lblName" 
        AssociatedControlID="txtName" 
        Text="Name:"
        runat="server" />
    <asp:TextBox 
        ID="txtName" 
        CssClass="required" 
        runat="server" />

    <br /><br />
    
    <asp:Label 
        ID="lblEmail" 
        AssociatedControlID="txtEmail" 
        Text="Email:"
        runat="server" />
    <asp:TextBox 
        ID="txtEmail" 
        CssClass="required email"
        runat="server" />
    
    <br /><br />
    
    <asp:Button 
        ID="btnSubmit" 
        Text="Register" 
        runat="server" />
    
    </div>
    </form>
</body>
</html>

Figure 1 – Create Movie form

The Registration form in Listing 1 contains two TextBox controls for a user name and email address. The jQuery Validation library is used to make both fields required and validate that a proper email address has been entered. There are two things that you need to do to get the jQuery Validation library to work:

Call the validate() method on your form. Calling the validate() method sets up the client validation.
Add the right classes to the fields that you want to validate. In the case of Listing 1, I added a required class to both the txtName and txtEmail TextBox controls and an email class to the txtEmail TextBox control.

The jQuery Validation library supports a number of specialized validation classes including classes like url and creditcard: If you want to read the full documentation for the jQuery Validation library then you can visit the following website:

http://docs.jquery.com/Plugins/Validation