Object

The Object.cshtml template has special meaning. Because C# has unified type system, it serves as an fallback for any type there isn't other template for.

That means that it's also used for complex types and is used when generating not only single field, but entire model dynamically. You want to modify this template, if you want to change the entire layout of the form, ie. change it to table etc. However, the template has sensible defaults you can easily style using CSS. See sample application for example of such CSS (SCSS).

General layout

In general, for every field, two div elements are created:

<div class="editor-label"><label for="Input_Name">Name</label></div>
<div class="editor-field">
    <input data-val="true" id="Input_Name" name="Input.Name" type="text" value="" />
</div>

If the field contains validation, its validator is included as well:

<div class="editor-label"><label for="Input_Name">Name</label></div>
<div class="editor-field">
    <input data-val="true" data-val-required="The Name field is required." id="Input_Name" name="Input.Name" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Input.Name" data-valmsg-replace="true"></span>
</div>

If the field contains description, additional div is placed between label and field:

<div class="editor-label"><label for="Input_Name">Name</label></div>
<div class="editor-description">Field description</div>
<div class="editor-field">
    <input data-val="true" data-val-required="The Name field is required." id="Input_Name" name="Input.Name" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Input.Name" data-valmsg-replace="true"></span>
</div>

Special case - the checkbox

For checkboxes (booleans) the format is slightly different, because label is placed after the checkbox, instead of before it. Also, the div has class editor-field-checkbox to allow for formatting exceptions:

<div class="editor-field-checkbox">
    <input data-val="true" data-val-required="The Option field is required." id="Input_Option" name="Input.Option" type="checkbox" value="true" /> <label for="Input_Option">Option</label>
    <span class="field-validation-valid" data-valmsg-for="Input.Option" data-valmsg-replace="true"></span>
</div>
<div class="editor-description">Field description if defined</div>

Complex properties

Some properties can be complex. They aren't simple string or number, but contain object with further properties. Imagine something like Address type, having properties for Street, City etc.

This template will render field label and description and then all its fields under it, contained in <div class="editor-complex-field">. The complex fields can be nested as well:

<div class="editor-label"><label for="Input_RegisteredAddress">RegisteredAddress</label></div>
<div class="editor-complex-field">
    <div class="editor-label"><label for="Input_RegisteredAddress_Street">Street</label></div>
    <div class="editor-complex-field">
        <div class="editor-label"><label for="Input_RegisteredAddress_Street_StreetName">StreetName</label></div>
        <div class="editor-field">
            <input data-val="true" data-val-required="The StreetName field is required." id="Input_RegisteredAddress_Street_StreetName" name="Input.RegisteredAddress.Street.StreetName" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Input.RegisteredAddress.Street.StreetName" data-valmsg-replace="true"></span>
        </div>
        <div class="editor-label"><label for="Input_RegisteredAddress_Street_StreetNumber">StreetNumber</label></div>
        <div class="editor-field">
            <input data-val="true" data-val-required="The StreetNumber field is required." id="Input_RegisteredAddress_Street_StreetNumber" name="Input.RegisteredAddress.Street.StreetNumber" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Input.RegisteredAddress.Street.StreetNumber" data-valmsg-replace="true"></span>
        </div>
    </div>
    <div class="editor-label"><label for="Input_RegisteredAddress_City">City</label></div>
    <div class="editor-field">
        <input data-val="true" data-val-required="The City field is required." id="Input_RegisteredAddress_City" name="Input.RegisteredAddress.City" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Input.RegisteredAddress.City" data-valmsg-replace="true"></span>
    </div>
    <div class="editor-label"><label for="Input_RegisteredAddress_Zip">Zip</label></div>
    <div class="editor-field">
        <input class="postal-code" data-val="true" data-val-required="The Zip field is required." id="Input_RegisteredAddress_Zip" name="Input.RegisteredAddress.Zip" value="" />
        <span class="field-validation-valid" data-valmsg-for="Input.RegisteredAddress.Zip" data-valmsg-replace="true"></span>
    </div>
</div>

Groups

You can group fields using the [Display(GroupName = "Group Name")] attribute. This template can group the properties and display them using the detail and summary elements, which by default render as collapsible structure:

<details>
    <summary>Group Name</summary>
    <div class="editor-label"><label for="Input_Name">Name</label></div>
    <div class="editor-field">
        <input data-val="true" id="Input_Name" name="Input.Name" type="text" value="" />
    </div>
    ...
</details>