How to use Razor class library inside a ASP.NET Core application

Question

I wrote a simple Razor class library as following

Areas/Library/Pages/_ViewStart.cshtml

@{
    Layout = "_Layout";
} 

Areas/Library/Pages/Shared/_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>

Areas/Library/Pages/Shared/_Message.cshtml

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

Areas/Library/Pages/Shared/_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>

Areas/Library/Pages/Page1.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<h2>Hello from a Razor UI class library!</h2>
<partial name="_Message" />

Areas/Library/Pages/Page2.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<partial name="_Login" />

Areas/Library/Pages/Page3.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<partial name="_Register" /> 

After that, I added it as a dependency to a new web app project, and I changed the Layout

WebApp Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <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-controller="Home" asp-action="Index">WebApplication1</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-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a asp-page="/Page3" asp-area="Library" class="nav-link text-dark" >Register</a>
                        </li>
                        <li class="nav-item">
                            <a asp-page="/Page1" asp-area="Library" class="nav-link text-dark" >Page1</a>
                        </li>
                        <li class="nav-item">
                            <a asp-page="/Page2" asp-area="Library" class="nav-link text-dark" >Login</a>
                        </li>

                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - WebApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

So, As you can see, I added the below code to the default layout

<li class="nav-item">
    <a asp-page="/Page3" asp-area="Library" class="nav-link text-dark" >Register</a>
</li>
<li class="nav-item">
    <a asp-page="/Page1" asp-area="Library" class="nav-link text-dark" >Page1</a>
</li>
<li class="nav-item">
    <a asp-page="/Page2" asp-area="Library" class="nav-link text-dark" >Login</a>
</li>

The result is looking good

But the razor pages does not work.

There is no content available by clicking, Can anyone help to find out the problem?

Sample Repository: RazorCL

Answer 1

The issue is related that you didn't configure the routing for the Razor page. From your source code, we can see that in the Razor class library, you are creating some Razor pages, and in the WebApplication1, it just configures the MVC routing, without the Razor page routing. So, it will cause this issue.

To solve it, try to register the Razor page routing in the WebApplication1's Startup.cs file:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();   //razor page routing
        services.AddControllersWithViews();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();   //razor page routing
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }

Then, the screenshot as below: