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.

Advertisements

About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

ultimatemindsettoday

A great WordPress.com site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

A Good Blog is Hard to Find

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: