将部分视图数据绑定到主视图模型

Question

I have a partial inside my main view, this partial view gets populated once the "Click Me" button is clicked. Now my question is , how do I bind the partial view model back to main model ?

This is my parent view looks like

@model TestModel       

@using (Html.BeginForm("TestAction", "GetQuote", FormMethod.Post, new { @class = "loader-disabled-next", role = "form", id = "frmtest" }))
    {

        <fieldset class="fieldset-border loader" >
            <legend class="fieldset-border fieldset-header">Find Your locations</legend>
           <div>
            @Html   @Html.LabelFor(m => m.FirstName)
                        @Html.TextBoxFor(m => m.FirstName)
            </div>
       <button type="button" id="click">Click Me!</button>
        </fieldset>

        <fieldset  class="fieldset-border loader" >
            <legend class="fieldset-border fieldset-header">YOUR BUSINESS LOCATION(S)</legend>

            <div id="BusinessLocations">
                <div class="col-xs-12">

                    @Html.Partial("_BusinessLocationResults", Model.Addresses)

                </div>
            </div>
        </fieldset>
}

this is how the partial code looks like
@model IEnumerable<BusinessAddress>

    @foreach (var item in Model)
    {

        <div class="col-xs-12 col-md-3 col">
            <fieldset class="fieldset-border loader">

                <p class="funnel-your-business">

                    <span id="address-address1">
                        @item.Address1
                    </span>
                    <br />                    
                    <span id="address-citystate">
                        @({item.State}")
                    </span>

                </p>

            </fieldset>
        </div>
    }

This is my viewmodel definition View Model

public class TestModel
{
public string FirstName {get;set;}
public string List<BusinessAddress> Addresses {get;set;}
}
public class BusinessAddress 
{
 public string Address1 {get;set;}
 public string State {get;set;}

}



Public ActionResult LoadData()
{
 var model = new TestModel();
 model.FirstName = "sssss";
 model.Addresses = new List<BusinessAddress>();
return view("TestBusiness",model);
}

Here is the action method that returns data for partial view

public PartialViewResult SaveClickMe(string firstname)
{
var model = new List<BusinessAddress>();
  //logic to create and populate list of Business address
  //model has data at this point

return PartialView("partialaddview",model);

}

Answer 1

When you post data to the server (I mean, an action into a controller ), you can bind it into a class . If you want to send data back to the View , you can just return it from the Action (from a Controller .

Something like this:

public ActionResult TestAction(TestModel input)
{
   // some code/validation

   // return the same view but with the TestModel you bind from view to a view again!
   return View(input);
}

Your Partial View will just render, but you didn't send information from there. You could just add hidden inputs to provide the information and bind it as a indexed collection on the target property ( Addresses on your case). For sample:

@model IEnumerable<BusinessAddress>
@{ 
   int index = 0;
}
@foreach (var item in Model)
{        
    @Html.Hidden("Addresses[" + index + "].Address1", item.Address1)
    @Html.Hidden("Addresses[" + index + "].State", item.State)

    index++;

    <div class="col-xs-12 col-md-3 col">
        <fieldset class="fieldset-border loader">

            <p class="funnel-your-business">                    

                <span id="address-address1">
                    @item.Address1
                </span>
                <br />                    
                <span id="address-citystate">
                    @({item.State}")
                </span>

            </p>

        </fieldset>
    </div>
}

Answer 2

I would suggest in this case since you are looking for two way binding easily, you use an EditorFor .

@Html.EditorFor(m => m.Addresses, "BusinessLocationResults")

Then put the simple partial inside ~/Views/Shared/EditorTemplates/BusinessLocationResults.cshtml or inside ~/Views/Home/EditorTemplates/BusinessLocationResults.cshtml where Home is the name of your controller

The Razor engine will look for and find a view that matches the name of the "item" class. When it does, it will iterate through the collection, generating a row for each item in your address enumerable. This means you will remove your loop inside the partial code now.

As a side effect and the real benefit that you are looking for, it also names the controls in such a way that the collection can be posted to the controller in a manner that the default model binder understands.