Wie kann ich ein einfaches Javascript-Array an eine MVC3-Controller-Aktionsmethode binden?

Question

Hier ist der JavaScript-Code verwende ich das Array erstellen und es auf seine Art und Weise senden:

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $("#update-cart-btn").click(function() { 
      var items = []; 
      $(".item").each(function() { 
       var productKey = $(this).find("input[name='item.ProductId']").val(); 
       var productQuantity = $(this).find("input[type='text']").val(); 
       items[productKey] = productQuantity; 
      }); 

      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("UpdateCart", "Cart")", 
       data: items, 
       success: function() { 
        alert("Successfully updated your cart!"); 
       } 
      }); 
     }); 
    }); 
</script> 

Das items Objekt mit den Werten richtig aufgebaut ist, was ich brauche.

Welchen Datentyp muss mein Objekt im Backend meines Controllers haben?

Ich habe dies versucht, aber die Variable bleibt null und ist nicht gebunden.

[Authorize] 
[HttpPost] 
public ActionResult UpdateCart(object[] items) // items remains null. 
{ 

    // Some magic here. 
    return RedirectToAction("Index"); 
} 

Answer 1

Wenn Sie vorhaben, JSON an den Server, um die Daten JSON.stringify müssen senden und die content als application/json angeben, um mit dem MVC3 Binder Modell schön zu spielen:

$.ajax({ 
      type: "POST", 
      url: "@Url.Action("UpdateCart", "Cart")", 
      data: JSON.stringify(items), 
      success: function() { 
       alert("Successfully updated your cart!"); 
      }, 
      contentType: 'application/json' 
     }); 

Und als Datentyp auf der Server Sie stark typisierte Klassen verwenden können, zB:

public class Product 
{ 
    public int ProductKey { get; set; } 
    public int ProductQuantity { get; set; } 
} 

[HttpPost] 
public ActionResult UpdateCart(Product[] items) 
{ 

    // Some magic here. 
    return RedirectToAction("Index"); 
} 

aber Sie müssen die items Liste ein wenig zwicken:

var items = []; 
$(".item").each(function() { 
    var productKey = $(this).find("input[name='item.ProductId']").val(); 
    var productQuantity = $(this).find("input[type='text']").val(); 
    items.push({ "ProductKey": productKey, "ProductQuantity": productQuantity }); 
}); 

Grundsätzlich ist die JSON-Objekt-Struktur der C# Modellklasse Struktur entsprechen sollte das Modell Bindemittel in MVC und dann kümmert sich (auch der Name der Eigenschaft übereinstimmen sollte), um Ihre Server-Seite-Modelle mit dem JSON-Daten aufzufüllen, die Sie gesendet haben . Sie können mehr über Modellbinder here lesen.