Create Reusable View Using Razor Class Library In ASP.NET Core

In ASP.NET Core 2.1, a new concept or feature has been introduced by Microsoft, that is called Razor Pages. Razor pages are just like the MVC Razor engine related pages and also, quite similar to the web application pages. Today, in this article, we will discuss the concept and benefits of using Razor pages and also discuss how we can implement the Razor pages in a web application project.

 

WHAT ARE RAZOR PAGES?

One of the most important features in ASP.NET Core is the inclusion of Razor Pages which basically provides us similar flavor of web parts as in previous ASP.NET. So, Razor Pages can be built up with both UI and business logic to develop as a package so that we can reuse that package in any ASP.NET Core application. Obviously, in ASP.NET MVC, there is a concept of Partial Views which can also be used as a reusable UI Component. But the inclusion of business logic within a partial view in the MVC framework is quite difficult to implement. However, in Razor Pages, implementing UI and business logic is much easier and also a more natural fit with the structure of the ASP.NET Core applications.

Actually, ASP.NET Core Razor Pages is a page-oriented framework for developing or building a dynamic, data-driven web application. Razor Pages is much more lightweight and flexible as compared to the previous versions of web parts. This framework is developed on the basis of ASP.NET Core MVC framework so, it can be only activated in the ASP.NET Core application if and only if MVC is enabled in the ASP.NET Core application. The Razor Pages is one of the recommended frameworks for developing cross-platform server-side HTML  in ASP.NET Core.

Razor Pages normally uses the C# programming languages syntaxes for the server-side programming.

 

WHY USE RAZOR PAGES?

 

The main reason to use Razor Pages in ASP.NET Core is that it is a much more organized process. It does not provide us the same facility just like MVC applications. In Razor Pages, we always have a Razor View and a code-behind file just like web forms in the earlier. Razor Pages always works on the Single Responsibility Principle. In simple words, Razor Pages always supports MVVM (Model-View-View-Model) framework. It always provides two-way binding and a simpler development experience with isolated concerns.

 

RAZOR CLASS LIBRARY PROJECT

Razor Class Library (RCL) Projects was first introduced in ASP.NET Core 2.1 for the purpose of packaging and distributions of UI Components which can be referenced and consumed within a host web application. It is basically a library project which contains Razor pages, Razor views, controllers, view components, data models etc. RCL library can be used as a reusable component. It is a very convenient way to share any web parts code with UI elements across the multiple projects. We can also package this in the NuGet Package so that other users can install that package in their own applications and use it.

 

CREATE A RAZOR CLASS LIBRARY FOR RAZOR UI

 

Step 1

 

Open Microsoft Visual Studio 2017 and click on File --> New --> Projects.

 

 

Step 2

 

Select Razor Class Library Project Template and click the OK button.

 

Step 3

 

First, rename the folder from MyFeature to Library.

Step 4

 

Now, add a Razor Page named _ViewStart.cshtml under the Pages folder and add the below code.

@{

    Layout = "_Layout";

}

Step 5

 

Now, add a folder called Shared within the Pages folder.

Step 6

 

Now, add a new Razor Page within the Shared folder named _Message.cshtml and add the below code.

<h3>This is a Partial View</h3>
<p>This Partial view cretead as a Razor Class Library</p>

Step 7

 

Similarly, add another two Razor pages called _Login.cshtml and _Register.cshtml and then add the below code in the respective files.

 

_Login.cshtml 

<div class="container">
    <h1>Log in</h1>
    <div class="row">
        <div class="col-md-4">
            <section>
                <form id="account" method="post" novalidate="novalidate">
                    <h4>Use a local account to log in.</h4>
                    <hr>
                    <div class="text-danger validation-summary-valid" data-valmsg-summary="true">
                        <ul>
                            <li style="display:none"></li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <label for="Input_Email">Email</label>
                        <input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address."
                               data-val-required="The Email field is required." id="Input_Email" name="Input.Email" value="">
                        <span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
                    </div>
                    <div class="form-group">
                        <label for="Input_Password">Password</label>
                        <input class="form-control" type="password" data-val="true" data-val-required="The Password field is required." id="Input_Password" name="Input.Password">
                        <span class="text-danger field-validation-valid" data-valmsg-for="Input.Password" data-valmsg-replace="true"></span>
                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <label for="Input_RememberMe">
                                <input type="checkbox" data-val="true" data-val-required="The Remember me? field is required." id="Input_RememberMe" name="Input.RememberMe" value="true">
                                Remember me?
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Log in</button>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>

_Register.cshtml

<div class="container">
    <h1>Register</h1>

    <div class="row">
        <div class="col-md-4">
            <form method="post" action="/Identity/Account/Register" novalidate="novalidate">
                <h4>Create a new account.</h4>
                <hr>
                <div class="text-danger validation-summary-valid" data-valmsg-summary="true">
                    <ul>
                        <li style="display:none"></li>
                    </ul>
                </div>
                <div class="form-group">
                    <label for="Input_Email">Email</label>
                    <input class="form-control" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Input_Email" name="Input.Email" value="">
                    <span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
                </div>
                <div class="form-group">
                    <label for="Input_Password">Password</label>
                    <input class="form-control" type="password" data-val="true" data-val-length="The Password must be at least 6 and at max 100 characters long." data-val-length-max="100" data-val-length-min="6"
                           data-val-required="The Password field is required." id="Input_Password" maxlength="100" name="Input.Password" aria-autocomplete="list">
                    <span class="text-danger field-validation-valid" data-valmsg-for="Input.Password" data-valmsg-replace="true"></span>
                </div>
                <div class="form-group">
                    <label for="Input_ConfirmPassword">Confirm password</label>
                    <input class="form-control" type="password" data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="Input_ConfirmPassword"
                           name="Input.ConfirmPassword">
                    <span class="text-danger field-validation-valid" data-valmsg-for="Input.ConfirmPassword" data-valmsg-replace="true"></span>
                </div>
                <button type="submit" class="btn btn-primary">Register</button>
            </form>
        </div>
    </div>
</div>

Step 8

 

Now, open the Page1.cshtml file and add the below code.

@page

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h2>Hello from a Razor UI class library!</h2>

<partial name="_Message" />

Step 9

 

Now, if we run this page in the browser, then UI components of the _Message.cshtml file will be displayed. 

 

Step 10

 

Now similarly, add two another Razor Pages called Page2.cshtml and Page3.cshtml and the below code.

 

Page2.cshtml 

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<partial name="_Login" />

Page3.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<partial name="_Register" />

USE RAZOR CLASS LIBRARY UI IN WEB APPLICATIONS

Step 1

 

Add other projects in the current solution from File --> Add --> Add Projects.

 

Step 2

 

Select Web Application Template and Click on Ok Button

Step 3

 

Now make this project as Startup Projects from Solution Explorer.

Step 4

 

Now, select the Web Application Projects and Right Click and Select Build Dependencies --> Project Dependency.

 

Step 5

 

Now select the Razor Class Library projects as a dependency of the current projects

Step 6

 

Now again select the solution explorer and right click and select Add --> Reference.

 

Step 7

 

After selecting the Razor Class Library Projects and now click on Ok Button.

Step 8

 

Now open the _Layout.cshtml file and add the below code, 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DemoWebApp</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">DemoWebApp</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a asp-page="/Page3" asp-area="Library" class="navbar-brand">Register</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            © 2019 - DemoWebApp - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

Step 9

 

In the above code, we create a Hyperlink UI Components and link the Register page of the Razor Class Library Projects.

Step 10

 

Now run the applications and the output as below,

Step 11

 

Now, add another partial Razor View in the current projects and write down two different anchor links which will redirect to the _Login.cshtml and _Message.cshtml pages, 

<li class="nav-item">
    <a asp-page="/Page1" asp-area="Library" class="navbar-brand">Page1</a>
</li>
<li class="nav-item">
    <a asp-page="/Page2" asp-area="Library" class="navbar-brand">Login</a>
</li>

Step 12

 

Now, place this partial view components in the _Layout.cshtml. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - DemoWebApp</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">DemoWebApp</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                        <partial name="_EmbeddedView" />
                        <li class="nav-item">
                            <a asp-page="/Page3" asp-area="Library" class="navbar-brand">Register</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            © 2019 - DemoWebApp - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

Step 13

 

Now, run the applications and the output as below -

 

CONCLUSION

Now, in this article, we discussed how to implement a partial view or view component using ASP.NET Core. I hope this article will help you understand. In the next article, we will discuss how to Implement Identity Server to authorize any user. For any further query or clarification, ping me.