blazor 相关问题

我无法在 blazor 应用程序中调用 C# 函数

我正在尝试构建一个登录页面，但是当我尝试添加一些 C# 代码将眼睛图标从关闭更改为打开时。这是为了显示密码。问题是我认为我的 C# 代码不适合...

Blazor Web App (.NET 8)：如何在 WebAssembly 渲染的页面上使用服务器渲染的组件？

假设我在 Blazor Web 应用程序 (.NET 8) 中有一个 WebAssembly 渲染的页面： @page“/计数器” @rendermode InteractiveWebAssembly 柜台 计数... 假设我在 Blazor Web 应用程序 (.NET 8) 中有一个 WebAssembly 渲染的页面： @page "/counter" @rendermode InteractiveWebAssembly <PageTitle>Counter</PageTitle> <h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> <ServerSideComponent></ServerSideComponent> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } 我有一个带有服务器端渲染的 Razor 组件： @rendermode InteractiveServer <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } 有没有办法在 WebAssembly 渲染的页面上拥有服务器端渲染的 blazor 组件？我希望页面在 WebAssembly 中呈现，组件在服务器上呈现。 当我尝试这样做时，我得到了这个异常： Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：无法创建“BlazorApp4.Client.ServerSideComponent”类型的组件，因为其 渲染模式 'Microsoft.AspNetCore.Components.Web.InteractiveServerRenderMode' 是 WebAssembly 渲染不支持。系统不支持异常： 无法创建类型的组件 'BlazorApp4.Client.ServerSideComponent' 因为它的渲染模式 'Microsoft.AspNetCore.Components.Web.InteractiveServerRenderMode' 是 WebAssembly 渲染不支持。 如果您使用 @rendermode InteractiveWebAssembly，则无法使用服务器上定义的组件。最好的方法是拥有一个具有默认行为的页面（未指定渲染模式，因此它将使用服务器端渲染），然后从该页面调用这两个组件。 然后你可以定义组件的渲染模式，如下所示： @page "/counter" <PageTitle>Counter</PageTitle> <ClientSideComponent @rendermode=WebAssemblyInteractive /> <ServerSideComponent @rendermode=ServerInteractive /> @code { // ... } 请考虑到您的ServerSideCompoenent也必须位于客户端项目中，并且无法访问任何服务器资源（例如数据库）。如果您需要访问服务器资源，您必须在服务器端项目中创建一个控制器，并从客户端组件作为 Web API 请求调用它。

MudBlazor MudChipSet - 如何以编程方式设置选定的 MudChip？

我在 MudChipSet 中使用了几个 MudBlazors MudChip。确切的数量根据列表的长度而变化（在 MudChip 上创建该列表中的每个对象）。 现在我想选择这些选项之一...

Blazor 8.0 - 使用 DataAnnotationValidator 和 ValidationSummary 的问题

我目前正在按照教程学习 Blazor（我正在使用 8.0）。 我有一个 MessageWall.razor 文件，其中包含： @页面“/MessageWall” 留言墙 ...

Blazor - 如何防止自定义组件在基础组件中渲染

我在 Blazor 中开发了一些组件。它们都继承自BaseComponent。 公共抽象类 BaseComponent : ComponentBase { [范围] 公共布尔可见{获取;放; } ...

Razor 页面组件 OnParametersSetAsync 在其父组件发生更改后不刷新

我有一个名为 _Upsert 页面的 razor 页面，它接受一个参数，并通过调用子组件并通过它传递值来将值传递给子组件。通常它应该更新

Blazor：子 Editform 上的嵌套 Editform 验证

我有一个 blazor 服务器大小应用程序，其中在 Editform 中有一个 Editform。它看起来像这样： 我有一个 blazor 服务器大小应用程序，其中有一个编辑表单内的一个编辑表单。看起来像这样： <EditForm Model=@newPerson Context="PersonForm" OnValidSubmit="@FormSubmitted"> <ValidationSummary /> <div class="form-row"> <h4>Staff Information</h4> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="ResourceId">Person Id</label> <InputText @bind-Value=newPerson.ResourceId class="form-control" id="ResourceId" /> </div> <div class="form-group col-md-2"> <label for="Title">Title</label> <InputText @bind-Value=newPerson.Title class="form-control" id="Title" /> </div> <div class="form-group col-md-2"> <label for="Forename">Forename</label> <InputText @bind-Value=newPerson.Forename class="form-control" id="Forename" /> </div> <div class="form-group col-md-2"> <label for="Surname">Surname</label> <InputText @bind-Value=newPerson.Surname class="form-control" id="Surname" readonly /> </div> </div> <EditForm Model=@newPos OnValidSubmit="@AddPosition"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="form-row"> <h4>Position</h4> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="newPositionId">Position Id</label> <InputText @bind-Value=newPos.PositionId class="form-control" id="newPositionId" /> </div> <div class="form-group col-md-2"> <label for="newPositionName">Position Name</label> <InputText @bind-Value=newPos.PositionName class="form-control" id="newPositionName" /> </div> </div> <input type="submit" class="btn btn-primary" value="Add Additional Position" /> </EditForm> <br /> <input type="submit" class="btn btn-primary form-group mr-1" value="Save Person" /> <hr /> </EditForm> 这些表格的模型是： public class Person { [Required] public string ResourceId { get; set; } [Required] public string Title { get; set; } [Required] public string Forename { get; set; } [Required] public string Surname { get; set; } public List<Position> Positions { get; set; } } public class Position { [Required] public string PositionId { get; set; } [Required] public string PositionName { get; set; } } 这些表单调用的提交方法是： void AddPosition(EditContext editContext) { bool formIsValid = editContext.Validate(); if (formIsValid == true) { newPerson.Positions.Add(newPos); newPos = new Position(); //JsRuntime.InvokeVoidAsync("alert", "Position added. Click submit to add another."); } } void FormSubmitted(EditContext editContext) { bool formIsValid = editContext.Validate(); if (formIsValid == true) { newHr.Positions.Add(newPos); OnInitializedAsync(); } } 这允许我向人员记录添加多个职位，并且执行此操作时，表单将正确验证，但是在保存顶级表单（人员）时，它将正确验证人员，但忽略子表单（位置）的验证。然后，这允许我在提交表单时向人员记录添加无效数据，因为职位中包含空数据。 使用 FormSubscribed 方法提交主编辑表单时是否可以验证子编辑表单？ 我尝试向模型添加各种验证，并将[必需]标签添加到人员模型中的位置，但这不起作用。我还尝试调整编辑表单上的子上下文。我尝试让 AddPosition 表单将其验证传递给主表单，但根本无法使其工作。我考虑过使用外部验证 nuget 包，但如果可能的话，我希望使用本机 blazor 来完成此操作。 我们可以在外部表单中使用OnSubmit，并在外部表单和内部表单上手动进行验证。 <EditForm Model=@newPerson Context="PersonForm" OnSubmit="@FormSubmitted"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="form-row"> <h4>Staff Information</h4> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="ResourceId">Person Id</label> <InputText @bind-Value=newPerson.ResourceId class="form-control" id="ResourceId" /> </div> <div class="form-group col-md-2"> <label for="Title">Title</label> <InputText @bind-Value=newPerson.Title class="form-control" id="Title" /> </div> </div> <EditForm EditContext="@EC" OnValidSubmit="@AddPosition"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="form-row"> <h4>Position</h4> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="newPositionId">Position Id</label> <InputText @bind-Value=newPos.PositionId class="form-control" id="newPositionId" /> </div> <div class="form-group col-md-2"> <label for="newPositionName">Position Name</label> <InputText @bind-Value=newPos.PositionName class="form-control" id="newPositionName" /> </div> </div> <input type="submit" class="btn btn-primary" value="Add Additional Position" /> </EditForm> <br /> <input type="submit" class="btn btn-primary form-group mr-1" value="Save Person" /> <hr /> </EditForm> @code { private Person newPerson = new (); private Position newPos = new (); private EditContext EC { get; set; } protected override async Task OnInitializedAsync() { EC = new EditContext(newPos); } void AddPosition(EditContext editContext) { bool formIsValid = editContext.Validate(); if (formIsValid == true) { newPerson.Positions.Add(newPos); newPos = new Position(); } } void FormSubmitted(EditContext editContext) { bool personFormIsValid = editContext.Validate(); bool formIsValid = EC.Validate(); if (formIsValid == true) { OnInitializedAsync(); } } }

使用 Blazor 客户端应用程序在身份中设置用户角色的问题

我正在使用 AddOidcAuthentication 在 Blazor 应用程序的客户端应用程序中进行用户登录。成功登录后，我尝试获取数据并在身份中设置用户角色。不过，我

BlazoredModal 未关闭 WebApp Net 8

我一直在使用 https://blazored.github.io/Modal/usage/passing-data 尝试弹出一个像对话框一样的模式，供用户确认或取消按钮按下。 我正在使用 Blazor Web ...

UserManager.GetClaimsAsync() 失败 - 连接已关闭

在 Blazor InteractiveServer 应用程序中，使用 ASP.NET 身份库，我调用： Microsoft.AspNetCore.Identity.UserManager`1.GetClaimsAsync（TUser 用户） 我将其设置为使用我的扩展类...

在 Visual Studio 中新创建的 Blazor 项目将无法构建

使用 Visual Studio 2022 Professional 版本 17.8.6，我刚刚创建了一个新的 Blazor 项目，但它根本无法构建。当尝试构建时，我收到错误： 错误 CS0246：类型或命名空间名称 '

System.NullReferenceException：“未将对象引用设置为对象的实例。” Blazor 服务器应用程序出现问题

我正在制作第一个 blazor 应用程序，当我尝试通过 Id 获取特定用户时遇到错误。 对于某些情况，我使用 Blazor 服务器作为前端，并使用 .NET 8 API 作为后台...

Blazor 托管 WebAssembly 在 kubernetes 中具有多个副本，导致身份验证问题

我有一个在 .Net8 下用 Blazor WebAssembly 编写的应用程序。该应用程序是托管模型，这意味着有一个客户端和服务器项目。使用 Web api 进行相互通信。该应用程序就是我们...

Blazor App（服务器渲染）-> 处理 DOM 对象大小更改的服务

Javascript 不是我最强大的部分，绝对不与 Blazor 结合使用，但与 Google 和一些 AI 合作，获得了一个事件侦听器，如果浏览器大小发生变化，该事件侦听器可以在我的 Blazor 应用程序上运行代码。 不...

从控制器底座以表格形式显示错误

我已经实现了一个使用登录控制器的登录表单，该控制器充当基本控制器。虽然控制器功能正常，但我关心的是错误处理。遗憾的是，我是

应用程序重新启动时 Blazor WebAssembly 本地存储为空

我在 Blazor 应用程序中使用本地存储，当打开/关闭浏览器时，它可以完美保存。但是当我重新启动应用程序时，我的本地存储突然变空。有任何想法吗？ 我试过了

应用程序启动时出错：操作不能同时使用表单和 JSON 正文参数

在一个新的 Blazor WebApp 项目中，我将尽可能多地转换 C#，以便我可以用我喜欢的语言构建尽可能多的应用程序。这几乎包括所有...

使用 bUnit 进行单元测试细分

我正在尝试测试 blazor 组件。在组件的逻辑中，我在组件内部某处的细分中设置了一些文本。现在我想验证文本设置是否正确： ... 我正在尝试测试 blazor 组件。在组件的逻辑中，我在组件内部某处的细分中设置了一些文本。现在我想验证文本设置是否正确： <div> <div> </div> <div> @Title </div> </div> 目前我使用以下代码来实例化该组件。现在我想验证“title”是否确实用作标题。 [Fact] public void TestSomething() { // act var cut = RenderComponent<MyComponent>(parameters => parameters .Add(p => p.Title, "title") ); } 现在我如何验证“标题”是否确实呈现在正确的位置？ 我发现了两种方法：要么构建一个系统来在整个项目中生成唯一的 id，要么只是设置静态 id。两者要么需要大量工作，要么以重复的 ID 结尾。有没有更好的方法来测试这样的事情？ 我自己想出来了：我只是使用自定义数据属性，例如数据 ID-abcd 我可以使用以下 CSS 选择器在 bUnit 中引用它：[data-id-abcd]。 对于我想要访问的每个标签，我都会创建一个带有一些随机 4 位十六进制 ID 的自定义属性。使用这种技术，我可以识别标签，而无需一些重复的 ID。此外，它使代码非常干净和可维护，因为它只为每个组件添加了一些属性。

在客户端填充组件的页面的渲染模式

这就是我以前的做法：加载页面时，从 的数据属性中读取 JSON，然后通过 JavaScript 进行解析以填充元素（组件）。 我想创建一个 BL...

Blazor 页面交互性和渲染模式

我是 .NET 新手，目前正在使用干净的架构和 Blazor 组件/页面构建应用程序。我有一个包含两个项目的解决方案：一个用于执行应用程序（主要），另一个用于...