Jquery ajax forms for ASP.NET MVC 3

ajaxasp.net-mvcasp.net-mvc-3jquery

this might be an easy question but for me right now it is not clear and I have to get things sorted in my head… maybe somebody can help me with that =)…

I know that MVC comes with Ajax Helpers.
I know there is Microsoft library and there is also jquery.
I know that with MVC 3 they introduced unobtrusive javascript which adds some special tags to html for cleannes…

but how does ist play together?

Example: I want to post a remote form (partial view) per ajax to add comments to a blog post. without posting the whole page back.

in my Partial View would I use Ajax.BeginForm() is this then MvcAjax or Jquery?
Or would I use Html.BeginForm() and register something like $.post on the click event of the Form. This would also have a fallback of plain html if javascript is disabled or not supported….

Or in general when to use what for posting comments to a blog post?… and I assume that it is correct, that I am posting to the create action of the commentscontroller and I would use the JsonModelBinder to transform it to a model. After that I would return Json and would append it to my comments list…

Is this reasonable why of doing it?

Best Answer

Ajax.BeginForm() is this then MvcAjax or Jquery?

By default it is jquery. You need to reference the jquery.unobtrusive-ajax.js script for this to work.

Or would I use Html.BeginForm() and register something like $.post on the click event of the Form.

That's an alternative. Personally that's what I do.

I assume that it is correct, that I am posting to the create action of the commentscontroller and I would use the JsonModelBinder to transform it to a model. After that I would return Json and would append it to my comments list...

The JsonModelBinder has been introduced in ASP.NET MVC 3 and it allows you to send a JSON string to a controller action which will be mapped back to a view model. For example if you have the following view model:

public class PersonViewModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

and the following action:

public ActionResult Foo(PersonViewModel person) 
{
    ...    
}

the traditional way to invoke it in AJAX is:

$.ajax({
    url: '@Url.Action("foo")',
    type: 'POST',
    data: { name: 'john', age: 20 },
    success: function(result) {
        // TODO:
    }
});

and in ASP.NET MVC 3 you could send a JSON as request parameter which will be bound to the PersonViewModel action parameter:

$.ajax({
    url: '@Url.Action("foo")',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ name: 'john', age: 20 }),
    success: function(result) {
        // TODO:
    }
});
Related Topic