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.