MVC 4模型绑定部分视图中使用的嵌套模型

Question

I got the following problem, when trying to bind a model in my controller method, the nested model is not bound (input name's do not match, because it's used in a partial view).

Let me illustrate the problem with code samples:

Controller:

public class TestController : Controller
{
    public ActionResult Create()
    {
        var model = new Test2();
        model.Basisgegevens.Name = "Test";
        model.Basisgegevens.Omschrijving = "Omschrijving";

        return View(model);
    }

    [HttpPost]
    public ActionResult Create(Test2 model)
    {
        return View(model);
    }
}

Model:

public class Test
{
    public string Name { get; set; }

    public string Omschrijving { get; set; }
}

public class Test2
{
    public Test2()
    {
        this.Basisgegevens = new Test();
    }

    public int PeriodeVanId { get; set; }

    public int PeriodeTotId { get; set; }

    public Test Basisgegevens { get; set; }
}

View:

@model WebApplication4.Models.Test2

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

    <div class="form-horizontal">
        <h4>Test2</h4>
        <hr />
        @Html.ValidationSummary(true)

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

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

        @Html.Partial("~/Views/Test/Partials/Naam.cshtml", Model.Basisgegevens)

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

Partial view:

@model WebApplication4.Models.Test

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

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

The model 'Test' used in the partial view is used by another controller, therefore i cannot changed the input field names (to allow binding).

This is sent to the server: PeriodeVanId:0 PeriodeTotId:0 Name:Test Omschrijving:Omschrijving

I want the bottom 2 properties (from the nested model), to be renamed in the model binding at controller level to: Basisgegevens.Name Basisgegevens.Omschrijving

That would allow for the binding, and then the model validation to kick in properly.

Does anyone know a solution for this simple model binding problem?

Answer 1

You need to render the partial as an editor. use the following

@Html.EditorFor(model => model.Basisgegevens, "~/Views/Test/Partials/Naam.cshtml")

This will name the inputs correctly so they should bind. Basically it tells razor that the partial is part of the form not unrelated content

Answer 2

For me it works when I use Html.EditorFor and I move partial view under folder EditorTemplates.

There are 2 options where you need to create folder EditorTemplates:

• under particular view
• or in share folder.

Tested on MVC 5 app.