Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 358
Micah Avatar asked Jan 12 '09 21:01

Micah


People also ask

Which JavaScript library is used by ASP NET MVC to make AJAX calls?

Ajax functionality depends on the jQuery library, but not the Bootstrap library. If the web project does not implement the Bootstrap CSS framework, the Bootstrap library is unnecessary.

Can we use AJAX in MVC?

The MVC Framework contains built-in support for unobtrusive Ajax. You can use the helper methods to define your Ajax features without adding a code throughout all the views. This feature in MVC is based on the jQuery features. To enable the unobtrusive AJAX support in the MVC application, open the Web.


2 Answers

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.

like image 192
Craig Stuntz Avatar answered Oct 14 '22 01:10

Craig Stuntz


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/

like image 29
Ryan Lanciaux Avatar answered Oct 14 '22 01:10

Ryan Lanciaux