jon wear's personal website

jQuery tmpl plugin example for ASP.Net

2 July 2011

Originally I was going to call this post, "Look Ma! No view state!" but view state isn't really what I to talk about it. This example will have no view state, but that's a side benefit. What I want to talk about is client side data binding with jQuery. The jQuery tmpl plugin has been documented in a number of places and I'm not going to show anything new here. This post is intended to be a simple example for people still using data grids and heavy .Net server controls. This example won't use any server controls. We won't have a form tag and there will be no code behind. Let's get to it. Step 1: Create a web service Here's our simple web service. I called it "wsPlayers". It has one method and returns a list of custom objects based on a simple NBAPlayer class. Be sure to uncomment the line... [System.Web.Script.Services.ScriptService] that the web methods in the service can be called from client side JavaScript. We will also want to add a reference to the Script.Services namespace at the top of the file... using System.Web.Script.Services; that we can change the format of our web method to JSON (it's XML by default). So here is the full text of our web service method: Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Services; //Have to add this namespace for the ResponseFormat on the webmethod). namespace tmplDemo { /// /// Summary description for wsPlayers /// [WebService(Namespace = "http://tmplDemo/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class wsContacts : System.Web.Services.WebService { [WebMethod] //***The ResponseFormat has to be added to the method, not the WebService Class (above). [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public List GetPlayers(int paramMinChampionships) { List tempPlayers=new List(); NBAPlayer temp1 = new NBAPlayer("Nowitzki","Dirk",1); NBAPlayer temp2 = new NBAPlayer("James", "LeBron", 0); NBAPlayer temp3 = new NBAPlayer("Wade", "Dywane", 1); NBAPlayer temp4 = new NBAPlayer("Bryant", "Kobe", 5); NBAPlayer temp5 = new NBAPlayer("Paul", "Chris", 0); tempPlayers.Add(temp1); tempPlayers.Add(temp2); tempPlayers.Add(temp3); tempPlayers.Add(temp4); tempPlayers.Add(temp5); return (from p in tempPlayers where p.championships>=paramMinChampionships orderby p.lastname,p.firstname select p).ToList(); } } public class NBAPlayer{ public NBAPlayer(string lname,string fname,int chmps){ lastname=lname; firstname=fname; championships=chmps; } public NBAPlayer() { } public string lastname { get; set; } public string firstname { get; set; } public int championships { get; set; } } } As you can see from the code, the web service has a method called GetPlayers and it accepts one parameter of type int called paramMinChampionships. It then returns a list of type NBAPlayer where each NBAPlayer object has a championship property equal to or greater than the paramMinChampionships. Now, I've made a custom class and hard coded a few elements for the example but this is where you'd put your database calls or Linq objects and build your return set that way. We're done with the web service. Step 2: Download jQuery files. Create a directory in your project called jQuery. Download these two jQuery files: jquery-1.6.1.min.js jquery-tmpl-min.js (there are several files in the zip link. You only need this one for our project). Add these files to the jQuery directory you made at the beginning of this step. Step 3: Create a default.aspx page. Add a new file called default.aspx. Once you've done that, your solution explorer should look something like the image at left. Now the fun part. First we're going to create some javascript that will do our Ajax call for us: If that doesn't make sense, then stop right here and read about the jQuery Ajax method. What we're doing is calling our web service and passing it a numeric value so that it will give us back our list of players. Before we do that lets add the rest of the HTML to our default.aspx page. We want a select element that looks like this: Players with at least championships. We'll want a button to fire off our ajax web service call: We'll also want a table to display our data:
First Name Last Name Championships Bing
Lastly, and most importantly, we add the data template: That's right, we're putting HTML markup directly inside our