What is the right pattern for using JQuery Ajax and ASP.Net Mvc?

Question

I'm very new to both the Mvc framework as well as JavaScript and JQuery. I'm trying to understand the right way to structure Ajax calls.

Let's say I have a Vote Up button similar to what you see on StackOverflow. When the user clicks it I need to update the vote count in the database and return the new value to the UI. Currently I am achieving this by having an action called VoteUp on the PostsController which takes an int postID as a parameter.

public PostsController : Controller
{
 public ActionResult VoteUp(int postId)
 {
 //Increment Post Vote Count
 return Json(voteCount); //Return just the new vote count as a JSon result.
 }
}

I'm then calling this method via ajax by invoking the url "http://example.com/posts/voteUp?postId=5". I then return an JSon ActionResult with the new value to update the UI with.

Is this the right way to implement this? Again, I'm totally new to both javascript and jquery. I'm used to doing everything as click event handlers in asp.net webforms. Any guidance would be appreciated.

• AnthonyWJones: Excellent question, ASP.NET-MVC includes ASP.NET AJAX but jquery also supports ajax, it would intresting to know how if at all these interact.

Answer 1

Yes, it sounds like you've got it about right.

Note, however, that if you change postId to Id, then you could call with a URL like:

http://example.com/posts/voteUp/5

(With the default routing.) It's a question of personal preference.

• Ryan Lanciaux: I would use the JsonResult instead of the standard ActionResult. You could simply return voteCount

Answer 2

I would approach this using jQuery and JsonResult Controller. Your jQuery code would call the JsonResult which would pass the pertinent information off to the model code to handle adding a new vote. I wrote a brief tutorial on similar concepts which is available at http://www.dev102.com/2008/08/19/jquery-and-the-aspnet-mvc-framework/