What is the correct way of posting a form with jquery ajax and MVC3?

I've seen a couple of methods on how to do this. My own method that I like, except from one part, is the following:

1. Hijack submit-event of form

2. Collect the data and build a json object

   var objToSend = { Property : $('#propertyField').val(), Property2 : ... };
   

   This is the part I don't like since it's tedious to collect 25 values like this

3. Call $.ajax({}) and specify the url to point to an [HttpPost] enabled action somewhere

4. in the success: part of the ajax-query, collect the returned data (which I return as a string) and write it out where appropriate. I handle errors here as well, checking to see if the first word is "Error:" and then taking appropriate action.

I like this method apart from the collection stage. I am sure there is a better way 开发者_开发问答of doing this but I'v thrown myself headlong into jquery coming from an ASP.NET WebForms-background so the whole "embrace the web" part is totally foreign to me.

You could use the serialize() method to avoid passing all the fields one by one. It will send the entire form data to the server using application/x-www-form-urlencoded content type as if it was a standard form submission:

$('#myform').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            // TODO: handle the success case
        }     
    });
    return false;
});

Another possibility is the jQuery form plugin:

$('#myform').ajaxForm(function(result) { 
    // TODO: handle the success case
});

Some people find it also useful to use the Ajax.BeginForm helpers to render the form:

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "success" }))
{
    ... some input fields
}

In ASP.NET MVC 3 you need to include the jquery.unobtrusive-ajax.js script which unobtrusively AJAXifies the HTML 5 data-* attributes emitted by the Ajax helper.

Allow jQuery to build your json for you. You can serialize a form which will create a data set for you to submit.

$.post("myUrl", 
       $("form").serialize(), 
       function(callback) { ... } 
     );

That's how I'd do it!

You also have the option of using the MVC helpers to create the post code handling code for you if you're dealing with a form e.g.

<% using (html.BeginForm()) {%>

    // html for the form


    <input type='submit' value='post' />

<% } %>

The transition from WebForms to MVC can be a tricky one for people has you really are dealing with the raw aspects of web programming i.e. http, html and javascript... BTW I believe this to be a good thing as I'm not a fan of the pseudo single process event model of WebForms.

Long live MVC! :)

I tend to use the "jQuery form plugin". It allows you to cleanly abstract a standard form into an AJAX form with very little effort:

http://jquery.malsup.com/form/

It also allows you to easily trap various events, failure conditions, validations etc and can convert your form to a JSON request or XML if you desire. Handles file uploads too.