model jQuery with ASP.NET MVC (Weblogs @ ASP.NET)

In my three previous blogs, I showed how to use templates in your ASPX Web site.

Introduction to jQuery templates - tmpl() template(), tmplItem (jQuery) model - TemplatesjQuery {supported the tags}

Now, I am going to show a concrete example that you can use in your everyday work developing applications with ASP.NET MVC and jQuery.

In this example I'll use pubs database so I retrieves the values from the authors table. To access the data, I use the Entity Framework.

Say pass along every step of the scenario:

1. Create the new ASP.NET MVC Web application

2. Add the new view to the home folder but step select a master page and add the controller for your view

3 BODY code in the HTML code

Authors of pubs

As you can see in the body we do as a single tag H1 and a div with id authorsList where we will add the database.

4 Now I created the pubs model which is linked to the publication database, and I chose only the authors table in my EDMX model. You can use your own database.

5. Then, to create a JsonResult method will get the database data and serialize JSON string.

public JsonResult GetAuthors()
{
pubsEntities pubs = new pubsEntities();
authors of var = pubs.authors.ToList ();
return Json (authors, JsonRequestBehavior.AllowGet).
}

Therefore, I am creating an instance of the object of pubsEntities and get all the authors in the authors list. And then returning the list of the authors by JSON serialization in Json method. JsonRequestBehaviour.AllowGet parameter is used to GET the client queries are allowed. By default in ASP.NET MVC 2 get is not allowed by the security with JSON hijacking problem.

6. Then, to create AJAX jQuery function that calls the GetAuthors method. We will use jQuery method $.getJSON.

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

Inside the callback function, we have code that makes the data model that has id # authorsTemplate and adds it to the element that has # authorsList.

7. The model of jQuery

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

One thing more than noted here is that I printMessage function (state) which is called inside the tag of ${expression/function/field}.

Function printMessage

Therefore, if the State is "CA" impression "is the author of California" else "the author is not California"

HERE IS THE COMPLETE ASPX CODE

    

    

Authors of pubs

Thus, in the complete sample, you also have the CSS style I use for my page output.

Here's the final result displayed on the web page screen printing:

You can download the full source, including examples presented in my previous blog posts on jQuery templates and presentation PPT my last session, I got to the local .NET UG meeting at the following DOWNLOAD LINK.

Let me know your comments.

With respect,
Hajan