Your First Razor UI Library with ASP .NET Core

By Shahed C on December 2, 2018

This is the ninth of a new series of posts on ASP .NET Core. In this post, we’ll learn about Razor Class Libraries to build reusable UI for your web app. This post is also included in Matthew Groves‘ 2018 C# Advent Calendar, in the Dec 2 slot.

ASPNETCoreLogo-300x267

Introduction to Razor Class Libraries

From an earlier post on Pages in ASP .NET Core, we’ve seen various of ways of creating web pages with or without controllers, views and models to support each of your pages. If you’re an experienced developer, you already know how to reuse server-side code in class libraries.

Starting with ASP .NET Core 2.1, you can now “package your Razor views and pages (.cshtml files) along with your controllers, page models, and data models in reusable class libraries that can be packaged and shared. Apps can then include pre-built UI components by referencing these packages and customize the UI by overriding specific views and pages.”

Better yet, ASP .NET Core Identity is now available as a Razor Class Library, and can be scaffolded into your web application with just the pieces you need.

Before You Begin

Before you begin, take a look at the sample code project on GitHub:

Web GameConsoles on GitHub: https://github.com/shahedc/GameConsoles

Open the GameConsoles.sln file to load the 2 projects included with the solution:

  • Web App project (Set as StartUp Project)
  • Razor UI Class Library project (contains shared UI for reuse)

Steps to Create in Visual Studio 2017

Create Class Library project, add reusable UI: 

  1. Click File | New | Project
  2. Select ASP .NET Core Web Application, click OK
  3. Select Razor Class Library under ASP .NET Core 2.1

VS2017-Project-RazorClassLibrary

Add partial views under /Pages/Shared/

  • /Pages/Shared/_Header.cshtml
  • /Pages/Shared/_Footer.cshtml
  1. Create folder structure /Pages/Shared/
  2. Add new Razor View _Header.cshtml to Shared subfolder
  3. Add new Razor View _Footer.cshtml to Shared subfolder

Reference for adding new folders and views: https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-view?view=aspnetcore-2.1

Contents of _Header.cshtml:

<h3>_Header.cshtml partial view.</h3>

<p>/Pages/Shared/_Header.cshtml</p>

<a href="/">Home</a>

Contents of _Footer.cshtml:

<h3>_Footer.cshtml partial view.</h3>

<p>/Pages/Shared/_Footer.cshtml</p>

Source: <a href="https://en.wikipedia.org/wiki/List_of_home_video_game_consoles">https://en.wikipedia.org/wiki/List_of_home_video_game_consoles</a>

Create the Web App project, use Class Library: 

  1. Click File | New | Project
  2. Select ASP .NET Core Web Application, click OK
  3. Select Web Application under ASP .NET Core 2.1

VS2017-Project-WebApp

Note that this “Web Application” option will create an ASP .NET Core App with Razor Pages by default, as opposed to a traditional MVC web app with Models, Views and Controllers.

Reuse UI from Library in Web App

  1. Open _Layout.cshtml from /Pages/Shared/ in the Web App project
  2. Add a dependency to use the Razor Class Library
  3. Add <partial> tags to reuse the _Header and _Footer views
  4. Add new Pages that contain unique content
  5. Update the /Pages/Index.cshtml page to include links to various pages

To add the dependency:

  1. Right-click the Web App project
  2. Select Add | Reference…
  3. Select the Class Library project under Projects | Solution and click OK

VS2017-Project-Reference-RazorClassLibrary

To ensure the correct build dependencies:

  1. Right-click the Web App project
  2. Select Build Dependencies | Project Dependencies
  3. Ensure that the desired Razor Class Library is selected

VS2017-Project-BuildDependencies

One way to reuse the partial views is to update the <body> in _Layout.cshtml file to look something like this.

<body>
 <partial name="_Header">
 @RenderBody()
 <partial name="_Footer">
</body>

In this sample, the @RenderBody() call within the _Header and _Footer views allows the page to reuse the same header and footer content in every page. Feel free to use your own partial views and shared content in any way you see fit.

In the sample Index.cshtml page, there is a list of links, e.g.

<ul>
    <li>
        <a asp-page="./GameConsoles01">First generation (1972–1980)</a>
    </li>
...
</ul>

Also in the /Pages folder, there is a series of sample pages to display information about various video game console generations, e.g. GameConsoles01 through 08.

Pages-GameConsoles01-08

Running the Application

In Visual Studio 2017:

  1. Right click the Web App project to Set as Startup Project
  2. Click F5 on your keyboard or Debug | Start Debugging to run the web app
  3. Verify the Index page has loaded with its main content sandwiched between the shared header and footer.
  4. Click on one of the links to view additional pages that share the same header and footer.

RCL-Browser

IMPORTANT: Please note that your application uses the view, partial view or Razor Page from the Web App, if that view/page exists in the same folder structure in both the web app *and* and the Razor Class Library. In other words, the Web App takes precedence when looking for a named view or page.

Bonus: Identity as UI Library

As of ASP .NET Core 2.1, you can now include ASP .NET Core Identity features into your web app without having to include all the source code that goes along with it. These features are included in a Razor UI Class Library by default.

When you’ve added Authentication to a Web Project, you can then override anything you’d like.

  1. Create a new Web App project with Authentication
  2. Right-click your project in Solution Explorer
  3. Click Add | New Scaffolded Item…
  4. In the popup dialog that appears, select Identity then Add

VS2017-Add-Scaffold-Identity

In the next popup dialog:

  1. Select specific files to override
  2. Optionally, choose “Override all files”
  3. Select a Data Context class or add a new one
  4. Click the Add button and wait for completion
  5. Browse /Areas/Identity/Pages to see what was added
  6. Inspect the code and modify as desired

VS2017-Add-Identity-Override

VS2017-Identity-Pages

 

References:

Below are a list of relevant references, updated throughout 2018, as of this writing:

 

9 thoughts on “Your First Razor UI Library with ASP .NET Core

  1. Pingback: Your First Razor UI Library with ASP .NET Core - How to Code .NET

  2. Pingback: Dew Drop - December 3, 2018 (#2851) - Morning Dew

  3. Pingback: 1 – The Second Annual C# Advent | Traffic.Ventures Social

  4. Pingback: Authentication & Authorization in ASP .NET Core Razor Pages | Wake Up And Code!

  5. Pingback: .NET Core 3.0, VS2019 and C# 8.0 for ASP .NET Core developers | Wake Up And Code!

  6. Pingback: Authentication & Authorization in ASP .NET Core 3.1 | Wake Up And Code!

  7. Pingback: .NET 5.0, VS2019 Preview and C# 9.0 for ASP .NET Core developers | Wake Up And Code!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.