如何在MVC5中的部分视图中更新视图模型? [英] How to update view model in a partial view in MVC5?

问题描述

我有一个视图，并且在该视图内有一个div，其中将包含部分视图.

I have a View and inside that view I have a div that will contain a partial view.

我的问题是这个.用户从下拉列表中选择一个项目，然后使用模型加载部分视图.用户更改会更改一些文本框，然后单击按钮以提交部分视图(位于Html.BeginForm中).

My issue is this. The user selects an item from the dropdownlist and I load the partial view with the model. The user change changes some of the textboxes and clicks the button to submit the partial view (which is in a Html.BeginForm).

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

When I go to examine the model in the controller the model doesn't contain the changes that the user made.

为什么模型不能反映用户所做的更改?

Why doesn't the model reflect the changes the user made?

在主视图中:

<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:

My 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");
    }

推荐答案

这与您描述的场景不完全相同，但是这就是我的团队使用局部变量的方式:

This is not exactly the scenario you described, but this is how my team uses partials:

1)在主视图的ViewModel中，为部分视图的Model添加一个属性(例如MyModel).

1) In the ViewModel for your Main View, add a property (e.g. MyModel) for the Model of the partial view.

2)在cshtml中调用部分视图时，请确保告诉MVC在何处绑定部分视图的内容:

2) When calling the partial View in the cshtml, make sure you tell MVC where to bind the content of the 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伪造它，但不要问我如何.

Note how we use the TemplateInfo to set the right context for the partial, so the inputs rendered in the partial are prefixed with the correct names to make the modelbinding work. E.g. <input name="MyModel.FirstName"> You can probably fake this in javascript, but don't ask me how.

3)我们的控制器操作接受主页的ViewModel. <form>位于主页上，并围绕部分调用.

3) Our controller actions accept the ViewModel of the main page. The <form> is on the main page and surrounds the partial call.

这篇关于如何在MVC5中的部分视图中更新视图模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！