Blazor-Server sidenav/sidebar for Identity/Account/Manage 看起来像 NavMenu.razor答案

【问题标题】：Blazor-Server sidenav/sidebar for Identity/Account/Manage that looks like NavMenu.razorBlazor-Server sidenav/sidebar for Identity/Account/Manage 看起来像 NavMenu.razor
【发布时间】：2021-11-29 07:02:56
【问题描述】：

默认 Blazor 项目在 UI 方面非常不一致。对于 blazor 组件，有一个 sidenav。但是对于帐户管理 /Identity/Account/Manage 没有 sidenav，因为那是 .cshtml 而不是 .razor 页面。我知道要拥有一致的 UI，我可能必须有两个侧面导航并为它们两者保持完全相同的布局。不过，也许已经有一些用于 /Identity/Account/Manage 的 sidenav 示例看起来与 blazor 组件可用的完全一样？

最受欢迎的解决方案是在帐户管理 (/Identity/Account/Manage) 页面中使用现有的 blazor 导航栏 (Shared/NavMenu.razor)

【问题讨论】：

...一个 cshtml 页面可以托管一个 razor 组件，比如你的 Blazor 菜单
@MisterMagoo 你能帮我吗，假设我的侧导航是 Shared/NavMenu.razor 我应该将

添加到：Areas\ Identity\Pages\Account\Manage_Layout.cshtml ?
以这种方式添加
@(await Html.RenderComponentAsync(RenderMode.ServerPrerendered))
不起作用。
看看component标签助手：docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/…

标签： c# user-interface blazor blazor-server-side

【解决方案1】：

我在 GitHub 上针对您的示例创建了一个 PR。更改的是 Identity 使用的 _Layout.cshtml - 它并不完美，但显示了技术。

_Layout.cshtml

@using Microsoft.AspNetCore.Hosting
@using Microsoft.AspNetCore.Mvc.ViewEngines
@inject IWebHostEnvironment Environment
@inject ICompositeViewEngine Engine
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - BlazorAuthTemplate</title>
    <base href="~/" />
    <link rel="stylesheet" href="~/Identity/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/Identity/css/site.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
  <app>
    <div class="sidebar">
      <component type="typeof(BlazorAuthTemplate.Shared.NavMenu)" render-mode="ServerPrerendered" />
    </div>
    <div class="main">
        <div class="top-row px-4 auth">
            <div class="d-sm-inline-flex flex-sm-row-reverse">
                @{
                    var result = Engine.FindView(ViewContext, "_LoginPartial", isMainPage: false);
                }
                @if (result.Success)
                {
                    await Html.RenderPartialAsync("_LoginPartial");
                }
                else
                {
                    throw new InvalidOperationException("The default Identity UI layout requires a partial view '_LoginPartial' " +
                        "usually located at '/Pages/_LoginPartial' or at '/Views/Shared/_LoginPartial' to work. Based on your configuration " +
                        $"we have looked at it in the following locations: {System.Environment.NewLine}{string.Join(System.Environment.NewLine, result.SearchedLocations)}.");
                }
            </div>
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
        <main role="main" class="content px-4 pb-3">
            @RenderBody()
        </main>
    </div>
    </app>
    <script src="~/Identity/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/Identity/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
    <script src="/_framework/blazor.server.js"></script>
</body>
</html>

【讨论】：