如何在 ASP.NET Core 应用程序中使用 Razor 类库答案

【问题标题】：How to use Razor class library inside a ASP.NET Core application如何在 ASP.NET Core 应用程序中使用 Razor 类库
【发布时间】：2020-10-18 10:23:38
【问题描述】：

我写了一个简单的 Razor 类库如下

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" />

之后，我将其作为依赖项添加到一个新的 Web 应用项目中，并更改了布局

WebApp 布局

<!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>

所以，如您所见，我将以下代码添加到默认布局中

<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>

结果看起来不错

但是剃须刀页面不起作用。

点击没有可用的内容，谁能帮忙找出问题？

示例存储库： RazorCL

【问题讨论】：

标签： c# asp.net-core razor

【解决方案1】：

问题与您没有为 Razor 页面配置路由有关。从您的源代码中我们可以看到，在Razor类库中，您正在创建一些Razor页面，而在WebApplication1中，它只是配置了MVC路由，没有Razor页面路由。所以，它会导致这个问题。

为了解决这个问题，尝试在WebApplication1的Startup.cs文件中注册Razor页面路由：

    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?}");
        });
    }

然后，截图如下：

【讨论】：