- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
由于有大量“Blazor 在 X 之后没有更新”问题被问到,我对发布此内容犹豫不决。我得出的结论是,这是许多问题的常见错误。因此,在概述我的问题之前,我将首先简要描述我所尝试的内容。
调用StateHasChanged();
虽然可能更多的是一种变通方法,而不是一个优雅的解决方案。这或许仍是暂时的答案。然而,我已经将此函数调用放置在一系列地方,我确信它会正确执行,但事实并非如此。
这是一个演示 gif。正如您可以清楚地看到的,URL 将会更改,但页面不会刷新,直到我手动执行此操作。刷新后一切都按预期进行。 Demonstration
这是我的 Index.blazor
@page "/"
@page "/{categoryurl}"
@inject ICategoryService CategoryService;
@using System.Security.Cryptography.X509Certificates
@if (category != null)
{
<h1>Welcome to the @category.Name Section!</h1>
<ProductList CategoryId="@category.Id" />
}
else
{
<h1>Welcome to MyExampleWebsite</h1>
<ProductList />
}
@code
{
[Parameter]
public string CategoryUrl { get; set; }
private Category category = null;
protected override void OnInitialized()
{
if (CategoryUrl != null)
{
category = CategoryService.Categories.FirstOrDefault(c => c.Url.ToLower().Equals(CategoryUrl.ToLower()));
StateHasChanged();
}
else
{
category = null;
}
}
}
这是我的 NavMenu.Blazor
@inject ICategoryService CategoryService
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">My example Blazor</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="dropdown-divider"></li>
@foreach (var category in CategoryService.Categories)
{
<li class="nav-item px-3">
<NavLink class="nav-link" href="@category.Url" onClick="">
<span class="oi <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5cacc88e5c6c4d1c0c2cad7dc8becc6cacb" rel="noreferrer noopener nofollow">[email protected]</a>" aria-hidden="true"></span> @category.Name
</NavLink>
</li>
}
@*Counter Page*@
@*<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
/*Fetch Data From server Page*/
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>*@
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
protected override void OnInitialized()
{
CategoryService.LoadCategories();
}
}
这是我的类别
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
public string Url { get; set; }
public string Icon { get; set; }
public List<Product> Products { get; set; }
}
最佳答案
您必须在 blazor 生命周期事件 OnParametersSet{Async} Lifecycle events 上调用服务
因为 OnInitialized 仅在第一次渲染时运行。
protected override void OnParametersSet()
{
CategoryService.LoadCategories();
}
关于c# - 单击 NavMenu 时 Blazor 不会更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69027415/
有没有办法在 Blazor 应用程序中最小化(隐藏)默认侧边栏(导航菜单)。我确实使用 .Net core 3.1 模板创建了 blazor 应用程序。主要布局看起来像 @inherits Layou
新的.. 当我开始写这个问题时,下面显示了一些“这可能会回答我的问题”的问题,但他们似乎没有解决这个问题。 在控制台中我收到以下警告: warning.js:36 Warning: Each chil
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SS
我正在使用 Element UI NavMenu与 :router="true" .当我单击菜单链接(路由更改和事件菜单项更改)时,它工作正常。我遇到的问题是,当我单击浏览器导航按钮( back 和
由于有大量“Blazor 在 X 之后没有更新”问题被问到,我对发布此内容犹豫不决。我得出的结论是,这是许多问题的常见错误。因此,在概述我的问题之前,我将首先简要描述我所尝试的内容。 调用StateH
由于有大量“Blazor 在 X 之后没有更新”问题被问到,我对发布此内容犹豫不决。我得出的结论是,这是许多问题的常见错误。因此,在概述我的问题之前,我将首先简要描述我所尝试的内容。 调用StateH
我在 VS2017 中使用 Angular 创建了一个 ASP.Net Core Web 应用程序。初始应用程序单词按我想要的方式包装。但是,在我添加了一些 HTML 和样式之后,当显示左侧面板时,自
我正在尝试基于 vue.js 和 element-ui 组件制作响应式 SPA。它具有开箱即用的响应式布局并且工作正常,但我不知道如何使 NavMenu (el-menu) 组件向上移动或隐藏在移动设
我有一个标准的 blazor 项目,它具有以下组件: -> MainLayout.razor -> NavMenu.razor -> Pages/Index.razor -> Pages/Sub1.r
我正在使用下划线主题和 Bulma CSS 框架构建一个基本的 WordPress 网站。 我试图只包含在移动设备上打开/关闭导航菜单所需的基本 JavaScript 代码,但它不起作用(可能是因为我
我正在尝试创建一个形状像这样的 blazor 导航菜单 项目a 项目b 当我单击项目 b 时,它会展开子菜单,如下所示,单击子项目,将打开新页面 项目a 项目b 子项目 1 子项目 2 我刚刚编辑了原
我在我的网页中进行了三级分类。每篇文章都按“节”->“类别”->“子类别”进行浏览。节表有section_id 和sectionname 字段。类别表有category_id、section_id、类
给定一个“默认”Blazor 应用程序 - 使用 Visual Studio 2019 Blazor 服务器模板创建。如何创建可从所有 Razor 页面和组件访问的 GLOBAL 对象。 如何使“当前
我是一名优秀的程序员,十分优秀!