blazor 相关问题

如何在 Blazor 中设置“导航项处于活动状态”？

我正在使用 Blazor 和 Bootstrap 构建应用程序。我想使用标准引导导航栏。我不知道如何将“active”类添加到所选的 标签中。 这…… 我正在使用 Blazor 和 Bootstrap 构建应用程序。我想使用标准引导导航栏。我不知道如何将“活动”类添加到所选的 <li> 标签中。 这是我的代码： <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink> </li> <li class="nav-item"> <NavLink class="nav-link" href="/counter" Match="NavLinkMatch.All">Counter</NavLink> </li> <li class="nav-item"> <NavLink class="nav-link" href="/fetchdata" Match="NavLinkMatch.All">Fetch data</NavLink> </li> </ul> </div> 内置的 <NavLink> 是一个 blazor 组件，它会自动更改 <a/> 的类。但由于我使用引导导航栏，我需要将“active”添加到所选<li>的类中。 链接处于活动状态时应如下所示： <li class="nav-item active"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink> </li> 您可以使用导航管理器： <li class="nav-item @GetActive("", NavLinkMatch.All)"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink> </li> @code { [Inject] NavigationManager NavigationManager { get; set; } protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged(); bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) { var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower(); return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower()); } string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? "active" : ""; } 您应该能够使用自定义模板来实现此目的： <NavLink href="/myhref"> <Template> <li class="@(context.isActive ? "active" : string.Empty)"> <a href="@context.href">@context.content</a> </li> </Template> My link description </NavLink> 来源 您可以使用 Bootstrap NavBar 和 Blazor 的 NavLink，而无需添加任何其他代码。需要注意的是，根据 Bootstrap 的文档，您的“活动”类将添加到 <a> 标签中，而不是添加到 <li> 标签中。 来自 Bootstrap 5.x 文档（导航栏的初始示例）： <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> 考虑到这一点，Blazor NavLink 组件替换了 <a> 标签： <li class="nav-item"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <span class="oi oi-home" aria-hidden="true"></span> Home <hr /> </NavLink> </li> <li class="nav-item"> <NavLink class="nav-link" href="/Reporting" Match="NavLinkMatch.All"> Reporting <hr /> </NavLink> </li> 最后，一旦就位，您可以添加自己的 CSS 来进一步修改外观： .nav-link > hr { visibility: hidden; color: white; height: 2px; margin-top: 4px; margin-bottom: 0; } .nav-item .nav-link.active > hr { visibility: visible; filter: blur(1.5px); } 无需其他代码。 在我的示例中，活动菜单项下将出现一条模糊的线，如下所示（注意，需要额外的 HTML/CSS 才能实现完整的视觉效果）： 你也可以只使用CSS。 <div class="nav-item"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <DashboardIcon /><span>Home</span> </NavLink> </div> ::deep .nav-item:has(a.active) { background-color: blue; } 这不需要单独的 C# 函数。如果您使用后面的代码，还可以在 css 中使用 ::deep，以便 Blazor 知道查看 CSS 样式的 NavLink 我知道这个问题已经解决了，只是想我会用我的解决方案添加答案 附注这是我第一次关于堆栈溢出的回复:)

尝试连接字符串时，出现表达式树不能包含引用结构值或受限类型错误

我有一种方法，可以从数据库中提取数据，然后将其分配给模型以在其他地方使用。我从数据库中以不同参数获取地址详细信息，如下所示。连接时...

使用 HttpContext 时 Blazor 抛出错误

我想在用户打开网站时获取当前的Windows用户名。我的应用程序使用 Blazor 服务器端。为了获取当前用户名，我添加了： 在startup.cs中： services.AddHttpContextAccessor(); （不...

Blazor Wasm 无法注册为共享内容目标

我创建了一个新的 Blazor WebAssembly 独立应用程序，并将下一个代码添加到清单中，以便将其注册为 csv 文件的共享内容目标： “共享目标”：{ “行动”...

MudBlazor - MudTextField 自动向上增长

我正在尝试构建一个类似 MudBlazor 应用程序的 ChatGPT。 我的代码（对于游乐场，请点击此处）： 我正在尝试构建一个像 MudBlazor 应用程序一样的 ChatGPT。 我的代码（对于游乐场，请点击此处）： <MudLayout> <MudAppBar Elevation="1"> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start"/> <MudSpacer /> <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /> </MudAppBar> <MudDrawer Open="true" Elevation="2"> <MudDrawerHeader> <MudText Typo="Typo.h5" Class="mt-1">APP</MudText> </MudDrawerHeader> </MudDrawer> <MudMainContent> <MudGrid Spacing="0"> <MudItem xs="12"> <MudGrid Spacing="0" Style="height: calc(90vh - var(--mud-appbar-height)); max-height: calc(90vh - var(--mud-appbar-height));"> <MudItem xs="2" Style="background-color: yellow"></MudItem> <MudItem xs="8" Style="background-color: red"></MudItem> <MudItem xs="2" Style="background-color: yellow"></MudItem> </MudGrid> </MudItem> <MudItem xs="12"> <MudGrid Spacing="0" Style="height: 10vh; max-height: 10vh;"> <MudItem xs="2" Style="background-color: purple"></MudItem> <MudItem xs="8" Style="background-color: green"> <MudTextField T="string" Placeholder="Type a message..." Variant="Variant.Filled" AutoGrow MaxLines="14" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ArrowCircleUp" /> </MudItem> <MudItem xs="2" Style="background-color: purple"></MudItem> </MudGrid> </MudItem> </MudGrid> </MudMainContent> </MudLayout> 看起来像这样： 绿色区域有一个 MudTextField，且 AutoGrow 已启用。 但是当输入增长时，它会向下增长，这导致它变得比初始高度更大，并且滚动条出现在一侧，看起来很尴尬。 有没有办法让它向上生长？ 如果黄色和红色区域因此变小，这是可以的，甚至是可取的 MudGrid的第二行无处可去，因为您已经根据样式集给了第一行固定的高度： <MudItem xs="12"> <MudGrid Spacing="0" Style="height: calc(90vh - var(--mud-appbar-height)); max-height: calc(90vh - var(--mud-appbar-height));"> <MudItem xs="2" Style="background-color: yellow"></MudItem> <MudItem xs="8" Style="background-color: red"></MudItem> <MudItem xs="2" Style="background-color: yellow"></MudItem> </MudGrid> </MudItem> 您可能最好在列模式下使用 Flexbox，每个功能有两个 div。第一个 div 根据垂直高度的剩余部分调整其大小和内容。包含 div 的第二个 MudTextField 的大小由 TextField 高度决定。 使用像这样的css类可能会有所帮助： .column-container { display: flex; flex-direction: column; /* Usually you need a fixed height or parent container height to allow flex items to size correctly */ height: 100vh; } .fill-space { /* This tells the first div to take the leftover vertical space. */ flex: 1 1 auto; overflow: auto; /* if scrolling is desired when content exceeds the available space */ } .auto-content { /* flex: 0 1 auto is often the default, so this class might be just for clarity or for additional styling. It will size to fit its content and can shrink if necessary. */ flex: 0 1 auto; }

首次登录 Blazor WASM 后如何获取访问令牌？

我正在使用开箱即用的 Blazor WebAssembly 身份验证库构建一个 .Net 9 Blazor 独立 WASM 应用程序，该应用程序以 VS2022 中的 Blazor 模板为模式，并配置为 Auth0 作为 IdP。预...

我怎样才能看到哪个代码正在设置我的组件参数属性

我有一个关于 Blazor 组件的参数设置生命周期的一般性问题。 我在我的组件上进行了普通的双向绑定。 当我测试这个绑定时，首先看起来

在 .NET 9 中托管 Blazor WASM (PWA)

.NET 7 有一个模板，可以创建托管在常规 Web 应用程序内的 Blazor WebAssembly 应用程序。这种设置的优点是所有客户端代码都在客户端运行，...

为什么 blazor select/inputselect 在新应用程序中不起作用？

我刚刚创建了一个新的 .net blazor Web 应用程序项目并添加了此代码 @使用系统诊断 下拉示例 我刚刚创建了一个新的 .net blazor Web 应用程序项目并添加了此代码 @using System.Diagnostics <h3>Dropdown Example</h3> <select @bind="SelectedSet" @bind:event="oninput" class="form-select"> <option disabled selected value="">-- Select a Set --</option> @foreach (var set in Sets) { <option value="@set">@set</option> } </select> <p>You selected: @SelectedSet</p> @code { private List<string> Sets = new List<string> { "Pad", "Leather", "Bronze" }; private string SelectedSet { get; set; } protected override void OnParametersSet() { base.OnParametersSet(); Debug.WriteLine($"Selected value is now: {SelectedSet}"); } } 我也尝试过 onchange @using System.Diagnostics <h3>Dropdown Example</h3> <select @bind="SelectedSet" @onchange="OnSetChanged" class="form-select"> <option disabled selected value="">-- Select a Set --</option> @foreach (var set in Sets) { <option value="@set">@set</option> } </select> <p>You selected: @SelectedSet</p> @code { private List<string> Sets = new List<string> { "Pad", "Leather", "Bronze" }; private string SelectedSet { get; set; } private void OnSetChanged(ChangeEventArgs e) { Debug.WriteLine($"Selected value changed to: {SelectedSet}"); // Additional logic can be added here } } 但是当我在方法上设置断点时，它就不起作用了 我不明白为什么该事件没有触发。起初我使用了枚举，我认为这是因为这个，但对于一个简单的字符串它仍然不起作用 您的（第一个）代码应该已经可以工作了。如果没有，您可能没有设置交互性。将此行添加到文件顶部： @rendermode InteractiveServer UI 应随选择而更新。但请注意，OnParametersSet() 不是一个有用的地方来跟踪这一点，我希望 Debug.WriteLine() 只发生一次。

Blazor EditForm 提交到浏览器 POST 端点

我在旧式 ASP.NET MVC 应用程序中有一个 EditForm 作为交互岛。 我希望它提交到通常的 POST 端点，作为旧的纯 HTML 表单，浏览器重定向到结果等等，...

Mud Blazor 数据网格过滤器用于日期时间列

当日期选择器的工具栏在日期时间列过滤器的数据网格中显示为简单过滤模式时，有没有办法关闭它的工具栏？如何使其也可编辑？基本上想要...

Blazor：组件重新渲染后调用 OnInitialized

我和我的同事面临这样的问题：当调用根组件的 StateHasChanged 时，会重新创建 blazor 组件（我们称之为 View）。所以，此时 View 的 OnInitialized 方法是

Blazor WASM - 服务器的组件状态丢失

我需要能够与在我的页面之一内运行的 blazor wasm 客户端共享来自我的主机应用程序的身份验证令牌。主站点使用 Open Id（是身份服务器）。 我已经读过并且非常...

是否可以对数据网格中动态创建的列执行过滤？

我正在使用 MudBlazor DataGrid，需要实现过滤功能。 DataGrid中的列是根据数据动态生成的，所以我想知道是否可以应用...

Blazor Web assembly 项目、ASP.NET Core 3.1 中未命中断点，

在 ASP.NET Core 3.1、Blazor Web assembly 项目中未命中断点。 我有一个包含在本地运行的单个 Blazor Webassemble 项目的解决方案。 在 .cs 文件中放置断点时...

我们如何引用 HeaderTemplate 来使用 QuickGrid 的 RenderFragment 指定 HTML？

我们在 VS-2022 中有一个 .net-8 C# Blazor 项目，其中包含许多 QuickGrid。 我想使用 HeaderTemplate 为 PropertyColumn 的标题文本放置 HTML 和样式，该模板将覆盖“

使用 Blazor 的简单可扩展表格

我想在 Blazor WebAssembly 中创建一个简单的可扩展表。我添加了一些 HTML 代码，如下所示： &... 我想在 Blazor WebAssembly 中创建一个简单的可扩展表。我添加了一些 HTML 代码，如下所示： <table class="table table-hover"> <thead> <tr> <th>#</th> <th>User</th> <th>Date</th> <th>Status</th> <th>Reason</th> </tr> </thead> <tbody> <tr data-widget="expandable-table" aria-expanded="false"> <td>183</td> <td>John Doe</td> <td>11-7-2014</td> <td>Approved</td> <td>Lorem Ipsum is simply dummy text</td> </tr> <tr class="expandable-body"> <td colspan="5"> <p> Lorem Ipsum is simply dummy text </p> </td> </tr> </tbody> </table> 如果我点击包含详细信息的行，它也总是会折叠。有没有一种不使用外部组件的简单方法来实现它？如果没有，您推荐什么组件？ 我所说的“可扩展表”的一个例子是这里。 我想出了一个基于来自 Blazor 服务器模板的默认“WeatherForecast”的解决方案。 基本思想是在模型中放置一个用于表示表数据的标志。 WeatherForecast.cs public class WeatherForecast { public DateTime Date { get; set; } public int TemperatureC { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); public string Summary { get; set; } //new fields added below public bool IsRowExpanded { get; set; } = false; public string ExpandableContent { get; set; } = "Lorem Ipsum"; } FetchData.razor <table class="table"> <thead> <tr> <th>Date</th> <th>Temp. (C)</th> <th>Temp. (F)</th> <th>Summary</th> </tr> </thead> <tbody> @foreach (var forecast in forecasts) { <tr @onclick="() => forecast.IsRowExpanded = !forecast.IsRowExpanded"> <td>@forecast.Date.ToShortDateString()</td> <td>@forecast.TemperatureC</td> <td>@forecast.TemperatureF</td> <td>@forecast.Summary</td> </tr> if (forecast.IsRowExpanded) { <tr>@forecast.ExpandableContent</tr> } } </tbody> </table> 当您单击一行（例如第二行）时，它将如下所示： 使用 Bootstrap，内置的 jQuery/JavaScript 代码不会像传统 MVC 页面那样开箱即用。 如果您想展开/折叠行，Blazor 有两个选项。 通过将 IJSRuntime 注入页面并调用 InvokeAsync() 来调用 Bootstrap jQuery/JavaScript。 编写您自己的展开/折叠组件并将每一行包含在其中 - 就像 // CollapsibleTableRow. <tr @onclick=Toggle> @if(_show) { @ChildContent } </tr> @code { [Parameter] public RenderFragment ChildContent { get; set; } private bool _show { get; set; } = false; private void Toggle() { _show = !_show; } } 使用 <table> <tbody> @foreach(var item in items) { <CollapsibleTableRow> <td>@item.Thing</td> <td>@item.Thing2</td> </CollapsibleTableRow> } </tbody> </table> 更新了答案。 我添加了一个小类以使其更容易。 神奇之处在于我所说的“状态载体变量”，它允许您将打开状态设为 Person 类的属性，而不是添加单独的列表来跟踪哪些行已打开或未打开。 打字花了一些时间，所以如果您喜欢的话请记得标记为“已回答”。 @page "/collapse" <table class="table"> <thead> <tr style="cursor:pointer;"> <th>#</th> <th>User</th> <th>Date</th> <th>Status</th> <th>Reason</th> </tr> </thead> <tbody> @foreach (Person person in People) { <tr style="cursor:pointer" @onclick="()=>person.opened=!person.opened"> <td>@person.id</td> <td>@person.name</td> <td>@person.birthday.ToString("dddd MMMM d, yyyy")</td> <td>@(person.approved ? "Approved" : "Denied")</td> <td>@person.reason</td> </tr> @if (person.opened) { <tr> <td colspan="5"> <p> Lorem Ipsum is simply dummy text </p> </td> </tr> } } </tbody> </table> @code { class Person { public int id; public string name; public DateTime birthday; public bool approved; public string info; public string reason; public bool opened; // I call this a state carrier, because it's not really data. public Person(int ID, string Name, DateTime Birthday, bool Approved, string Reason) { id = ID; name = Name; birthday = Birthday; approved = Approved; reason = Reason; } } List<Person> People = new List<Person>(); protected override void OnInitialized() { People.Add(new Person(183, "John Doe", new DateTime(2014, 7, 11), true, "Good worker.")); People.Add(new Person(184, "Benjamin", new DateTime(1999, 9, 9), false, "Types too much.")); People.Add(new Person(1, "Jesus", new DateTime(1, 1, 1), true, "Really nice guy.")); } } 我在需要执行此操作的地方选择的模式是使用泛型并包装底层数据类型以添加 UI 特定功能。 泛型类的定义如下所示。 public class ExpandableItem<T> { private readonly T _item; private bool _expanded; public ExpandableItem(T item) { _item = item; } public T Item { get => _item; } public bool IsExpanded{ get; set; } } 初始化看起来像这样： List<ExpandableItem<Person>> People = new(); protected override void OnInitialized() { People.Add(ExpandableItem<Person>(new Person(183, "John Doe", new DateTime(2014, 7, 11), true, "Good worker."))); } 这导致绑定看起来有点像这样： @foreach (ExpandableItem<Person> item in People) { var person = item.Item; <tr style="cursor:pointer" @onclick="()=>item.IsExpanded=!item.IsExpanded"> <td>@person.id</td> <td>@person.name</td> </tr> @if (item.IsExpanded) { <tr> <td colspan="5"> <p>Lorem Ipsum is simply dummy text</p> </td> </tr> } } 这样做是我能想到的最好方法，可以确保来自 API 端点的 DTO 对象保持干净的 UI 状态属性。我发现它还确保了页面之间的一致性，因为具有可选择/可扩展行的要求在许多基础类型中很常见。 <tr> <td class="oi oi-elevator" @onclick="@(() => ToggleDetails(@report.EventId))"/> </tr> <tr style="@(_eventIds.Contains(report.EventId) ? "display:table-row;" : "display:none;")"> <td colspan="6"> <EventGridDetail _status=report.Status/> </td> </tr> private void ToggleDetails(string eventId) { if (_eventIds.Contains(eventId)) _eventIds.Remove(eventId); else _eventIds.Add(eventId); }

模块对象在 .NET 6 Blazor WASM 项目中可用，但在升级后的 .NET 8+ 中不可用

我在.NET 6中有一个工作项目，它调用以下JS代码： 导出函数synchronizeFileWithIndexedDb（文件名）{ 返回新的 Promise((res, rej) => { const db = window.ind...

使用分布式缓存缓存用户单点登录

我目前正在实现启用了 Azure B2C 单点登录的 blazor 服务器应用程序。登录功能运行良好，只是当应用程序运行时用户状态会丢失

将基本标记从 Blazor 服务器中的 _Host.cshtml 迁移到 Blazor Web 中的 App.razor

我最近将应用程序从 .NET 7 升级到 .NET 8，并面临与基本标签相关的问题，该标签之前在 _Host.cshtml 中使用标签帮助器语法使用： 我最近将应用程序从 .NET 7 升级到 .NET 8，并面临与基本标签相关的问题，该标签之前在 _Host.cshtml 中使用标签帮助器语法：<base href="~/" />。此设置运行良好，适用于开发和生产环境： 开发：该应用程序运行于 https://localhost:port。 生产：发布到 IIS 站点后，该应用程序可在 https://server/app 下使用。 在.NET 8 Blazor Web中，项目结构发生了变化，所以我也想使用App.razor。但是，我在按照迁移文档设置 <base href="/app/" /> 时遇到问题。与之前版本中的标签助手不同，此方法使用静态值。此外，我还面临着区分大小写的问题，导航到 https://server/App（注意大写“A”）会导致 404 错误。 如何在新的 .NET 8 _Host.cshtml 模型中复制 .NET 7 App.razor 的动态基本 URL 行为，以确保我的应用程序在开发和生产环境中无缝运行？ 我已阅读： https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-8.0&tabs=visual-studio 仅在 Blazor Web 应用程序中覆盖生产的基本路径（.NET 8 中的 _Hosts.cshtml 文件功能？） https://learn.microsoft.com/en-us/aspnet/core/migration/70-80?view=aspnetcore-8.0&tabs=visual-studio#convert-a-blazor-server-app-into-a -blazor-web-app 我尝试使用app.UsePathBase("/app");但没有成功。 来自这篇文章：https://stackoverflow.com/a/78353968/8031370 在 App.razor 中： <base href="@BaseUrl" /> 在 App.razor 底部添加： @code { [CascadingParameter] private HttpContext HttpContext { get; set; } = null!; private string BaseUrl => $"{HttpContext.Request.PathBase}/"; }