多级导航菜单 Balzor 服务器端应用程序

Posted 2023-04-13

【中文标题】多级导航菜单 Balzor 服务器端应用程序

【英文标题】：Multi level Nav Menu Balzor server side application

【发布时间】：2021-10-07 15:58:06

【问题描述】：

在 Blazor 服务器应用程序上工作并尝试制作多级导航菜单

在共享组件 Navmenu.razor 文件下，我添加了从引导程序复制的代码

https://getbootstrap.com/docs/4.0/components/navbar/

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</li>

运行此更改后，菜单项似乎已添加到布局中，但下拉行为不起作用

进一步搜索并将 jquery 库添加到 _Host.cshtml 后，如下所示的 head 部分

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>

菜单设法显示下拉菜单的行为

是否建议在 blazor 中使用 jquery，但颜色或样式似乎被覆盖，如图所示

在 Blazor 中制作多级导航菜单真的不容易吗？

【参考方案1】：

你的问题的答案是你应该用它制作一个组件。

例如，

首先创建一个带有布尔值和字符串的组件。

然后创建一个元素并赋予它@onclick 属性。当用户点击元素时，它会触发 onclick 事件，并将布尔值切换为与原来相反的值。

最后，字符串属性跟踪布尔值并输出包含显示或隐藏特定元素所需样式的适当字符串。

CollapsableMenuItem.razor

<button @onclick="ToggleVisibility" class="btn btn-link" style="cursor:pointer;">Click me</button>
<br />
<span class="nav-item" style="@_style">
    I'm invisible until you click on the button
</span>

@code 
 private bool _collapsed;

 private string _style 
   => _collapsed ? "visibility:visible;" : "visibility:hidden;";

 public Task ToggleVisibility() 
   _collapsed = !_collapsed;
   return Task.CompletedTask;
 

我创建了这个 .NET Fiddle 来查看它的实际效果：

https://blazorfiddle.com/s/229e32g4

【讨论】：

菜单似乎工作正常，但仍不确定如何使用这种方法处理所选菜单类等样式？

另外，如果我们必须保留 2 个或更多类别的子菜单，我们就不能保留更多变量

【参考方案2】：

正如 Dennis 所提到的，您可以使用它构建一个组件。 但是，如果您对 bootstrap 提供的基本功能感到满意，请继续使用它。我已经广泛使用它，没有任何问题。还有，

在 Blazor 中使用 javascript 并没有什么坏处。很多图书馆一直在使用它。对于某些浏览器交互（页面刷新、获取视口大小等），您必须使用 JavaScript。 如果您使用引导程序 5，则没有 jQuery。它是纯 JavaScript 最重要的是，在 blazor 中正确制作动画很痛苦。虽然您可以在 blazor 中轻松获得核心折叠/展开功能，但动画却很棘手。

最后，您的样式很不稳定，因为与 Visual Studio 模板捆绑在一起的 nav-link 和 bootstrap 中所述的 nav-link 之间的样式存在冲突。保留您的选择之一。您将在菜单组件的 razor 文件下找到模板 css。删除或标记 !important，具体取决于您要保留的样式。

【讨论】：

任何想使用像 mudblazor.com 或 matblazor.com 这样的库或类似的库，这些库目前是免费开源的时间

我不这么认为。这些库是由非常了解 Blazor 的人编写的。这些肯定比初学者自己写作更有效率！唯一的问题是，有时 UI 组件无法满足您的特定要求。但这适用于任何框架上的任何 UI 库，而不仅仅是 Blazor。

我支持@MayurEkbote 的观点，并添加以下内容：Blazor 旨在作为开发人员创建可重用 UI 组件的一种方式。如果您要使用可用的库，请仅在您自己无法做到时才这样做。如果您可以构建自己的组件并且使用库可以防止初学者学习更熟练地使用 Blazor，那么将会获得很大的好处。此外，社区开发的图书馆很容易发生变化，并且可能只有少数几个可以持续多年。您不希望生产应用程序中的库突然停止支持。

我觉得 blazor 的纯粹形式落后于很多东西，无法盲目使用它们。几个示例：导航栏的下拉菜单、具有可搜索功能的选择下拉菜单、对对话框的支持以及许多最常见的用例

我很久以前就提出过这个问题，但是 Blazor 的 PM 断然拒绝构建任何这样的东西。从他们的角度来看，它是一个 UI 管理框架。他们希望第三方照顾特定的市场需求。 github.com/dotnet/aspnetcore/issues/23559