用jquery ajax和MVC3发布表单的正确方法是什么？

Question

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.

Answer 1

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.

Answer 2

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) { ... } 
     );

Answer 3

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 eg

<% 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 ie 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! :)

Answer 4

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.