無法在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;}

}

信用卡詳細信息模型

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; }


    }

視圖

    @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屬性以綁定到您的模型。