Unless you've been living under a rock you know that Microsoft has recently partnered with jQuery and will be shipping jQuery with future versions of Visual Studio. When the announcement was made I didn't know much about jQuery, how it would work with ASP .NET AJAX, or how it would interface with Visual Studio. I decided to do some research to fill in those gaps and then apply what I learnt by creating a very basic cascading CheckBoxList.
After I learnt jQuery (I read jQuery in Action -- and highly recommend it) and set up VS2008; building the app was very natural and required very few lines of code. Sufficed to say I’ve become a fan of jQuery and will be using it going forward for all my JavaScripting.
Environment Setup
Ok, first things first. The environment needs to be setup to use jQuery and the jQuery IntelliSense.
- Install the VS2008 patch to enable the jQuery IntelliSense here
- Download jQuery here and the jQuery IntelliSense here
- Create a scripts folder under the project and add both the jQuery and jQuery IntelliSense files to it
Creating the App
The app consists of two files: a web form that contains the HTML and jQuery code, and an Ajax-enabled WCF web service that returns JSON (JavaScript Object Notation) that will be rendered client side.
Figure 1 - Cascading CheckBoxList (Don't judge a book by its cover..I know it looks horrible!)
The Wiring
To start, create a new web form and place a ScriptManager on the page. Adding the ScriptManager will register the ASP .NET AJAX library for the page and allow the app to make web service calls. The app also needs to use jQuery so add a new ScriptReference to the ScriptManager and set the path to the jQuery file.
Figure 2 - Hooking up jQuery
The Markup
We’ll need two divs, with unique ids (I used chklstSelectLeauge and chklstSelectTeam), to hold the checkboxes. The first div will have two static checkboxes that can be added at design time. The second div’s checkboxes will be added by passing the div to a jQuery function that will load it with the JSON returned from the web service.
Figure 3 - Required HTML
That’s the entire HTML so it’s time for the fun stuff.
The jQuery
The benefit of using jQuery is that we’re able to embrace “Unobtrusive JavaScript” which means the behavior is separated from the structure. In order to achieve this paradigm the JavaScript needs to run after all the DOM elements on the page are loaded. Because we are using ASP .NET AJAX we’ll need to use its pageLoad() event instead of jQuery’s ready() event.
Building the cascading CheckBoxList breaks down into three smaller problems:
- Finding the checked league checkboxes
- Calling the web service
- Creating the team checkboxes
Let’s tackle these problems one at a time.
In order to find the checked league checkboxes we need to find all checkboxes under the div, iterate through them to find which ones are checked, and maintain a list of checked values. Well, that’s the traditional JavaScript way of solving the problem. The beauty of jQuery is that we can use a selector to do most of the work for us. Here is the code:
Figure 4 - Selecting checked checkboxes
The above jQuery selector finds all checked checkboxes that are contained in the specified div. It then applies a function that will run for each item in the set of checkboxes. This function appends, using Sys.StringBuilder which doesn’t suffer from the inefficiencies of string concatenation, the checkbox’s value to our list of values.
Now the app knows which leagues have been selected but when should we call this function? It makes sense to call it whenever we check or uncheck a league checkbox. jQuery makes that a breeze:
Figure 5 - Adding a click event
The click event needs to be set as soon as the page finishes loading so the code above goes in the pageLoad() function.
The next mini-problem is to call the web service. We’ll see the web service later but for now trust me that the following code is all you need to hit a WCF web service:
Figure 6 - Calling the web service
The code looks at the TeamServices namespace, then looks for a class called TeamService, and then calls the GetTeams method which accepts a list of leagues. The final parameter in the function call tells jQuery that after we make the call to GetTeams, and it is successful, to call the getTeamsComplete function. This is also known as the callback function. The getTeamsComplete function is used to fill the team div with the JSON. It expects the JSON returned from the web service and will then load the data into the div.
Figure 7 - The callback function
The final mini-problem revolves around the loadCheckboxList function that gets called in getTeamsComplete. I’ll show you the code first and explain it after.
Figure 8 - Working with JSON
Looks a lot like the getSelectedLeagues code right? The code first clears the div of any HTML using another function (you can check it out in the attached code at the end) and then starts building up a string, by appending the html needed for a checkbox, for each item in the object. After we have the string we stuff it into the div and we’re good to go. But what is inputData.First and inputData.Second? The answer lies within the web service.
The Web Service
I’m not going to show the entire web service but take my word that it contains a static list (_teams) that contains Triplet objects i.e. (leagueId, teamId, teamName) . The interesting code is the GetTeams method that we are calling from the populateTeams function in our web form. Here it is:
Figure 9 - GetTeams(...)
The method takes a comma separated list of leagues and performs a split resulting in a List of Strings (List<String>). Then for each item (or leagueId) we use LINQ to query _teams for a match and then return a List of Pairs i.e. (teamId, teamName). The web service takes the Pair object and serializes it to JSON so it looks something like {“First”:”foo”, “Second”:”bar”} and this explains why we used those properties in the loadCheckboxList function
We’re almost done. The final step is to go back to the web form and add a ServiceReference to the ScriptManager so it knows what web service to call.
Figure 10 - Hooking up the web service
That’s it! Hopefully this post has helped explain what is required to use jQuery and ASP .NET AJAX in a web app, and has given you some new ideas on how to illuminate the mind and dazzle the eye (bonus if you know where that line is from!).
Source code here
Microsoft has released a beta version of their new global careers website here. The beta only shows jobs for Canada, Germany, and GCR but it is a much needed improvement over the current site.
I had a hand in the new site so please check it out and let us know what you think by either using the feedback tool on the site or just post a comment here and I'll pass it to the team.
The RegularExpressionValidator is one of the most useful validators that come standard with ASP .NET. The RegularExpressionValidator allows you to validate, on both client-side and server-side, whether the value of an associated input control matches the pattern specified in the ValidationExpression property. It isn't uncommon to see a web application littered with almost identical validation markup spread across multiple pages and controls.
Figure 1 – Using the built-in validator
The problem with this approach is code repetition. If an application contained 100 textboxes that only accepted alphanumeric data the code would contain the same ValidationExpression property hard-coded in multiple places. A better solution would be to abstract the ValidationExpression so that if there was a need to alter the regular expression it could be changed once from a central location.
This abstraction (factoring out the details) can be achieved by creating a new class that inherits from the RegularExpressionValidator class. By adding a few new properties such as MinLength, MaxLength, and a ValidatonType the code becomes easily reusable for all RegularExpressionValidators.
Figure 2 – Abstracting the regular expression
The GetValidationExpression helper method would get the regular expression (i.e. from the Web.config) by checking the supplied ValidationType (I used an Enum for this).
Usage is as follows:
Figure 3 - Usage
Hopefully this helps illustrate some ideas on keeping code cleaner, leaner and a little more maintainable.