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

名前属性を持つ入力を生成しますCreditCardDetailModelの部分図を返すコントローラメソッドを呼び出している@Html.Action()のご利用など

<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という名前に変更します（つまり、クラス名と一致させる）。次に、ビューには、モデルにバインドするための正しいname属性を生成する

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

を使用してください。