綁定我的表單模型

Question

我有一個視圖模型包含我的模型的列表，像這樣：

public class OrderConfirm 
{ 
    public ICollection<DayBookQuoteLines> SalesLines { get; set; } 
    public ICollection<DayBookQuoteLines> LostLines { get; set; } 
    public string Currency { get; set; } 
} 

然後我用這個視圖模型在我看來，像這樣：

@model btn_intranet.Areas.DayBook.Models.ViewModels.OrderConfirm 
@{ 
    ViewBag.Title = "Daybook - Order Confirmation"; 
} 

<h6>Sales Lines</h6> 
<div id="SalesOrders"> 
@using (Ajax.BeginForm("ConfirmSalesOrder", new AjaxOptions() 
{ 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "SalesOrders", 
    OnBegin = "SalesOrderConfirm" 
})) 
{ 
    @foreach(var item in Model.SalesLines) 
    { 
     <p>@item.ItemName</p> 
     <p>@item.Qty</p> 

     @* Other Properties *@ 
    } 

    <input type="submit" value="Submit Sales Order" /> 
} 
</div> 

<h6>Lost Lines</h6> 
<div id="LostOrders"> 
@using (Ajax.BeginForm("ConfirmLostOrder", new AjaxOptions() 
{ 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "LostOrders", 
    OnBegin = "LostOrderConfirm" 
})) 
{ 
    @foreach(var item in Model.SalesLines) 
    { 
     <p>@item.ItemName</p> 
     <p>@item.Qty</p> 

     @* Other Properties *@ 
    } 

    <input type="submit" value="Submit Lost Order" /> 
} 
</div> 

的問題是，在我的[HttpPost]操作中，都是ConfirmSalesOrder和ConfirmLostOrder。作爲參數傳遞的我的模型的值爲空：

[HttpPost] 
public ActionResult ConfirmSalesOrder(List<DayBookQuoteLines> quoteLines) 
{ 

    // Process order... 

    return PartialView("Sales/_ConfirmSalesOrder"); 
} 

因此quoteLines爲空。如何將表單綁定到我的模型？

Answer 1

您的表單中沒有任何輸入字段將值發送到服務器。你只顯示它們。這就是爲什麼當您提交表單時它們爲空=>沒有內容被髮送到服務器。

但是，如果在這個表單中，用戶不應該修改任何值，您只需將一個ID傳遞給控制器​​操作，這將允許您從完全相同的位置獲取模型在呈現此表單的GET操作中獲取它。

在這種情況下，你的動作看起來就像這樣：

[HttpPost] 
public ActionResult ConfirmSalesOrder(int id) 
{ 
    List<DayBookQuoteLines> quoteLines = ... fetch them the same way as in your GET action 
    // Process order... 

    return PartialView("Sales/_ConfirmSalesOrder"); 
} 

如果另一方面，用戶應該修改值，你需要向他提供必要的輸入字段的形式：之類的東西文本框，複選框，單選按鈕，下拉列表，textereas，...爲了爲這些輸入字段生成專有名稱，我建議您使用編輯器模板而不是在視圖中編寫foreach循環。

---

UPDATE：

好像用戶是不應該所以沒有相應的輸入字段來編輯數據。在這種情況下，爲了保留您在AJAX請求期間可以使用的模型，您可以用正常的Html.BeginForm替換Ajax.BeginForm，然後用jQuery手動連接AJAX請求。這種方法的優點是，現在你擁有更多的控制權，並且可以將整個模型作爲JSON請求發送。要做到這一點，你可以存儲模型視圖內的JavaScript編碼的變量：

<script type="text/javascript"> 
    var model = @Html.Raw(Json.Encode(Model)); 
</script> 

，然後AJAXify形式：

$('#formId').submit(function() { 
    $.ajax({ 
     url: this.action, 
     type: this.method, 
     contentType: 'application/json', 
     data: JSON.stringify({ quoteLines: model }), 
     success: function(result) { 
      $('#someTargetIdToUpdate').html(result); 
     } 
    }); 
    return false; 
});