Partial Razor Pages Views

Partial Razor Pages/Views

This Page helped me - Learn Razor Pages
Many of the CRUD Pages can be used for the public pages as well. Using Partial pages is a way of avoiding code duplication. The partial page can be used in a CRUD page and a public page. The example that follows is how to user a Person Details page both for CRUD pages and for a My Account public page.

Add an empty Razor View

In Visual Studio Add New Item => Razor View - Empty, and name it something like _Person. The underbar signifies a partial view. This Razor view has no code behind file and no @page.

Cut out the main display element of the CRUD page and paste it in this empty view. Add a @model DataType which specifies what type of model the page uses in this case Person

@using ASP_Razor_ProjectName.Models
@model Person

Anywhere the model is used needs changing from something like

        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Person.FirstName)
        </dt>

change to:-

        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>

To use this partial View modify the CRUD page so it calls the partial View using a tag helper and passing in the required model.

@model ASP_Razor_ProjectName.Pages.Customers.DetailsModel

@{
    ViewData["Title"] = "Details";
}

<partial name="_Person" model="Model.Person" />

<div>
    <a asp-page="./Edit" asp-route-id="@Model.Person.PersonID" 
        class="btn btn-primary">Edit</a>
    <a asp-page="./Index" class="btn btn-success">Back to List</a>
</div>

In this case the partial view displayed a person

@using ASP_Razor_ProjectName.Models
@model Person

<header class="jumbotron">
    <h1>
        @if(Model.IsCustomer)
        {
            <span>Customer: </span>
        }
        else if(Model.IsStaff)
        {
            <span>Staff: </span>
        }
        @Model.FullName
    </h1>
</header>

<section>
    <h4>Personal Details</h4>
    <hr />
    <dl class="row">
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.FirstName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.LastName)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.LastName)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.Email)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.Email)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.ContactNumber)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.ContactNumber)
        </dd>
        <dt class="col-sm-2">
            @Html.DisplayNameFor(model => model.DateOfBirth)
        </dt>
        <dd class="col-sm-10">
            @Html.DisplayFor(model => model.DateOfBirth)
        </dd>
    </dl>
</section>

Which renders as:-