How to persist data models passed to partial views?

Question

To illustrate the problem I face, I have put together three simple data models:

 public class PersonalModel {
     public string FirstName { get; set; }
             


        

Answer 1

Pass the OverallModel to your partials so that the controls will be correctly named for posting back to OverallModel. Currently you would have controls with name="FirstName" but they need to be name="Personal.FirstName"

@Html.Partial("Personal", Model)

and change the partials to suit

@model OverallModel
....
@Html.TextBoxFor(m => m.Personal.FirstName)

As an alternative, you can also pass the prefix to the partial

@Html.Partial("Address", Model.Personal, new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "Personal" }})

Answer 2

I had same problem like you, so I'll put my 2 cents here for someone in the future with same problem.

My solution is by using EditorTemplates.

You create you models aka Personal, Address, Overal.

In (put whatever name)Controller you make an instance of Overal model and into Get method you send it into your View and in Post method you put it as incoming parameter.

 public ActionResult Index()
    {
        var model = new OveralModel();

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(OveralModel model)
    {
        return View(model);
    }

Index page (i will use yours) will look like this

@model EditorFor.Models.OveralModel

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>OverallModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(m => m.Id)

        <div>            
            @Html.EditorFor(m => m.Personal)
        </div>
        <div>
            @Html.EditorFor(m => m.Address)
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

Istead of PartialViews we can use EditorModels, i understand it as a PartialView which we can use as editor whenever we want.

So to use it, we create folder called EditorTemplates in the Views/Shared and create Views with same names as your models.

For example EditorTemplate for our PersonalModel will be called PersonalModel.cshtml and code in it can look something like this

@model EditorFor.Models.PersonelModel


<div class="form-group">
    @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
    </div>
</div>

So when we write in our sou @Html.EditorFor(m => m.Personal) it will look into EditorTemplates and will search for an EditorTemplate with same name and use it in site.

Index site will look like this

and when you click Submit button it will send back whole model back into Controller

Looks like it worked and we got our data back from view and use it for whatever we want to.

PS: My first post, so i hope it is understandable and will be helpful for others even now and in future. Have a good day