blazor 相关问题

引导单选按钮组

我正在 Blazor 中创建一个表单，我喜欢有一个类似于以下示例的段 使用 Bootstrap，我有这个代码 我正在 Blazor 中创建一个表单，我喜欢有一个类似于以下示例的段 使用Bootstrap，我有这个代码 <div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" id="btnradio1-@Id" class="btn-check" name="btnradio1-@Id" autocomplete="off" checked @bind-value="Value"> <label class="form-label btn btn-outline-primary" for="btnradio1-@Id"> Yes</label> <input type="radio" id="btnradio2-@Id" class="btn-check" name="btnradio2-@Id" autocomplete="off" @bind-value="Value"> <label class="form-label btn btn-outline-primary" for="btnradio2-@Id"> No</label> <input type="radio" id="btnradio3-@Id" class="btn-check" name="btnradio3-@Id" autocomplete="off" @bind-value="Value"> <label class="form-label btn btn-outline-primary" for="btnradio3-@Id"> Sometimes</label> </div> 在代码中，我有这个参数： [Parameter] public string Id { get; set; } = Guid.NewGuid().ToString(); [Parameter] public string? Value { get; set; } 当我单击 input 时，我想将 Value 更改为我单击的输入的对应值。例如，如果我单击 No，我希望 Value 为 No。 使用 html 单选按钮来执行此操作有点问题。 我发现使用 Bootstrap ButtonGroup 和普通按钮构建自定义 InputBase 组件更容易。 这是一个简单的版本： @using System.Diagnostics.CodeAnalysis @inherits InputBase<string> <div class="btn-group mt-1 me-2 mb-3" data-toggle="buttons"> @foreach( var item in this.Options) { <button type="button" class="@this.GetButtonCSS(item.Value)" @onclick="() => ValueHasChanged(item.Value)"> @item.Value </button> } </div> @code { [Parameter, EditorRequired] public IEnumerable<SelectOption<string>> Options { get; set; } = Enumerable.Empty<SelectOption<string>>(); [Parameter] public string SelectedCss { get; set; } = "btn btn-primary"; [Parameter] public string UnSelectedCss { get; set; } = "btn btn-outline-primary"; protected override bool TryParseValueFromString(string? value, out string result, [NotNullWhen(false)] out string? validationErrorMessage) { result = value ?? string.Empty; validationErrorMessage = null; return true; } private string GetButtonCSS(string value) { return value.Equals(this.Value) ? this.SelectedCss : this.UnSelectedCss; } private void ValueHasChanged(string value) { this.CurrentValueAsString = value; } } 选项对象： public readonly record struct SelectOption<TValue>(TValue Value, string Label); 还有演示页面： @page "/" <PageTitle>Home</PageTitle> <h1>Hello, world!</h1> Welcome to your new app. <EditForm Model="_model"> <RadioButtonInput Options="_options" @bind-Value="_model.Value" /> </EditForm> <div class="bg-dark text-white m-2 p-2"> <pre>Value: @_model.Value</pre> </div> @code { private List<SelectOption<string>> _options = new() { new("Yes", "Yes"), new("No", "No"), new("Sometimes", "Sometimes") }; private Model _model = new(); public class Model { public string Value { get; set; } = "N"; } }

如何自动刷新访问令牌

我有一个具有以下范围的API（api_access和offline_access）： 前端 blazor 应用程序使用代码流并使用该 api。以下是我配置身份验证的方法： 建设者.Se...

Blazor 中的子组件未调用 Dispose

我有一个实现 IDisposable 的父组件，其中有一个名为 MyGrid 的子组件。现在，MyGrid 扩展了 Syncfusion 的 SfGrid，后者本身实现了 IDisposable。当我关闭标准杆时...

.NET 9 中的 Blazor Web + Azure AD B2C

我正在启动一个新项目，并且遇到一些设计挑战。 初步想法： Blazor Web，主要是服务器启动，但随着时间的推移，随着事物的发展和可扩展性变得必要，会出现更多的 WASM。

重定向和重新加载不适用于 Razor 类库中实现的身份验证

我已经在 Blazor 项目的 RCL 中实现了身份验证。当我单击“注册”链接时，它显示“恢复”页面（来自 RCL）。当我单击“提交”时，它正在 Aspnetuser 中创建用户数据

.NET Maui Hybrid，Blazor 更新 UI 中间方法

我有一个需要几秒钟处理的方法。单击按钮时，我希望它更新 UI 以显示处理情况，然后在方法完成时更改 UI。举个例子，我

使用 MudBlazor 的 Blazor Web 应用程序：IIS 上托管的“System.IO.FileNotFoundException”随机问题

我正在使用部署在 IIS 上的 MudBlazor 开发 .NET 8 Blazor 应用程序。它在本地和开发服务器上运行良好，但仅在生产服务器上引发以下错误： System.IO.FileNotFoundException：

Blazor WebAssembly CSS 隔离范围身份不匹配

在 Blazor WebAssembly .NET Core 托管应用程序中，将 {PROJECT NAME}.Client 项目名称更改为“{PROJECT NAME}.Admin”（更改客户端项目名称）后，范围标识...

输入最后一位数字后自动提交 - C#/Blazor

我有一个字段可以输入 6 个数字，如下所示： 我想在添加第 6 个数字后立即提交表单，但我不知道如何使用 JS，一切似乎都......

'((System.Net.Http.HttpBaseStream)stream).Length'引发了类型为'System.NotSupportedException'的异常

我因我不理解的行为而收到此错误： 异常截图 我在网上寻找解决方案，但没有任何效果或适用于我的案例。 它说 Stream.Length thr...

Blazor 和 HMTX：仅形式获取

我有一个ASP.NET Core 8项目。这个项目有HTMX。现在，我想将 Blazor 添加到解决方案中。我有一个非常简单的页面，模仿 GitHub 上的示例。 我有一个 ASP.NET Core 8 项目。这个项目有 HTMX。现在，我想将 Blazor 添加到解决方案中。我有一个非常简单的页面，模仿 GitHub 上的示例。 <CascadingValue Value="ValidationResult"> <form id="counter" hx-post="slacktest/ui" hx-swap="outerHTML" hx-target="#counter"> <HtmxAntiforgeryToken/> <input type="hidden" id="check" value="@SlackForm.Check" /> <input type="text" value="@SlackForm.SubscribeId" name="@nameof(SlackForm.SubscribeId)" class="form-control-plaintext w-100"/> <label class="w-100"> Slack <InputText @bind-Value="SlackForm.WebhookUrl" name="@nameof(SlackForm.WebhookUrl)"/> <HtmxValidationMessage For="() => SlackForm.WebhookUrl"/> </label> <button class="btn btn-primary">Click me</button> </form> </CascadingValue> @code { [Parameter] public SlackUIModel SlackForm { get; set; } = new(); [Parameter] public ValidationResult ValidationResult { get; set; } = new(); } 我在 Program.cs 中添加了此页面的最少 API。问题是，每次我单击按钮时，表单的请求都会发送到 GET。无法以 POST 的形式发送请求。 您知道这是否与项目配置有关，或者与与 Blazor 一起使用的 HTMX 相关吗？ 尝试从 hx-post="slacktest/ui" hx-swap="outerHTML" 元素中删除 form，并将 button 更新为： <button type="button" class="btn btn-primary" hx-post="slacktest/ui" hx-swap="outerHTML" hx-target="#counter"> Click me </button> 这是因为，默认情况下 button 上的 form 执行 submit，而 submit 默认为 GET... 您的 HMTX 正在拦截 form 提交有效负载，但不拦截 submit 执行。 通过将 button 定义为 button 类型，您现在可以拦截默认执行，并且 hx-post 和 hx-target 正在拦截有效负载。 如果这仍然不起作用，请发布包含您的API的program.cs正文。

如何使用NavigationManager.NavigateTo()登录后正确访问ProtectedLocalStorage

成功登录后（基于 JWT 的身份验证存储在 protectedLocalStorage 中），我想重定向到 ReturnUrl（如果存在）。 当 ReturnUrl -目标页面 - 具有 Authorize 属性时 &

Shopify 登录问题 - 嵌入式应用程序无法正确登录

有件事让我很困惑，我在 .NET 6 上开发了一个 Blazor 应用程序，它在本地和生产环境中都能完美运行。目前它正在 Shopify 之外使用，但是，我...

如何在 Blazor 中创建 `AsChild` 或 `Slot`

我一直在寻找这个问题的答案。我想要的只是能够在 Blazor 中重新创建 Radix 的槽组件/asChild 模式。 例如 ... 我长期以来一直在寻找这个问题的答案。我想要的只是能够在 Blazor 中重新创建 Radix 的插槽组件/asChild 模式。 例如 <Button AsChild> <a href="/contact">Contact</a> </Button> 感谢@DanielD 让我走上正确的轨道。 我创建了一个抽象类（您不需要需要执行此操作，您只需将这些属性添加到您想要具有此功能的任何组件即可）。 public abstract class Slot : ComponentBase { [Parameter] public required RenderFragment<Dictionary<string, object>> ChildContent { get; set; } [Parameter] public bool AsChild { get; set; } } 按钮.razor.cs 指定您想要绘制的属性。 public partial class Button : Slot { private static Dictionary<string, object> _attributes => new() { { "onclick", () => Console.WriteLine("Button was clicked!") } }; } 按钮.剃须刀 为默认组件创建标记（当未使用 AsChild 时）。 @inherits Slot @if (AsChild) { @ChildContent(_attributes) } else { <button type="button" @attributes="_attributes"> @ChildContent(_attributes) </button> } 现在您可以在任何您喜欢的地方使用以下内容。 AsChild的用法： <Button AsChild> <a href="#" @attributes="context">Click me!</a> </Button> 不使用AsChild的用法： <Button> Click me! </Button>

blazor 静态服务器渲染本地化

如何在 Blazor 8 静态服务器渲染中设置本地化。 我是 Blazor 新手，想要在 Blazor 静态服务器渲染中制作应用程序，但在 Web 上只有交互式服务器的代码或...

Azure DevOps 发布在 .NET 9 上慢了 20 倍

我在 AzureDevops 上为 Blazor 解决方案创建了一个构建管道。构建代理正在我的服务器上运行。大约一个月前，我将所有项目更新到 .NET 9 并运行了构建。我们的构建时间...

Azure DevOps 发布在 .NET 9 上降低了 20 倍

我在 AzureDevops 上为 Blazor 解决方案创建了一个构建管道。构建代理正在我的服务器上运行。大约一个月前，我将所有项目更新到 .NET 9 并运行了构建。我们的构建时间...

是否有一种简单的方法可以在 .NET8 Blazor 中对嵌套对象进行表单验证？

我查看了以下解决方案，但 NuGet 包 Microsoft.AspNetCore.Components.DataAnnotations.Validation 已弃用。 两个嵌套对象之间的 Blazor 复杂验证 谢谢！

在 Blazor WebApp 中将身份验证状态从预渲染模式转移到交互式渲染模式

在 Blazor 9 中，AddAuthenticationStateSerialization() 和 AddAuthenticationStateDeserialization() 似乎仅在服务器项目中使用 ASP.NET Core Identity 时才起作用（如在 Visual Studio 中

如何在 Blazor WASM 应用程序中获取当地时间

我想在我的 Blazor WASM 应用程序中获取客户端计算机中的时间（如 Windows 11 的任务栏中显示的那样），这看起来应该很简单。 不过，我有时间...