Fähigkeit Kind Listenelemente Ansichtsmodell dynamisch

Question

Hintergrund

Ich baue ein ziemlich einfach Inventar und Order Management System hinzuzufügen. In all diesen Systemen gelangen Sie schließlich zu dem Bit, wo ein Auftrag (PurchaseOrder in meinem Fall) eine Liste von Auftragspositionen (in meiner Anwendung LineItem genannt) hat.

Backend-Code

Vorerst meine Viewmodels Karte direkt an meine Entities, und so meine PurchaseOrderVm sieht wie folgt aus:

public class PurchaseOrderVm 
{ 
    public PurchaseOrderVm() 
    { 
    LineItems = new List<LineItemVm>(); 
    } 

    public int Id { get; set; } 
    public DateTime Date { get; set; } 
    public PurchaseOrderStatus Status { get; set; } 
    [Display(Name = "Shipping Cost")] 
    public decimal ShippingCost { get; set; } 
    [Display(Name = "Import VAT")] 
    public decimal Vat { get; set; } 
    [Display(Name = "Import Duty")] 
    public decimal ImportDuty { get; set; } 
    [Display(Name = "Supplier Id")] 
    public string SupplierId { get; set; } 
    [Display(Name = "Supplier")] 
    public string SupplierName { get; set; } 
    public IEnumerable<LineItemVm> LineItems { get; set; } 

    public List<SelectListItem> Suppliers { get; set; } 

    public string ButtonText => Id != 0 ? "Update Purchase Order" : "Add Purchase Order"; 
} 

Und mein LineItemVm sieht wie folgt aus:

public class LineItemVm 
{ 
    public int Id { get; set; } 
    public int Quantity { get; set; } 
    public int OrderId { get; set; } 
    [Display(Name = "Product")] 
    public int ProductId { get; set; } 
} 

Frontend/UX

Ich kenne die Art von Erfahrung, die ich bauen möchte, aber ich bin mir nicht sicher, wie viel Dinge mit diesem Aspekt seit MVC3 weitergegangen sind. Ich möchte dies bauen (Bits für Bedeutung hervorgehoben):

Versuchte

konnte ich diese Arbeit für einen einzelnen LineItem nur dies tun bekommen:

<input class="form-control " id="ProductId" name="LineItems[0].ProductId" type="number" value=""> 

Aber das ist offensichtlich das Gegenteil von Dynamik. Was ist der sauberste Weg, um Benutzern das Hinzufügen und Entfernen von Elementen zu erlauben, wie sie es wünschen und das Formular und das Modellbinder immer noch funktionieren?

Answer 1

Sie können im Grunde neue Zeile Zeilen mit Client-JavaScript-Code erstellen. Sie müssen sicherstellen, dass das Eingabeelement (Produkt und Menge) den korrekten Namensattributwert aufweist, damit die Modellbindung funktioniert.

Für Modell Bindung funktioniert, sollten Sie Ihre Eingaben Namen wie LineItems[0].ProductId sein, LineItems[0].Quantity (für row1), LineItems[1].ProductId, LineItems[1].Quantity (für row2) usw.

Da Sie ein Produkt Drop-Down für jede Zeile benötigen, wir halten Ein select-Element auf der Seite und wann immer wir eine neue Zeile für Zeilen hinzufügen müssen, werden wir dieses Element klonen und das für die Zeile verwenden. Wir werden dieses select mit css ausblenden, da es sich eher um Nachschlagedaten handelt, die wir nach Bedarf klonen können.

@model PurchaseOrderVm 
@using (Html.BeginForm("Add","Product")) 
{ 
    @Html.LabelFor(f=>f.SupplierName) 
    @Html.TextBoxFor(s=>s.SupplierName) 

    <label>Order Products</label> 
    <table id="items"> 
     <thead> 
      <tr> 
       <th>Product</th><th>Quantity</th> 
      </tr> 
     </thead> 
     <tbody></tbody> 
    </table> 
    <button id="addProduct">Add Product</button> 
    <input type="submit"/> 
} 
<SELECT Id="Products"> 
    <option value="1">Product 1</option> 
    <option value="2">Product 2</option> 
    <option value="3">Product 3</option> 
</SELECT> 

I schwer, den Inhalt der-Produkte-Auswahlelementes codiert. Sie können es mit Daten ersetzen von Ihrem Server kommen die Html.DropDownListFor/Html.DropDownList Helfermethode (n)

Jetzt verwenden, hört auf der addProduct-Taste, um das Click-Ereignis, um eine neue Zeile erstellen, fügen Sie das select-Element und Menge Eingangselement und an die Tabelle anhängen. Wenn Sie auf die Verknüpfung zum Entfernen klicken, entfernen Sie einfach die nächste Zeile und organisieren Sie die Namenwerte anderer Eingaben, die wir erstellt haben.

Jetzt, wenn das Formular gesendet wird, wird LineItems-Eigenschaft Ihres Ansichtsmodells die richtigen Daten haben.

[HttpPost] 
public ActionResult Add(PurchaseOrderVm model) 
{ 
    // check model.LineItems 
    // to do : Return something 
}