Super Simple MVC Ajax With JQuery Demo

asp.net mvc, asp.net 0 comments suggest edit

UPDATE: I linked to the wrong post. I corrected the link.

During the recent Insiders summit, Wally cornered me into recording a really short video demonstrating a feature of ASP.NET MVC. I decided to sprinkle a little Ajax in my demo by showing how to use jQuery to call an action that returns a JsonResult.

Specifically, I show how to update a couple of regions in the page (two dom elements) with data pulled from the server. I then add a little sparkle to the demo by implementing the ubiquitous yellow fade when adding the content to the DOM. As you’re watching it, you’ll notice that I’m making it up on the fly based on another demo I did earlier that day.

He’s posted the video here in show #106 121. That’s heckuva a lot of shows Wally!

Technorati Tags: aspnetmvc,ajax,jquery

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

13 responses

  1. Avatar for Chris Hardy
    Chris Hardy July 28th, 2008

    Hmmm... The link seems to only show the mp3 for the show and no video. I don't think listening to an MVC Demo would be quite the same.

  2. Avatar for Scott
    Scott July 28th, 2008

    Have you seen these JQuery plugins for use with ASP.NET MVC?
    blog.goeran.no/...ac10-48db-98a4-d28343e0f98a.aspx

  3. Avatar for Torkel
    Torkel July 28th, 2008

    Good timing, I was just about to do some jquery ajax with aspnet mvc :)

  4. Avatar for Ryan Lanciaux
    Ryan Lanciaux July 28th, 2008

    Sounds awesome, however, I seem to be encountering the same results as Chris. Maybe you could post the code online? :)

  5. Avatar for Ryan Lanciaux
    Ryan Lanciaux July 28th, 2008

    The link to the video is available here. . . aspnetpodcast.com/.../...p-net-mvc-demo-video.aspx

  6. Avatar for Simone Chiaretta
    Simone Chiaretta July 28th, 2008

    Damn... not on iTunes yet

  7. Avatar for haacked
    haacked July 29th, 2008

    Hi All, I fixed the link. Sorry about that!

  8. Avatar for Elijah Manor
    Elijah Manor August 7th, 2008

    I was getting a JavaScript error in Firefox involving the removeAttribute method in the Flash. I updated the code to the following and it appears to work in both Firefox and IE now.
    function flash(selector) {
    $(selector)
    .css('opacity', 0)
    .animate({ backgroundColor: 'khaki', opacity: 1.0 }, 800)
    .animate({ backgroundColor: '#ffffff' }, 350, function() {
    $(this).removeAttr('filter');
    });
    }
    ** New! Track my life at http://twitter.com/elijahmanor **

  9. Avatar for Nguyen Thoai
    Nguyen Thoai September 29th, 2008

    Thank Phil Haack for the tutorial.
    Would you mine if I make a Vietnamese version of your tutorial at my personal weblog :D. I have made a simple demo follow your instruction. Anyone who is interested can download it at the link below:
    nthoaiblog.googlepages.com/...eview5AjaxJQuery.zip

  10. Avatar for e
    e October 21st, 2008

    Nicely done Phil.

  11. Avatar for danny
    danny October 24th, 2008

    Where do I get the jquery.color.js file from? Found it online, does it go like this,
    /*
    * jQuery Color Animations
    * Copyright 2007 John Resig
    * Released under the MIT and GPL licenses.
    */
    (function(jQuery){
    Anyways, getting an error. Please help, Thanks, Danny

  12. Avatar for haacked
    haacked October 24th, 2008
  13. Avatar for A.Jendrysik (Typo3 Agentur)
    A.Jendrysik (Typo3 Agentur) February 9th, 2010

    wonderful tutorial. thx excactly what i was searching for.
    Greetings from de