Kaplan IT Training Blog

ASP.NET development and open standards: jQuerylicious!

Since the introduction of Ajax in ASP.NET, the Redmond shop has become more welcoming of open-source Web standards. The addition of jQuery in ASP.NET 4 continues that tradition. jQuery is more than just quick syntax for DOM manipulation; it is the basis for a wealth of robust plugins that save valuable development time and energy. And it’s almost as much fun to say as “vuvuzela.”

Let’s start with a basic HTML form:

<form id="jQueryForm">
<select id="lstContacts" >
<option value="jhester">Joshua</option>
<option value="tmcmillan">Troy</option>
<option value="rabernathy">Robin</option>
<option value="gmonsalvatge">George</option>
<option value="alang">Ann</option>
<option value="arotella">Aima</option>
</select>
<input id="txtUsername" type="text" />
<input id="jButton" value="test" type="button" />
</form>

Let’s say that we want to access the selected option and retrieve the associated username. In vanilla JavasScript, we’d probably use code similar to the following:

var username = document.getElementById("lstContacts").value;

Of course, this script alone is testament to how far browser equality has come. Using the Ajax library, we could abbreviate our script even further:

var username = $get("lstContacts").value;

But what about if the list allowed multiple selections? In that case, we would need to iterate through the elements and format the selections. jQuery supports a CSS-style selector, so we can overcome this issue fairly easy, as shown in this example:

var usernames = "";
$("select option:selected").each(function () {
usernames += $(this).val() + " ";
});

But, as I said before, jQuery for DOM manipulation is only the tip of the iceberg. Using the Microsoft Ajax CDN, you have a multitude of awesome plugins available, including the jQuery validate plugin. So, let’s take an existing AJAX Web Form (with the requisite jQuery script references):

<form runat="server" ID="numberForm">
<asp:Label runat="server" AssociatedControlID="txtNumber">Type a number from 1 to 10.</asp:Label>
<asp:TextBox runat="server" ID="txtNumber" />
<asp:Button runat="server" Text="Guess" />
</form>

Sure, you could use the ASP.NET validators to solve this scenario; nothing wrong with that at all. But the jQuery validate plugin through the Validation library provides a simple, and robust validation mechanism.  The validate plugin uses rules to specify requirements and messages for customized error messages. In this scenario, you would use the following jQuery script:

$("#numberForm").validate ({
rules: {
txtNumber: {
required: true,
min: 1,
max: 10
}
},
messages: {
txtNumber: {
required: "Please do not leave blank.",
min: "Must be greater than or equal to 1.",
max: "Must be less than or equal to 10."
}
}
});

Look, no hands! Completely customizable and no server-side postback required!

Once upon a time, choosing ASP as your Web technology locked you into using proprietary VB scripting. Now, with the advent of ASP.NET 4, open standards are finally supported and fully embraced by team Microsoft. ASP coding has evolved from integrating these standards to simply learning how to use them.

–Josh Hester aka codeguru