Super Simple MVC Ajax With JQuery Demo

• Jul 29, 2008
• 13 Comments
• Print

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!

What others have said

Chris Hardy Jul 29, 2008 9:41 AM

# re: Super Simple MVC Ajax With JQuery Demo

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.

Scott Jul 29, 2008 9:45 AM

# re: Super Simple MVC Ajax With JQuery Demo

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

Torkel Jul 29, 2008 10:05 AM

# re: Super Simple MVC Ajax With JQuery Demo

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

Ryan Lanciaux Jul 29, 2008 10:14 AM

# re: Super Simple MVC Ajax With JQuery Demo

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

Ryan Lanciaux Jul 29, 2008 10:28 AM

# re: Super Simple MVC Ajax With JQuery Demo

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

Simone Jul 29, 2008 10:39 AM

# re: Super Simple MVC Ajax With JQuery Demo

Damn... not on iTunes yet

haacked Jul 29, 2008 1:33 PM

# re: Super Simple MVC Ajax With JQuery Demo

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

Elijah Manor Aug 07, 2008 2:07 PM

# re: Super Simple MVC Ajax With JQuery Demo

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 **

Nguyen Thoai Sep 30, 2008 3:51 AM

# re: Super Simple MVC Ajax With JQuery Demo

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

e Oct 21, 2008 1:07 PM

# re: Super Simple MVC Ajax With JQuery Demo

Nicely done Phil.

danny Oct 24, 2008 11:55 AM

# re: Super Simple MVC Ajax With JQuery Demo

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

haacked Oct 24, 2008 2:14 PM

# re: Super Simple MVC Ajax With JQuery Demo

@danny http://plugins.jquery.com/project/color

A.Jendrysik (Typo3 Agentur) Feb 09, 2010 4:31 PM

# re: Super Simple MVC Ajax With JQuery Demo

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

What do you have to say?

Title:

Name:

Email: (never displayed) (will show your gravatar)

Website:

Comment: Allowed tags: blockquote, a, strong, em, p, u, strike, super, sub, code

Please add 4 and 3 and type the answer here: