Back to blog

jQuery ajax with asp.net mvc preview 5

September 16, 2008 - Posted in Ajax , asp.net mvc , c# , javascript Posted by:

Quite some had changed between mvc p4 and mvc p5, so it took some time too update my jquery4mvc project to preview 5. Be sure to check out scott’s post to read all the new stuff. He’ll be posting on the ajaxhelpers some time soon also.  If you wish to skip the reading and directly download the stuff: it’s at codeplex.

The javascript-only package includes 3 javascript files that allow you to use the default Microsoft AjaxHelper. You can just copy those files to your Content folder and include them in your head section, instead of the MicrosoftAjax.js and MicrosoftMvcAjax.js. All ajax extensions work the same as their Microsoft equivalence,  using jQuery instead of MicrosoftAjax. As a little bonus, you’ll get back and forward button support for your ajax-links.

image

That’s it, go ahead and use the AjaxHelper functions like you’re used to. Though a few things have changed for the AjaxHelpers in preview 5, you could still use the introduction ASP.NET MVC Preview 4 – Using Ajax and Ajax.Form by Scott Hanselman if you haven’t already checked out the AjaxHelper. Main thing that has changed is that you cannot use inline javascript in the AjaxOptions in preview 5, you should now specify a method name. You could also download the entire jQueryMvc project, it holds a sample website showing some of the ajax magic.

Talking about the entire project, it’s more than just the .js files! The intention of the project is to get you up and running very quickly when you want to create an mvc based ajax application. We use Unity as our default IoC container.

I think it’s quite hard to explain exactly what the project does for you, it’s best really to just look at the sample website, but I will give a brief overview. First, we have a DefaultViewViewEngine. If you mark your controller with a [DefaultView] attribute like so:

image

If you call in example /Home/Index, by default the Index view will be searched for. If it isn’t found, the DefaultViewViewEngine will look for a template with the name specified ("default" in the above example). It doesn’t matter what viewengine you use for your views, it will work for all of them. So what can this do? Look at the structure of the views in the sample site:

image

As you can see, most of the the views only have an ascx file prefixed with an underscore. Since the views are not found when the actions Home/About, Home/SayHello, Home/Index are called upon, the DefaultViewViewEngine will open Shared/Default.aspx.
This default page does not do muchimage

As you can see, it just uses the masterpage. But with only little imagination, you can see that you can easily create different default-pages for each controller. The masterpage however, does hold some extra magic:

image

This special contentplaceholder, by default works like a normal placeholder. But, if it doesn’t get new content from it’s page, it will ask the ViewEngine(s) to open the view of the current action prefixed with an underscore. So, if you call Home/About, this will ask for Home/_About. 
Can you see the magic? For all similar pages, you just have to create the ascx files (or other partials if you use a different viewengine). Those partial views will be pushed into the main page.

But wait, there’s more! If you make an ajax-request to a controller that has the [AjaxController] attribute, it will return only the partial view! Now, isn’t that great ? That looks a lot like the updatepanel to me :)

Go to codeplex and download the project to see the ajax-magic I’m so excited about!
Source can be downloaded at Google code: http://code.google.com/p/jquerymvc/source/checkout
The sample website can be seen in action at: http://www.chrisvandesteeg.nl/demo/jquerymvc5/

No Comments

Michiel 44 years ago

Hi Chris, Thank you very much, it works great!

Bart Plasmeijer 44 years ago

Keep Up The Good Work! – You’re Making A Difference

Bart

Denny Ferrassoli 44 years ago

Thanks for your hard work, keep it up! Thanks!

asp.net 44 years ago

great article, thx.

celik 44 years ago

Did not really understand how it works cause i am new to jquery but sounds like a great thing to use in my MVC application. Will try it soon.

Cesar 44 years ago

Very nice work, but I have a question. When you clic in Home Default Ajax Menu the link is http://www.chrisvandesteeg.nl/demo/jquerymvc5/#/demo/jquerymvc5/
It not should be only http://www.chrisvandesteeg.nl/demo/jquerymvc5/ ? How can I repair this?

Nate 44 years ago

First. Great stuff! Thanks.

I did run into a conflict between the jQuery asonetmvc code and Google Analytics ga.js code. I was able to narrow it down to line 316.

Function = {};

I changed it to

Function.createDelegate = {};

and the error went away. Everything still seems to work, include the analytics.

webdevvote.com 44 years ago

You are voted!
Track back from WebDevVote.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>