any clear guidelines and best practices on using JQuery and ASP.NET MVC together?

Question

Are there any clear guidelines and best practices on using JQuery and ASP.NET MVC together? articles, blog posts, books? not just MVC, but on the connection between them and known good ways and patterns of making them work together.

Answer 1

Since jQuery has become so popular, you might look into linking to a much larger site that already uses your JavaScript library of choice (like Google). I defer the drawn out explanation to Dave Ward's blog post.

To sum it up, it is recommended to use a service like Google's Ajax Libraries to serve up scripts. If you don't want to use Google's library to load up scripts, you can always use a permalink to the script, rather than having a relative path to the script on your server. Like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript" />

He makes some good points about how this lends itself to better performance with caching, latency, and parallelism improvements.

Answer 2

Well they work really well together as you can make requests to a REST path, in MVC a controller with an action, and return a content/JSON result to consume using jQuery. In other words jQuery just natually works better with MVC.

As such I think that you could just look at best practises for jQuery itself and AJAX. Since MVC is simply tuned to work better with normal web practises.

Answer 3

If you want to drive ajax on your site, I think that asp.net mvc and jquery are very good catch. MVC can be used as a business and a restful service layer at the same time-that means that it can render pages and also it can just return data(in most cases in json format). In this second case, comes jquery-it can fetch that json data from a server and do transitions and manipulations on existing rendered html very easily-there you get ajax features.

For example, you have page with articles in list, every article has picture of a article, some title and some text. On delete button click your jquery code: 1. puts loading status icon, 2. calls asp.net mvc service deleting method, article is deleted in db and method returns message that deletion was successfully, 3. your jquery code parse that answer and make collapse effect on you article, than 4. put focus on the next article on list.

Also, because you do not server controls and stuff from asp.net on view, just plain old html, you can make your asp.net mvc method to return to you html with populated data. The best thing is that once you wrote that method, you can call it from anywhere you want, you can call dialog and then fetch this populated html with jquery ajax call, and returned html put in dialog, you can insert it in some page on some action and so on.

Cheers