How to update view model in a partial view in MVC5

Question

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

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?

In the main view:

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

My partial view:

    @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.
            }

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

Model:

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

EDIT: Controller Code:

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

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

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

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() }
  })

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) Our controller actions accept the ViewModel of the main page. The <form> is on the main page and surrounds the partial call.