jquery ajax forms for ASP.NET MVC 3

Question

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?

Darin Dimitrov · Accepted Answer · 2011-02-14 16:08:09Z

30

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:
    }
});

edited Feb 14, 2011 at 16:08

answered Feb 14, 2011 at 16:02

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jon Kragh Over a year ago

Note that if you are posting to MVC with data that was obtained from the form by capturing a submit event e.g. $("#some_form").submit(function () { var data = $(this).serialize(); ... $.ajax({... The content type from Darin's example should be removed for it to work in that scenario.

Rushino Over a year ago

Interesting! I will have a look to the JsonModelBinder.

Scorpion Over a year ago

I must say, Great Answer. It saved my 2-3 hours. Thanks @Darin Dimitrov

Collectives™ on Stack Overflow

jquery ajax forms for ASP.NET MVC 3

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related