如何在 MVC5 的局部视图中更新视图模型？

Question

我有一个视图，在该视图中我有一个包含部分视图的 div。

我的问题是这个。用户从下拉列表中选择一个项目，然后我用模型加载部分视图。用户更改更改了一些文本框并单击按钮提交部分视图（在 Html.BeginForm 中）。

当我去检查控制器中的模型时，模型不包含用户所做的更改。

为什么模型没有反映用户所做的更改？

在主视图中：

<div id="personInfo" style="display:none;"></div>

我的部分观点：

    @model MyProject.MyModel

    @(Html.Kendo().DropDownList().Name("ddlFilters")
                                .AutoBind(true)
                                .OptionLabel("--- Select Filter ---")
                                .DataValueField("ID")
                                .DataTextField("MYFILTER")
                                .DataSource(ds =>
                                    ds.Read(r => r.Action("GetPersonFilters", "Home"))
                                )
                                .Events(x => x.Select("ddlFilters_onSelect"))
                        )

    @using (Html.BeginForm("PersonAction", "Home", FormMethod.Post, new { @class = "form-horizontal", id = "personForm" }))
            {
                 // Strongly typed Kendo fields. Several DropDownListFor and TextBoxFor
                 @Html.Kendo().TextBoxFor(x => x.FirstName).HtmlAttributes(new { @class = "form-control kendoTextBox required " })
                // Button to post the form data to the controller.
            }

我的 Javascript：

function ddlFilters_onSelect(e) {
    var itm = this.dataItem(e.item);

    clearForm();

    if (itm.ID > 0) {
        // Ajax call to get data....
        $.ajax({
            url: "/Home/GetPerson",
            type: "GET",
            data: { "myID": itm.ID }
        })
        .done(function (result) {
            //var aaa = data;      
            $("#personInfo").html(result);
        })
        .fail(function (xhr, status, err) {
            alert(xhr.responseText);
        });
    }
};

型号：

 public partial class MyModel
    {
        public decimal ID { get; set; }
        public string FirstName{ get; set; }
        public string LastName{ get; set; }
        public string MiddleName{ get; set; }
    }

编辑： 控制器代码：

 // Initial call to main view
    public ActionResult CreateNewPerson()
    {
        return View();
    }

    // Call to load Partial View initially
    public PartialViewResult GetPersonInfo()
    {
        return PartialView("_PersonForm", new MyModel());
    }

    // Call to load partial view with data
    public PartialViewResult GetPerson(int myID)
    {
        myData = GetFromDB(myID);
        return PartialView("_PersonForm", myData);
    }

    // Method to save partial form
    [HttpPost]
    public ActionResult PersonAction(MyModel filter)
    {           

        if (ModelState.IsValid)
        {
            // Go update DB
        }

        return View("CreateNewPerson");
    }

Answer 1

这与您描述的场景不完全一样，但这是我的团队使用部分的方式：

1) 在主视图的 ViewModel 中，为局部视图的模型添加一个属性（例如 MyModel）。

2) 在cshtml中调用partial View时，一定要告诉MVC在哪里绑定partial View的内容：

  @Html.Partial("_PersonAction", Model.MyModel, new ViewDataDictionary(Html.ViewData) {
      TemplateInfo = new TemplateInfo { HtmlFieldPrefix = Html.NameFor(m => m.MyModel).ToString() }
  })

请注意我们如何使用TemplateInfo 为部分设置正确的上下文，因此部分中呈现的输入以正确的名称作为前缀，以使模型绑定工作。例如。 <input name="MyModel.FirstName"> 你可能可以用 javascript 伪造这个，但不要问我是怎么做的。

3) 我们的控制器动作接受主页的 ViewModel。 <form> 在主页上并围绕部分调用。