JSON via jQuery direkt an einen ASP.NET MVC 3 Controller senden

Written on March 22, 2011

Will man via jQuery Ajax Call Daten an einen ASP.NET MVC 3 Controller senden, kann man dies z.B. tun, indem man die Post-Daten quasi "von Hand" zusammensetzt und sendet:

<script type="text/javascript">
    function addCustomer() {
        var companyName1 = $("#addcustomer_companyname1").val();
        var addressLine1 = $("#addcustomer_addressline1").val();
        var zipCode = $("#addcustomer_zipcode").val();
        var city = $("#addcustomer_city").val();
        $.ajax({
            type: "POST",
            url: "/Customer/Add",
            data: "companyName1=" + companyName1 + "&addressLine1=" + addressLine1 + "&zipcode=" + zipCode + "&city=" + city,
            dataType: "html",
            success: function (result) {
                $("#status").append(result);
            },
            error: function (error, response) {
                alert(error.responseText);
            }

        });
    }
</script>

Seit ASP.NET MVC 3 gibt es allerdings auch out of the box die JsonValueProviderFactory, die ein Model-Binding an JSON-Parameter von Controller-Action-Methoden erlaubt.

Damit kann mal also auch JSON direkt per jQuery an einen Controller senden:

<script type="text/javascript">
    function addCustomer() {
        var company = getCompany(); // Kundendaten aus Eingabefeldern lesen
        var json = $.toJSON(company); // und per jquery-json in JSON konvertieren
        $.ajax({
            type: "POST",
            url: "/Customer/Add",
            dataType: 'html',
            // Contenttype muss gesetzt werden!
            contentType: 'application/json; charset=utf-8', 
            data: json,
            cache: false,
            success: function (result) {
                $("#status").append(result);
            },
            error: function (error, response) {
                alert(error.responseText);
            }
        });
    }

    function getCompany() {
        var companyName1 = $("#addcustomer_companyname1").val();
        var addressLine1 = $("#addcustomer_addressline1").val();
        var zipCode = $("#addcustomer_zipcode").val();
        var city = $("#addcustomer_city").val();

        return { CompanyName1: companyName1, AddressLine1: addressLine1, ZipCode: zipCode, City: city, Id:null };
    }
</script>

Wichtig sind hierbei folgende Änderungen:

  • Der contentType muss auf JSON gesetzt werden
  • Damit das JSON erstellt werden kann, benötigt man ein entsprechendes Script, z.B. jquery-json, welches ein jQuery-Plugin ist.

DotNetKicks-DE Image