Problem making an Ajax call from an ASP.NET MVC2 application

Question

I am converting an existing ASP.NET application to MVC2, and I have an existing method that is called through jQuery using Ajax, which worked before, but does not work now. Therefore, it seems that there are some changes that I need to make due to the use of MVC2, which I cannot understand.

I have reduced the complexity of the code, but it still does not work. This is my current code:

jQuery script that runs when a button is clicked

function leaveComment() { if (validate()) { $.ajax({ type: "POST", url: "/Pages/PostBlogComment", data: "{'name':'Test','url':'Test','email':'Test','body':'Test','postid':'Test'}", dataType: "json", success: function (msg) { //success code goes here }, error: function (msg) { //error code goes here } }); } 

};

Inside my controller called Pages, I created the following method:

 public string PostBlogComment( string name, string url, string email, string body, string postid) { return "This is a test"; } 

When debugging, I see that the PostBlogComment method is called, but there are two main problems that I encountered:

• All method arguments are accepted as null, so I have no useful data to work with. For testing, now all arguments are sent as Test , as you can see from the code.
• When the result is returned to the Ajax method, the error path is called, not the success path, even if the method really returned the string as usual (even if the parameters sent were empty)

The error is probably easy to spot for those who regularly work with these things (or at least I hope so):

Answer 1

The following are the changes needed to complete this work:

 $.ajax({ type: 'POST', url: '/Pages/PostBlogComment', data: { name: 'Test', url: 'Test', email: 'Test', body: 'Test', postid: 'Test' }, success: function (result) { alert(result.Value); }, error: function (msg) { //error code goes here } }); 

and the action of your controller

 public ActionResult PostBlogComment( string name, string url, string email, string body, string postid ) { return Json(new { Value = "This is a test" }); } 

What can be improved by introducing a view model:

 public class PostViewModel { public string Name { get; set; } public string Url { get; set; } public string Email { get; set; } public string Body { get; set; } public string Postid { get; set; } } 

and then:

 public ActionResult PostBlogComment(PostViewModel model) { return Json(new { Value = "This is a test" }); } 

Notes:

• The hash data property for calling jQuery AJAX should be as my example, or you are sending a JSON encoded string, and the ASP.NET MVC model middleware does not know by default how to filter back as action arguments. In ASP.NET MVC 3, this has changed since there is a JsonValueProviderFactory that allows you to send JSON requests. Therefore, if you use ASP.NET MVC 3, you can send an AJAX request this way, and the action parameters will be correctly linked:

   $.ajax({ type: 'POST', url: '/Pages/PostBlogComment', data: JSON.stringify({ name: 'Test', url: 'Test', email: 'Test', body: 'Test', postid: 'Test' }), contentType: 'application/json', success: function (result) { alert(result.Value); }, error: function (msg) { //error code goes here } }); 

• All controller actions in ASP.NET MVC should return ActionResults. Therefore, if you want Json to return JsonResult .

• The action passes an anonymous type to the Json method containing the Value property, which is used in the success callback, and the response from the server will look like this:

   { 'Value': 'This is a test' } 

• Never include such URLs in your javascript files or your application may break when you deploy it. Always use Url helpers when working with URLs:

   ... url: '<%= Url.Action("PostBlogComment", "Pages") %>', ... 

  or if it is an external javascript file, you can either use some global js variable that was initialized in your view, pointing to the correct URL, or make this URL part of the DOM (for example, as a href binding property or HTML5 data-* ), and then use jQuery to retrieve the value.