c# - Blazor-Server sidenav/sidebar for Identity/Account/Manage 看起来像 NavMenu.razor
问题描述
默认 Blazor 项目在 UI 方面非常不一致。对于 blazor 组件,有一个 sidenav。但是对于帐户管理/Identity/Account/Manage 没有sidenav,因为那是.cshtml 而不是.razor 页面。我知道要拥有一致的 UI,我可能必须有两个侧面导航并为它们保持完全相同的布局。不过,也许已经有一些用于 /Identity/Account/Manage 的 sidenav 示例看起来与 blazor 组件可用的完全一样?
最受欢迎的解决方案是在帐户管理 (/Identity/Account/Manage) 页面中使用现有的 blazor 导航栏 (Shared/NavMenu.razor)
解决方案
我在 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>
推荐阅读
- laravel - 在 Laravel 5.5 中显示用户头像 foreach 帖子
- coded-ui-tests - 无法运行与桌面交互的测试
- php - Laravel 5.6 Auth /admin 显示有或没有登录的空白页面
- wordpress - wordpress 上分隔行中的全宽图像(参考附件)
- javascript - 将 JSX 作为字符串变量嵌入到 React JS 中的其他 JSX 代码中
- junit4 - maven surefire-plugin 正在跳过测试
- php - 在总计之后在 Woocommerce 结帐页面中移动一行
- python - 如何自动将两种类型的数据与 csv 文件中的模式相关联?
- mysql - GroupBy 来自 Laravel 5.5 中的 HasManyThrough 多对多关系的结果
- mongodb - Mongoose 查询视图