In my three previous blogs, I’ve shown how to use Templates in your ASPX website.

Now, I will show one real-world example which you may use it in your daily work of developing applications with ASP.NET MVC and jQuery.

In the following example I will use Pubs database so that I will retrieve values from the authors table. To access the data, I’m using Entity Framework.

Let’s pass throughout each step of the scenario:

1. Create new ASP.NET MVC Web application

2. Add new View inside Home folder but do not select a master page, and add Controller for your View

3. BODY code in the HTML

As you can see in the body we have only one H1 tag and a div with id authorsList where we will append the data from database.

4. Now, I’ve created Pubs model which is connected to the Pub database and I’ve selected only the authors table in my EDMX model. You can use your own database.

5. Next, lets create one method of JsonResult type which will get the data from database and serialize it into JSON string.

So, I’m creating object instance of pubsEntities and get all authors in authors list. Then returning the authors list by serializing it to JSON using Json method. The JsonRequestBehaviour.AllowGet parameter is used to make the GET requests from the client become allowed. By default in ASP.NET MVC 2 the GET is not allowed because of security issue with JSON hijacking.

6. Next, lets create jQuery AJAX function which will call the GetAuthors method. We will use $.getJSON jQuery method.

Once the web page is downloaded, the method will be called. The first parameter of $.getJSON() is url string in our case the method name. The second parameter (which in the example is empty string) is the key value pairs that will be send to the server, and the third function is the callback function or the result which is going to be returned from the server.

Inside the callback function we have code that renders data with template which has id #authorsTemplate and appends it to element which has #authorsList ID.

7. The jQuery Template

As you can see, I have tags containing fields (au_lname, au_fname… etc.) that corresponds to the table in the EDMX model which is the same as in the database.

One more thing to note here is that I have printMessage(state) function which is called inside ${ expression/function/field } tag.

The printMessage function

So, if state is “CA” print “The author is from California” else “The author is not from California”

HERE IS THE COMPLETE ASPX CODE

So, in the complete example you also have the CSS style I’m using to stylize the output of my page.

Here is print screen of the end result displayed on the web page:

You can download the complete source code including examples shown in my previous blog posts about jQuery templates and PPT presentation from my last session I had in the local .NET UG meeting in the following DOWNLOAD LINK.

Do let me know your feedback.

Regards,
Hajan

出处：http://weblogs.asp.net/hajan/archive/2010/12/15/jquery-templates-with-asp-net-mvc.aspx