EditorBlockFor HTML helper
In ASP.NET MVC, Microsoft has created various HTML helpers that can be used in a form, e.g. LabelFor, EditorFor, ValidationMessageFor. Let’s see how to create a custom one.
Despite these nice helpers, I still find the HTML markup to become tedious and repetitive.
For instance, this generates a form that can be used to create groups in a web application:
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="editor-label">
@Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.CollectionName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CollectionName)
@Html.ValidationMessageFor(model => model.CollectionName)
</div>
<div class="form-buttons">
<input type="submit" value="@this.GlobalResource(Resources.Language.Create)" />
</div>
}
That’s quite a lot of code for handling two single properties. The two editor blocks also look rather similar, and could use some reuse.
To improve, we can create a small HTML helper that generates an editor block as above, with a label, and editor and a validation message.
With it, the form becomes a lot shorter and cleaner:
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
@Html.EditorBlockFor(model => model.Name);
@Html.EditorBlockFor(model => model.CollectionName);
<div class="form-buttons">
<input type="submit" value="@this.GlobalResource(Resources.Language.Create)" />
</div>
}
Please let me know if I have ruined the order of the universe.
Discussions & More
Please share any ideas, feedback or comments you may have in the Disqus section below, or by replying on Twitter or Mastodon.
If you found this text interesting, make sure to follow me on Twitter and Mastodon for more content like this, and to be notified when new content is published.
If you like & want to support my work, please consider sponsoring me on GitHub Sponsors.