無法在MVC中綁定複雜類型

Question

我有以下PaymentInformationModel類。其中有一個複雜的CreditCardDetailModel類型。當我提交我的表單時，CreditCartDetail屬性保持爲空，我期待它填寫用戶輸入的所有詳細信息。我是否需要做自定義綁定，或者我缺少一個默認的綁定技巧。

PaymentInformationModel

public class PaymentInformationModel 
{ 

    public string PaymentAmount { get; set; } 


    public string TransactionReference { get; set; } 

    public string Description { get; set; } 
    public CreditCardDetailModel CreditCardDetail{get;set;} 

} 

CreditCardDetailModel

public class CreditCardDetailModel 
    { 


     public string CardNumber { get; set; } 


     public string Name { get; set; } 


     public string ExpiryDate { get; set; } 



     public int CardSecurityCode { get; set; } 

     public CreditCardType CardType { get; set; } 


    } 

VIEW

@model PaymentInformationModel 

@using (Html.BeginForm("", "Payment", FormMethod.Post, new { Id = "Form1", @class = "form-horizontal" })) 
{ 
    <div class="container"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Payment Information</div> 
      <div class="panel-body"> 
       <div class="form-group"> 
        @Html.LabelFor(x => x.PaymentAmount, new { @class = "control-label col-sm-2" }) 
        <div class="input-group col-sm-3"> 
         <span class="input-group-addon">$</span> 
         @Html.TextBoxFor(m => m.PaymentAmount, new { @class = "form-control col-sm-10" }) 
        </div> 
        @Html.ValidationMessageFor(m => m.PaymentAmount, "", new { @class = "help-block" }) 
       </div> 
       <div class="form-group"> 
         @Html.LabelFor(m => m.TransactionReference, new { @class = "control-label col-sm-2" }) 
         @Html.TextBoxFor(t => t.TransactionReference, new { @class = "form-control col-sm-10" }) 
       </div> 
       <div class="form-group"> 
        @Html.LabelFor(l => l.Description, new { @class = "control-label col-sm-2" }) 
        @Html.TextAreaFor(t => t.Description, new { @class = "form-control col-sm-10" }) 
       </div> 

      </div> 
     </div> 
     @Html.Action("CreditCardDetail") 
     <p class="log"></p> 

    </div> 
    <button type="submit" name="btnSubmit" id="btnSubmit" class="btn btn-success">PAY</button> 
} 

控制器

[HttpPost] 
     public ActionResult Index(PaymentInformationModel model) 
     { 
      if (ModelState.IsValid) 
      { 
       return View(); 
      } 
      return View(); 
     } 



public PartialViewResult CreditCardDetail() 
     { 
      return PartialView("CreditCardDetail_Partial"); 
     } 

Answer 1

您使用的@Html.Action()被調用返回的CreditCardDetailModel的局部視圖與名稱屬性，這將產生輸入的控制器的方法，例如

<input name="CardNumber" .... /> 
<input name="ExpiryDate" .... /> 

但爲了結合到模型，他們需要成爲

<input name="CreditCardDetail.CardNumber" .... /> 
<input name="CreditCardDetail.ExpiryDate" .... /> 

其不清楚爲什麼使用@Html.Action()來調用一個不包含邏輯的服務器方法，並且您可以輕鬆使用@Html.Partial("CreditCardDetail_Partial")，儘管這仍會導致相同的錯誤name屬性。

對於CreditCardDetailModel類型，您需要使用EditorTemplate。將CreditCardDetail_Partial.cshtml文件移動到/Views/Shared/EditorTemplates文件夾並將其重命名爲CreditCardDetailModel.cshtml（即匹配類的名稱）。然後在視圖中，使用

@Html.EditorFor(m => m.CreditCardDetail) 

這將生成正確的name屬性以綁定到您的模型。