ASP.NET View Re-use with Editor & Display Templates

Whenever I sit down to write one of these articles, I always struggle with whether to write about things that are super-advanced vs. super-basic. My goal though is to try to write about things that are somewhat obscure but handy in the hopes that I can smooth out the learning curve for someone -- especially people who are just getting going with .NET Core. ASP.NET Core has a zillion great features, but lots of them are hidden. One of my favorites (and the topic of this month's article) is ASP.NET Core Editor Templates and Display Templates.

When I'm writing an ASP.NET Core application and I need a web UI, my default is ASP.NET Core MVC. This means you'll be working with Controller classes and Views that are implemented with cshtml files.

Organization of an ASP.NET Core MVC Application
Let's say that you need to write a simple app to manage basic information about a people and their addresses. The Model classes for this application would probably look like the Person and Address classes in the screenshot below.

If this were a real application, there would probably be code for working with databases or Cosmos DB or services, but let's keep it simple and skip about those details. Ultimately, you'll get to an ASP.NET web application that looks something like the screenshot below. You'll have a folder called Controllers that will contain your ASP.NET Controller classes. That folder will have a class called PersonController that manages the list, add, edit, and delete operations for the Person records. The controllers folder is pretty simple to understand as long as you follow the naming convention of "Class Name" plus the word "Controller" -- PersonController, OrderController, InvoiceController, etc.

A little further down in that project, there's going to be a Views folder and this folder is where the complexity and hidden features start to show up -- or, if you're just learning, completely fail to show up. Typically, for each Controller type that you have, you'll create a subfolder under views with the same name. In this case, there a model class named Person and a controller named PersonController so therefore we have a folder called "Views/Person."

Inside the "Views/Person" folder, you'll create a cshtml (razor) file for each way that you want to display the data. Just to keep it confusing, "Index.cshtml" is usually for lists of data. In the screenshot, Index.cshtml is for displaying lists of Person records and Edit.cshtml is for editing a specific Person record.

When you run the application and open up the editor for a Person, you'll see something like this (see screenshot) in your browser.

If you open the Edit.cshtml, you'll see code that looks like this.

<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group mb-3">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group mb-3">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group mb-3">
                <label asp-for="LastName" class="control-label"></label>
                <input asp-for="LastName" class="form-control" />
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>

            <div class="form-group mb-3">
                <input type="submit" value="Save" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

Throughout the code, you'll see lots of things that say "asp-for" and "asp-validation-for." These are some helpers from ASP.NET and Razor that help you to create logic to display and edit properties on your Model classes.

Clearly, Razor knows a lot about your models. But wait! There's more!

Re-usable, Composable Pieces of 'View'
So far, this is only showing and editing stuff about the Person details. What about the address details? And what if you wanted to re-use View functionality? Or what if you wanted to display a bunch of stuff but didn't want to cram it all into a single CSHTML file? That's where templates come in.

Taking a look at the screenshot below, with a minor addition, we're able to tell ASP.NET and the Razor engine, "display the list of addresses." We can do this using the Html Helper's EditorFor method, @Html.EditorFor(model => model.Addresses, "AddressList").

This helper call says "take the list of Addresses from the Person model instance and display them using the 'AddressList' template."

These templates live in a folders that you have to know to create and come in two flavors: Display and Editor. Display is intended to give you a read-only rendering of the target and the Editors are intended to give you an editable version. In the screenshot below, I've got editor templates for Address and AddressList.

These folders live in either Views/Shared/EditorTemplates or Views/Shared/DisplayTemplates.

The screenshot below is for displaying a list of Address objects. This is what would be triggered by the @Html.EditorFor(model => model.Addresses, "AddressList") call in Edit.cshtml for the Person class. Using the @model directive, this cshtml template receives the list of Address classes that it's supposed to display. Once it has that list of addresses, it goes about displaying them.

What's helpful is that these editor templates can call other editor templates. In the case of the screenshot below, the AddressList template, uses @Html.EditorFor(model => item) to call out to a different editor template for displaying the details of a single Address.

When this runs and the user opens the Edit view for a Person, now we get the editor for a Person plus all the Addresses.

And the upside is that these are nicely separated into different files so that we don't have collisions in version control and we can theoretically use these in multiple places without having to duplicate code.

Summary
Editor and Display templates are easy to use but difficult to discover. You have to know that they're there as a feature. But once you know, it's simply a matter of creating the Views/Shared/EditorTemplates or Views/Shared/DisplayTemplates folders and then creating the cshtml files.

If you want to see the full source code for this, it's published on Github here.

About the Author

Benjamin Day is a consultant, trainer and author specializing in software development, project management and leadership.

Posted by Benjamin Day on 03/31/2025