Introduction to ASP.NET Core part 20: partial views

Introduction

In the previous post we looked at dependency injection in cshtml views. The @inject directive can be used to inject abstract and concrete types into views. We saw an example of the Layout view using an injected IStringFormatter interface to present some message. This abstraction was wired up in Startup.cs so that it is correctly initialised when injected. Normally though views should not depend on these services. The controller which serves up a view should pass in all the necessary arguments into it so that it can build its HTML content. So it’s a useful enhancement to the framework but use it sparingly otherwise the view will be “too clever” and perform actions it is not supposed to do.

In this post we’ll look briefly at partial views.

Partial views

Partial views are nothing new in .NET MVC and they behave the same way as before. They are most often used to factor out a reusable section of a view. They are normal cshtml files that can have dependencies but are rendered within a parent view. Their file names are conventionally prefixed with an underscore.

We have the following markup in our Details.cshtml view:

@model BookDetailsViewModel

@{
    ViewBag.Title = "Details of " + @Model.Title;
}

<h1>Details of @Model.Title</h1>
<table>
    <thead>
        <tr>
            <th>Author</th>
            <th>Title</th>
            <th>Genre</th>
            <th>Pages</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Model.Author</td>
            <td>@Model.Title</td>
            <td>@Model.Genre</td>
            <td>@Model.NumberOfPages</td>
            <td>@Model.Price</td>
        </tr>
    </tbody>
</table>
@Html.ActionLink("Back to list", "Index")

Our goal is to separate out the table details view into a partial view. Add a new item of type “MVC View Page” into the Views/Books folder called _BookDetails.cshtml. Here is its markup:

@model BookDetailsViewModel

<table>
    <thead>
        <tr>
            <th>Author</th>
            <th>Title</th>
            <th>Genre</th>
            <th>Pages</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Model.Author</td>
            <td>@Model.Title</td>
            <td>@Model.Genre</td>
            <td>@Model.NumberOfPages</td>
            <td>@Model.Price</td>
        </tr>
    </tbody>
</table>

Partial views are rendered using the Html.Partial helper method. Here’s the modified Details.cshtml page:

@model BookDetailsViewModel

@{
    ViewBag.Title = "Details of " + @Model.Title;
}

<h1>Details of @Model.Title</h1>
<div>
    @Html.Partial("_BookDetails", Model)
</div>
@Html.ActionLink("Back to list", "Index")

The helper method accepts the name of the partial view and a model object. Otherwise partial views behave exactly like “full” views, there’s nothing exciting about them really.

We’ll continue with view components in the next post.

View the list of MVC and Web API related posts here.