无法在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属性以绑定到您的模型。