How to prevent Razor from adding prefixes to inputs when using nested display templates?

Question

When I use nested display templates and add input elements through the HTML helper the Razor engine adds a prefix to the fields names.

I do understand this is done to guarantee input name uniqueness at page level (and to rebuild the whole model on post back).

However I have many small forms which perform ad-hoc actions, and I don't need neither the name uniqueness nor the ability to rebuild the whole model.

I just need that single property value, and having Razor alter the input items names breaks the model binder when I submit one of the forms, since all the names will be different.

This example contains a simplified nested model

public class Student
{
    public Guid Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public List<Course> Courses { get; set; }
}

public class Course
{
    public Guid Id { get; set; }
    public string Name { get; set; }
    public List<Grade> Grades { get; set; }
}

public class Grade
{
    public Guid Id { get; set; }
    public DateTime Date { get; set; }
    public decimal Value { get; set; }
}

and it has an Index view with three nested display templates

IndexView
    StudentDisplayTemplate
        CourseDisplayTemplate
            GradeDisplayTemplate

In the grade display template I add a button to remove the grade

@model Playground.Sandbox.Models.Home.Index.Grade

<li>
    @this.Model.Date: @this.Model.Value

    @using (Html.BeginForm("Remove", "Home", FormMethod.Post))
    {
        <input name="GradeId" type="hidden" value="@this.Model.Id" />

        <input type="submit" value="Remove" />
    }
</li>

and on the other side of the request my controller action receives the grade ID

public ActionResult Remove(Guid id)
{
    // Do various things.
    return this.RedirectToAction("Index");
}

If I try to do it using the model helper

@Html.HiddenFor(x => x.Id)

I get the HTML element

<input data-val="true"
       data-val-required="The Id field is required."
       id="Courses_0__Grades_1__Id"
       name="Courses[0].Grades[1].Id"
       type="hidden"
       value="76f7e7ed-a479-42cb-add5-e58c0090770c" />

where the field name gets a prefix based on the whole parent's view model tree.

Using the "manual" helper

@Html.Hidden("GradeId", this.Model.Id)

gives the HTML element

<input id="Courses_0__Grades_0__GradeId"
       name="Courses[0].Grades[0].GradeId"
       type="hidden"
       value="bbb3c11d-d2d0-464a-b33b-ff7ac9815601" />

where the prefix is still present, albeit with my name at the end.

Adding manually the hidden input

<input name="GradeId" type="hidden" value="@this.Model.Id" />

gives the HTML element

<input name="GradeId"
       type="hidden"
       value="a1a35e81-29cd-41b5-b619-bab79b767613" />

which is what I want.

Is it possible to achieve what I want, or am I getting the display templates thing wrong?

Answer 1

You want to set ViewData.TemplateInfo.HtmlFieldPrefix in your Grade template:

@model Playground.Sandbox.Models.Home.Index.Grade

@{
    ViewData.TemplateInfo.HtmlFieldPrefix = "";
}

This gives the desired output of:

<input id="GradeId" name="GradeId" type="hidden" />