A form-entry Tag Helper

Writing line of business applications usually means creating a lot of forms for data entry. Writing the HTML for them over and over again is tedious and also means copy-pasting the layout structure into every single form. Copy-pasting works fine as long as we one is happy with the design, but when it needs to be altered (beyond what’s possible by CSS), all forms in the application need to change. To remedy this, I created a form-entry tag helper. Now creating an entry for a field in a form is as simple as <form-entry asp-for="LocationName" />.

Using the default scaffolding in Visual Studio, I would get a form that repeats the same pattern over and over again, for each property of the view model.

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Address" class="control-label"></label>
        <input asp-for="Address" class="form-control" />
        <span asp-validation-for="Address" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="City" class="control-label"></label>
        <input asp-for="City" class="form-control" />
        <span asp-validation-for="City" class="text-danger"></span>
    </div>
    <div class="form-group">
      <input type="submit" value="Create" class="btn btn-default" />
    </div>
</form>

Using my form-entry tag helper, the code required is substantially less.

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <form-entry asp-for="Name" />
    <form-entry asp-for="Address" />
    <form-entry asp-for="City" />
    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-default"/>
    </div>
</form>
Software Development is a Job – Coding is a Passion

I'm Anders Abel, an independent systems architect and developer in Stockholm, Sweden.

profile for Anders Abel at Stack Overflow, Q&A for professional and enthusiast programmers

Code for most posts is available on my GitHub account.

Popular Posts

Archives

Series

Powered by WordPress with the Passion for Coding theme.