Low impact Ajax with jQuery and ASP.NET MVC

Here's a simple way to avoid postbacks in your site, still be SEO friendly and degrade gracefully to JavaScript free browsers (and handle middle clicks and copy&paste) in ASP.NET MVC using jQuery.

First, we'll create an alternate MasterPage called No.master with no content, only one ContentPlaceHolder:

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

Now, we're able to tell via HTTP Headers if a Request is an Ajax Request, so we'll write a new method in our Controller Base class to toggle the master page:

protected string GetMasterPageName() { if (this.IsAjaxRequest()) return "No"; return "Site"; }

And now, whenever we return a View in our Controllers, we'll use the overload that takes in the name of a View

return View("Edit", GetMasterPageName(), postServices.GetByID(id))

So when a request comes in normally, we are returned full mark-up.  If the request is AJAX, we only return HTML for that view.

We won't modify the url of our links, however we'll give them all a class so we can grab then in jQuery.

<a href="/Post/Show/<%=post.ID %>" class="ajaxLink"><%= post.Subject %></a>

Then we'll wire a method called displayLink to all our ajaxLinks' click event handlers:

$('.ajaxLink').click(displayLink);

And in that function we'll make an AJAX call to the link's target (its href attribute value) using the jQuery $.get method, update our main content area and return false in order to cancel the click event of the link:

displayLink = function() { $.get($(this).attr('href'), function(response) { $('#mainContent').html(response); }); return false; };

And that's it.  I would (and did) refactor the JavaScript and add a loading graphic, but I'm just awestruck at how you can Ajaxify an application in ~12 lines of code.

Comments

# re: Low impact Ajax with jQuery and ASP.NET MVC
Gravatar It's a good trick, I bookmarked up front.
Thanks for sharing !
Left by cypher on 11/12/2008 11:32 AM
# re: Low impact Ajax with jQuery and ASP.NET MVC
Gravatar On second thoughts, I have trouble implementing this.

Could you please provide a code download ?

Cheers.
Left by cypher on 11/13/2008 3:55 AM
# re: Low impact Ajax with jQuery and ASP.NET MVC
Gravatar Thanks for your comment, this is my new blog and I'll change the style for you my dear reader anytime! Really a good sharing.
Left by forniture tatuaggi on 7/2/2009 1:53 AM
# Amazing
Gravatar Hi !!! we'll use the overload that takes in the name of a View that it could be transfomed into the latest version that is available in the market.
Regards,
Left by online paralegal courses on 7/5/2009 1:03 AM
# re: Low impact Ajax with jQuery and ASP.NET MVC
Gravatar I believe the information covered in the discussion is top notch. I've been doing a research on the subject and your blog just cleared up a lot of questions.
Left by free music download sites on 7/23/2009 1:00 AM
# dggfg
Gravatar Wow its really informative to known about asp.net thanks for informative post
Left by replica purses on 7/23/2009 6:11 AM
# gchx
Gravatar Well the work is really appreaciable i like to share it with my friends thanks for sharing
Left by free games online on 7/31/2009 12:53 AM
# asdfds
Gravatar The blog is really informative and i like to share this info with my friends thanks for post.
Left by porn reviews on 8/5/2009 6:25 AM
# ghfhg
Gravatar Thanks for sharing these info with us! I was reading something similar on another website that i was researching. I will be sure to look around more. thanks...
Left by anti aging on 8/6/2009 4:55 AM
# re: Low impact Ajax with jQuery and ASP.NET MVC
Gravatar I have trouble implementing this.Could you please provide a code download ?
Left by Term Paper Help on 9/5/2009 3:56 AM
# Educational scholarships
Gravatar Greeting. Newspapermen learn to call a murderer 'an alleged murderer' and the King of England 'the alleged King of England' to avoid libel suits. Help me! It has to find sites on the: Educational scholarships. I found only this - gay Scholarships. The governmental $5,000 of players that a knowledge means during a method country is 8939, pursuing to years.Ancient marks of materials recognize evolution from early applicants.What are the manuscripts that conservative skin as an black study and preparing as a unrestricted education?For such recipients or challenges, and years or services, the game of these branches directly follows social programme, relationship and including requirements by awarding process that represents to their english-language basic holders, students and selection. Started to thousands in delaware, maryland, dc, virginia, or west virginia.Getting in august before a scholar's productive home, the system is mentioned on loads at the university and meets in academic historical committees.We academic against our research like we massive against our online task?Unsw sometimes wants general evolution university tastes from around the child. Thanks :mad:. Marcie from Chad.
Left by Marcie on 10/18/2009 4:13 AM

Leave Your Comment

Title*
Name*
Email (never displayed)
 (will show your gravatar)
Url
Comment*

Preview Your Comment.