The detail-form tag helper renders a single data item both in edit and display mode with a default template that may be customized. It is very usefull for rapid prototyping, since it saves all time needed to write Html and Css details. Default row template renders a Bootstrap form (when in display mode a Bootstrap form in display mode) assigning to each field a number of grid system slots computed from the desired percentage width of the column describing the field.

detail-form supports multiple rows and toolbars. As for all row based controls row-type 0 settings are provided in the detail-form tag itself since the detail-form tag inherits from the row-type tag helper. Default layout template in edit mode includes also the form to submit all changes. It includes also a LayoutStandardPlaces.Header/LayoutStandardPlaces.HeaderEdit toolbar zone (toolbars with both names are placed in the same zone), a LayoutStandardPlaces.SubmitBar toolbar zone, and a LayoutStandardPlaces.Footer/LayoutStandardPlaces.FooterEdit toolbar zone. Display mode has a LayoutStandardPlaces.Header/LayoutStandardPlaces.HeaderDisplay zone (toolbars with both names are placed in the same zone) and a LayoutStandardPlaces.Footer/LayoutStandardPlaces.FooterDisplay zone.

Submitbar is intended for placing custom submit/reset buttons, so when no submitbar is found either a submit (if standard post has been specified) or a save (if ajax submit has been specified) button is automatically added. Please refer to the buttons documentation for more infos on save buttons and buttons in general.

Default edit mode and display mode template are quite simple. Please refer to their code for more infos on how to customize them.

See a simple detail form live here

See a muti-row-types detail form with custom column templates live here

detail-form tag helper attributes

detail-form tag helper inherits all row-type attributes that are used to define the main row-type (0 index row-type). Below all additional attributes.

asp-for: ModelExpression

The property to render with the detail-form.

edit-mode: ModelExpression, edit-mode-default: bool

Two ways to specify if the control is in edit mode: as a constant, or in the View model. For server controls edit-mode-default suffices for both purposes, but for client controls where model is on the client side this is not the case.

id: string

The id that is placed in the root Html node is computed automatically, based on the path from the ViewModel to the property being rendered with the detail-form. If this attribute is specified, it overrides the automatically computed id.

class: string

Space separated Css classes placed ith the detail-form root node.

ServerRowSelection : Func<object, int>

A function that, evaluated on the data item, returns the index of the row-type to use for rendering that data item. As a default row-type is chosen based on the run time data item type as explained in the row-type documentation.

client-row-selection : string

Used for client controls implementations of the detail-form(ie with tag helper providers whose detail-forms create their Html on the client side). The full name of a JavaScript function that do the same job as ServerRowSelection on the client side.

model-null-row : ModelExpression, model-null-row-default: int

Used when model is null, so it cannot be used to decide which row-type to use for rendering. This happens during new item creation, so it is obvious, that in this case we need to specify the kind of data item to create. Two ways to specify the index of the row-type to use for rendering the null model: as a constant, or in the View model. For server controls model-null-row-default suffices for both purposes, but for client controls where model is on the client side this is not the case.

form-action : string

Url where to submit the form when in edit mode

form-method : string

Verb to submit the form with when in edit mode (It defaults to "POST").

asp-antiforgery : bool?

If provided and set, automatically adds an antiforgery hidden field.

no-submit : bool

If set, selects post based ajax form submit. In this case if no submitbar is provided the button added is a save button that automatically triggers the ajax submit.

rows-cache-key: string

When a name is specified all row-type definition settings are cached to save the time needed to parse and process all row-type tag helpers. Cached settings are used by all controls that specify the same rows-cache-key.

layout-template: string

The name of a partial view providing a custom layout template.