In this sixth and final entry on a series of post focused on using jQuery with no prior knowledge, I dive into applying jQuery into the traditional ASP.Net web form environment. The example code covered in this entry focuses on applying the jQuery Validation plug-in against 2 sets of input in the same form. To make the example more realistic, the form fields are contained inside of content page to ensure the code works with ASP.Net's client id renaming feature/annoyance.
If you would like to review the previous posts in this series, please feel free to review the links below:
- Starting with jQuery
- Starting with jQuery - Effects
- Starting with jQuery - Intro to Validation Plug-in
- Starting with jQuery - Dynamically Applying Rules
- Starting with jQuery - How to Write Custom Rules
Code Downloads for this Post:
An Overview of the Example:
The example project provides the following files:
- Default.master
- The master page used in the example
- Contains the jQuery-1.2.6.js reference
- CustomerExample.aspx
- The content page referenced in the example
- Contains the jQuery.validate.js reference
- Contains the example's JavaScript reference
- jQueryExample.js
- Holds the custom JavaScript code to manage the validations
Figure 1: The example's Solution Explorer
When the CustomerExample.aspx file is viewed in a browser, we see that the form is divided into two field sets (see Figure 2 below). The left field set is to simulate a customer information form which requires the First Name and Last Name fields filled. Should the user opt to enter a phone number, the field will validate against the format specified. The right field set is simple a text box for a user to insert their email address to subscribe to a fictitious newsletter. In this case, the email address field is required and validated as an email address using the Validation plug-in's email validation.
Figure 2: The example form(s)
Looking at the Code Behind:
While searching on the web, I found a number of different ways of linking an ASP.Net control's client id to jQuery, the simplest and cleanest that I came across was suggested which is found in the page's Page_Load() method. In this block, I am calling the ClientScript.RegisterHiddenField() method to create a hidden form field with the name of the server controls and containing the value of the server control's client id, prefixed with a pound (#) symbol. While I chose this method for the example, I highly encourage everyone to do additional research into alternative methods (which are out there) to accomplish this task if you do not like the idea of adding this amount of additional code.
Diving into the JavaScript:
Opening up the CustomerExample.js file, we see some variable declarations first thing, followed by the code that will be executed when the document is in a ready state and the form button's client side code. Inside the code the executes once the document is ready, our custom phone number validation rule is added to the form validator. Afterwards, we wire the page's form to the validation mechanism. NOTE: ASP.Net Web form applications only allow 1 server-based form on the page. Lastly, the variables declared at the top of the file are provided the string values of the hidden form fields created in the code behind, and the First Name field is given focus. At the bottom of the file, two functions are provided that dynamically add and remove the validation rules from the appropriate fields using the variables that hold the hidden field values to pass in the appropriate control ids.
Conclusion:
When I started using jQuery a few months ago, I was very impressed with how easy it was to implement and learn as well as how small it was. Since then I have been busy using a number of different UI plug ins for it as well as integrating it into ASP.Net and Classic ASP applications for my company. As I explore jQuery more, I will be posting more about it as well. I hope that this series has provided you with the basic understanding on how to get started with jQuery as well as locating and using some of the many plug-ins available. In addition, I hope that this last post has provided information for you to begin integrating it into your ASP.Net applications.
No comments:
Post a Comment