I'm converting an existing ASP.NET app to MVC2, and I have an existing method that is called through jQuery using Ajax, that worked before, but does not work now. So it seems there are some change I need to do due to using MVC2 that I can't figure out.
I have reduced the complexity of the code, but it still do not work. This is my current code:
jQuery script that trigger on button click
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 have 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 can see that the PostBlogComment method gets called, but there are two major problems I'm facing here:
Test
as you can see from the code.The error is probably easy to spot for those who work with these things regularly (or at least I hope so :))
Here are the changes you need to make 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 your controller action
public ActionResult PostBlogComment(
string name,
string url,
string email,
string body,
string postid
)
{
return Json(new { Value = "This is a test" });
}
Which could 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" });
}
Things to note:
the data
hash property of a jquery AJAX call needs to be as my example or you would be sending a JSON encoded string and the default model binder of ASP.NET MVC doesn't know how to parse back as action arguments. In ASP.NET MVC 3 this has changed as there is a JsonValueProviderFactory allowing you to send JSON requests. So if you were using ASP.NET MVC 3 you could send your AJAX request like this and the action parameters will be correctly bound:
$.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 must return ActionResults. So if you want Json then return a JsonResult.
The action passes an anonymous type to the Json method containing a Value
property which is used in the success
callback and the response from the server would look like this:
{ 'Value': 'This is a test' }
Never hardcode urls like this in your javascript files or your application might break when you deploy it. Always use Url helpers when dealing with urls:
...
url: '<%= Url.Action("PostBlogComment", "Pages") %>',
...
or if this was an external javascript file you could either use some global js variable that was initialized in your view pointing to the correct url or make this url as part of your DOM (for example as anchor href property or HTML5 data-*
attributes) and then use jQuery to fetch the value.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With