blazor 相关问题

.NET认证登录页面

我制作了 Blazor 应用程序（.Net 7）。客户端和服务器位于不同的项目中。我在项目中使用了 ASP.NET Core 身份验证和 IdentityServer4，并在服务器中搭建了登录和注册页面...

Blazor InputSelect 错误：修改值时出现“TypeError: o.parentNode is null”

我有以下 Blazor InputSelect 我有以下 Blazor InputSelect <InputSelect class="form-select" @bind-Value="MdfAddressbook.FK_Cls_DefaultUserRole"> <option value="@ClsUsersRoles.OBSERVER">@Localizer[LocalTranslations.GnrcText_Observer]</option> <option value="@ClsUsersRoles.SUBCONTRACTOR">@Localizer[LocalTranslations.GnrcText_Subcontractor]</option> </InputSelect> 正确翻译为以下 HTML： <select name="MdfAddressbook.FK_Cls_DefaultUserRole" class="form-select modified valid" _bl_f951b65f-1ea1-4713-8094-b4a2cb355ca0=""> <option value="OBSERVER">Observer</option> <!--!--> <option value="SUBCONTRACTOR">Subcontractor</option> </select> Poperty 由这个 (NHibernate) 字段支持： private String _FK_Cls_DefaultUserRole = ClsUsersRoles.UNKNOWN; public virtual String FK_Cls_DefaultUserRole { get { return _FK_Cls_DefaultUserRole; } set { _FK_Cls_DefaultUserRole = value; } } 当我打开包含它的模态时，会显示正确的值。 当 MdfAddressbook 是一个新对象时，一切正常，但是，在编辑现有 MdfAddressbook 对象时，一旦我使用鼠标选择不同的值（在选择瞬间），我就会收到以下错误： [2024-10-28T17:26:03.019Z] Error: There was an error applying batch 32. blazor.web.js:1:40375 log https://localhost:7185/_framework/blazor.web.js:1 processBatch https://localhost:7185/_framework/blazor.web.js:1 startConnection https://localhost:7185/_framework/blazor.web.js:1 _invokeClientMethod https://localhost:7185/_framework/blazor.web.js:1 _processIncomingData https://localhost:7185/_framework/blazor.web.js:1 onreceive https://localhost:7185/_framework/blazor.web.js:1 onmessage https://localhost:7185/_framework/blazor.web.js:1 (Asinc.: EventHandlerNonNull) connect https://localhost:7185/_framework/blazor.web.js:1 connect https://localhost:7185/_framework/blazor.web.js:1 _startTransport https://localhost:7185/_framework/blazor.web.js:1 _createTransport https://localhost:7185/_framework/blazor.web.js:1 _startInternal https://localhost:7185/_framework/blazor.web.js:1 start https://localhost:7185/_framework/blazor.web.js:1 _startInternal https://localhost:7185/_framework/blazor.web.js:1 _startWithStateTransitions https://localhost:7185/_framework/blazor.web.js:1 start https://localhost:7185/_framework/blazor.web.js:1 startConnection https://localhost:7185/_framework/blazor.web.js:1 startCore https://localhost:7185/_framework/blazor.web.js:1 start https://localhost:7185/_framework/blazor.web.js:1 or https://localhost:7185/_framework/blazor.web.js:1 nr https://localhost:7185/_framework/blazor.web.js:1 startCircutIfNotStarted https://localhost:7185/_framework/blazor.web.js:1 resolveRendererIdForDescriptor https://localhost:7185/_framework/blazor.web.js:1 determinePendingOperation https://localhost:7185/_framework/blazor.web.js:1 refreshRootComponents https://localhost:7185/_framework/blazor.web.js:1 rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1 (Asinc.: setTimeout handler) rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1 onDocumentUpdated https://localhost:7185/_framework/blazor.web.js:1 Ki https://localhost:7185/_framework/blazor.web.js:1 (Asinc.: EventListener.handleEvent) Ji https://localhost:7185/_framework/blazor.web.js:1 <anonima> https://localhost:7185/_framework/blazor.web.js:1 <anonima> https://localhost:7185/_framework/blazor.web.js:1 [2024-10-28T17:26:03.092Z] Error: System.AggregateException: One or more errors occurred. (TypeError: o.parentNode is null) ---> System.InvalidOperationException: TypeError: o.parentNode is null at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents) --- End of inner exception stack trace --- blazor.web.js:1:40375 log https://localhost:7185/_framework/blazor.web.js:1 unhandledError https://localhost:7185/_framework/blazor.web.js:1 startConnection https://localhost:7185/_framework/blazor.web.js:1 _invokeClientMethod https://localhost:7185/_framework/blazor.web.js:1 _processIncomingData https://localhost:7185/_framework/blazor.web.js:1 onreceive https://localhost:7185/_framework/blazor.web.js:1 onmessage https://localhost:7185/_framework/blazor.web.js:1 (Asinc.: EventHandlerNonNull) connect https://localhost:7185/_framework/blazor.web.js:1 connect https://localhost:7185/_framework/blazor.web.js:1 _startTransport https://localhost:7185/_framework/blazor.web.js:1 _createTransport https://localhost:7185/_framework/blazor.web.js:1 _startInternal https://localhost:7185/_framework/blazor.web.js:1 start https://localhost:7185/_framework/blazor.web.js:1 _startInternal https://localhost:7185/_framework/blazor.web.js:1 _startWithStateTransitions https://localhost:7185/_framework/blazor.web.js:1 start https://localhost:7185/_framework/blazor.web.js:1 startConnection https://localhost:7185/_framework/blazor.web.js:1 startCore https://localhost:7185/_framework/blazor.web.js:1 start https://localhost:7185/_framework/blazor.web.js:1 or https://localhost:7185/_framework/blazor.web.js:1 nr https://localhost:7185/_framework/blazor.web.js:1 startCircutIfNotStarted https://localhost:7185/_framework/blazor.web.js:1 resolveRendererIdForDescriptor https://localhost:7185/_framework/blazor.web.js:1 determinePendingOperation https://localhost:7185/_framework/blazor.web.js:1 refreshRootComponents https://localhost:7185/_framework/blazor.web.js:1 rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1 (Asinc.: setTimeout handler) rootComponentsMayRequireRefresh https://localhost:7185/_framework/blazor.web.js:1 onDocumentUpdated https://localhost:7185/_framework/blazor.web.js:1 Ki https://localhost:7185/_framework/blazor.web.js:1 (Asinc.: EventListener.handleEvent) Ji https://localhost:7185/_framework/blazor.web.js:1 <anonima> https://localhost:7185/_framework/blazor.web.js:1 <anonima> https://localhost:7185/_framework/blazor.web.js:1 我很困惑，因为错误似乎来自 blazor 的内部 所以，两天后我就在这里，明白问题完全出在其他地方。 在同一页面中，我有一个网格组件，其中一个 GridColumn 定义为： <GridColumn TItem="AnaAddressBooks" Context="chContext" HeaderText="@Localizer[LocalTranslations.Customers_AddressbookDefaultRole_Lbl]"> @if (chContext.FK_Cls_DefaultUserRole.Equals(ClsUsersRoles.OBSERVER)) { <i class="fa-solid fa-binoculars"></i> } @if (chContext.FK_Cls_DefaultUserRole.Equals(ClsUsersRoles.SUBCONTRACTOR)) { <i class="fa-solid fa-wrench"></i> } </GridColumn> 注释掉后，我发现错误消失了。 事实证明，如果我像这样转换 GridColumn： <GridColumn TItem="AnaAddressBooks" Context="chContext" HeaderText="@Localizer[LocalTranslations.Customers_AddressbookDefaultRole_Lbl]" > @if (chContext.FK_Cls_DefaultUserRole.Equals(ClsUsersRoles.OBSERVER)) { <div> <i class="fa-solid fa-binoculars"></i> </div> } @if (chContext.FK_Cls_DefaultUserRole.Equals(ClsUsersRoles.SUBCONTRACTOR)) { <div> <i class="fa-solid fa-wrench"></i> </div> } </GridColumn> ，将两个 FontAwesome 图标分别嵌入一个 div 元素中，错误就消失了。 注意将整个 @if 嵌入到 div 中，如下所示： <GridColumn TItem="AnaAddressBooks" Context="chContext" HeaderText="@Localizer[LocalTranslations.Customers_AddressbookDefaultRole_Lbl]"> <div> @if (chContext.FK_Cls_DefaultUserRole.Equals(ClsUsersRoles.OBSERVER)) { <i class="fa-solid fa-binoculars"></i> } @if (chContext.FK_Cls_DefaultUserRole.Equals(ClsUsersRoles.SUBCONTRACTOR)) { <i class="fa-solid fa-wrench"></i> } </div> </GridColumn> 仍然无法工作并且会给出相同的错误。

MudBlazor 主题颜色在页面刷新时发生变化

我正在使用 MudBlazor 构建 Blazor WASM 应用程序，并且我正在使用浅色和深色模式的自定义主题。 主题提供程序位于 MainLayout.razor 文件中： 我正在使用 MudBlazor 构建 Blazor WASM 应用程序，并且我正在使用浅色和深色模式的自定义主题。 主题提供程序位于MainLayout.razor文件中： <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /> _isDarkMode字段首先初始化为null： private MudTheme? _theme = null; 但是他们在OnInitialized()中获得了一个实例： protected async override void OnInitialized() { base.OnInitialized(); _theme = new() { PaletteLight = _lightPalette, PaletteDark = _darkPalette, LayoutProperties = new LayoutProperties() }; } 主题在同一文件的下部定义： private readonly PaletteLight _lightPalette = new() { Black = "#110e2d", AppbarText = "#424242", AppbarBackground = "rgba(255,255,255,0.8)", DrawerBackground = "#ffffff", GrayLight = "#e8e8e8", GrayLighter = "#f9f9f9", }; private readonly PaletteDark _darkPalette = new() { Primary = "#7e6fff", Surface = "#1e1e2d", Background = "#1a1a27", BackgroundGray = "#151521", AppbarText = "#92929f", AppbarBackground = "rgba(26,26,39,0.8)", DrawerBackground = "#1a1a27", ActionDefault = "#74718e", ActionDisabled = "#9999994d", ActionDisabledBackground = "#605f6d4d", TextPrimary = "#b2b0bf", TextSecondary = "#92929f", TextDisabled = "#ffffff33", DrawerIcon = "#92929f", DrawerText = "#92929f", GrayLight = "#2a2833", GrayLighter = "#1e1e2d", Info = "#4a86ff", Success = "#3dcb6c", Warning = "#ffb545", Error = "#ff3f5f", LinesDefault = "#33323e", TableLines = "#33323e", Divider = "#292838", OverlayLight = "#1e1e2d80", }; 问题是，当我刷新任何页面时，颜色会由于某种原因发生变化。模式（深色/浅色）保持不变，但深色模式下颜色更亮一些。就像它们被重置为某些默认值一样。 我想要的颜色： 浏览器刷新后得到的颜色： 如果我现在打开汉堡菜单或将模式切换为浅色，然后再切换回深色，颜色就会得到纠正。 我做错了什么，刷新后颜色不正确？ 分析模板中的代码，发现每次刷新页面时，_isDarkMode始终是true。这就是根本原因。 我们可以将_isDarkMode的值存储在localStorage或者其他地方，并在刷新页面加载所选主题时加载。 测试中发现的问题是StateHasChanged();会导致页面加载并且主题会在一段时间后发生变化，因为预加载的主题仍然是 DarkMode。 这是给您的样本。 @inherits LayoutComponentBase @inject IJSRuntime JS <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" /> <MudPopoverProvider /> <MudDialogProvider /> <MudSnackbarProvider /> <MudLayout> <MudAppBar Elevation="1"> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /> <MudText Typo="Typo.h5" Class="ml-3">Application</MudText> <MudSpacer /> <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" /> <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" /> </MudAppBar> <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2"> <NavMenu /> </MudDrawer> <MudMainContent Class="mt-16 pa-4"> @Body </MudMainContent> </MudLayout> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> @code { private bool _drawerOpen = true; private bool _isDarkMode = true; private MudTheme? _theme = null; private bool _initialized = false; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { var savedDarkMode = await JS.InvokeAsync<string>("localStorage.getItem", "isDarkMode"); if (!string.IsNullOrEmpty(savedDarkMode)) { _isDarkMode = bool.Parse(savedDarkMode); StateHasChanged(); } _theme = new MudTheme { PaletteLight = _lightPalette, PaletteDark = _darkPalette, LayoutProperties = new LayoutProperties() }; _initialized = true; StateHasChanged(); } } private void DrawerToggle() { _drawerOpen = !_drawerOpen; } private async Task DarkModeToggle() { _isDarkMode = !_isDarkMode; await JS.InvokeVoidAsync("localStorage.setItem", "isDarkMode", _isDarkMode.ToString().ToLower()); } private readonly PaletteLight _lightPalette = new() { Black = "#110e2d", AppbarText = "#424242", AppbarBackground = "rgba(255,255,255,0.8)", DrawerBackground = "#ffffff", GrayLight = "#e8e8e8", GrayLighter = "#f9f9f9", }; private readonly PaletteDark _darkPalette = new() { Primary = "#7e6fff", Surface = "#1e1e2d", Background = "#1a1a27", BackgroundGray = "#151521", AppbarText = "#92929f", AppbarBackground = "rgba(26,26,39,0.8)", DrawerBackground = "#1a1a27", ActionDefault = "#74718e", ActionDisabled = "#9999994d", ActionDisabledBackground = "#605f6d4d", TextPrimary = "#b2b0bf", TextSecondary = "#92929f", TextDisabled = "#ffffff33", DrawerIcon = "#92929f", DrawerText = "#92929f", GrayLight = "#2a2833", GrayLighter = "#1e1e2d", Info = "#4a86ff", Success = "#3dcb6c", Warning = "#ffb545", Error = "#ff3f5f", LinesDefault = "#33323e", TableLines = "#33323e", Divider = "#292838", OverlayLight = "#1e1e2d80", }; public string DarkLightModeButtonIcon => _isDarkMode switch { true => Icons.Material.Rounded.AutoMode, false => Icons.Material.Outlined.DarkMode, }; }

更新到 .NET 9 后 Google Cloud Run 部署失败

我正在通过 Google Cloud Run 部署我的 Blazor Server 应用程序。但自从我将项目更新到 .NET 9 后，它一直失败。我需要在 gCloud 上进行任何特定设置吗？我得到的错误是 ...

如何在 ASP.NET Core/MAUI Blazor 中正确实现来自 REST 端点的登录和令牌处理

我正在开发一个与 Django REST Framework 后端通信的 MAUI Blazor 应用程序。我正在尝试实现用户身份验证，但在

如何在不修改组件的情况下将 CSS 宽度应用于 Razor 组件中的嵌套 Div？

我正在使用生成嵌套 结构的 Razor 组件，我需要应用 width: 100%;样式向外。但是，我无法直接修改组件... 我正在使用生成嵌套 <div> 结构的 Razor 组件，并且我需要将 width: 100%; 样式应用于外部 <div>。但是，我无法直接修改组件，并且它不会公开任何 style 或 class 属性。 这是组件生成的 HTML 结构： <div class="pr-6 pl-3 py-4 "> <div class="flex space-x-4"> <!-- Other content here --> </div> </div> 所做的尝试： 我尝试在 xy.razor.css 文件中添加一个新的 CSS 类，但我不能 找到要应用样式的 div。 我尝试使用以下选择器但没有成功： ::深div.pr-6.pl-3.py-4 { 宽度：100%； } .pr-6.pl-3.py-4 { 宽度：100%； } 问题： 有没有办法使用 CSS 将 width: 100%; 应用于此 div Razor 组件的上下文？ 是否有针对嵌套 div 的特定策略 样式不能直接修改吗？ 附加信息： 在这种情况下使用 JavaScript 修改 DOM 并不是一个可行的解决方案。 您应该能够将其添加到页面，从中调用组件： <style> .pr-6.pl-3.py-4 { width: 100%!important; } </style> 但这将适用于页面上带有 <div> 的所有 class="pr-6 pl-3 py-4" 标签。如果您有多个这些组件，并且它只适用于一个，您可能需要创建一个临时组件，以隔离您需要的组件。

通过读取 blazor 页面中的 appsettings.json 文件来配置 URL

我有一个 blazor 项目，我想通过读取 appsettings.json 文件来配置我的页面 URL。我尝试过以下方法 登录.razor 页面 @页面“LOGIN_URL” 应用程序设置.jso...

InputText 的自定义 Blazor 组件

我想通过将一大块表单代码包装到一个单独的组件中来简化我的代码。 我所做的是创建 MyInput.razor，其中包含以下代码： 我想通过将一大块表单代码包装到一个单独的组件中来简化我的代码。 我所做的是创建 MyInput.razor，其中包含以下代码： <div class="@ColSize"> <label>@Label</label> <InputText @bind-Value="Value" class="form-control" /> <ValidationMessage For="() => Value" /> </div> @code { public string ColSize { get; set; } = "col-md-12"; [Parameter] public string Label { get; set; } = string.Empty; [Parameter] public string? Value { get; set; } [Parameter] public EventCallback<string?> ValueChanged { get; set; } } 在我的 Index.razor 中，我添加了一个带有基本验证的简单表单，如下所示： <EditForm Model="Input" OnValidSubmit="Submit"> <DataAnnotationsValidator /> <ValidationSummary /> <MyInput @bind-Value="Input.Name" /> <button type="submit" class="d-block mt-3">Save</button> </EditForm> @code { public MyModel Input { get; set; } = new(); private void Submit() { } public class MyModel { [MinLength(10)] public string Name { get; set; } = string.Empty; public string Description { get; set; } = string.Empty; } } 验证和绑定正在工作，但是，我在组件中没有看到 <ValidationMessage For="() => Value" /> 的验证错误。我只能看到带有 ValidationSummary 的消息。 有什么简单的方法可以让它工作吗？我不想创建一个继承自 InputText 或 InputBase 的新组件。我只想使用现有的输入类型并在其周围封装一些 HTML，这样我就不必每次都重新输入它。 <ValidationMessage 使用 和 表达式来获取 EditForm 正在使用的模型。您需要将表达式传递到您的组件中。 <div class="@ColSize"> <label>@Label</label> <InputText @bind-Value="Value" class="form-control" /> <ValidationMessage For=@For /> </div> @code { public string ColSize { get; set; } = "col-md-12"; [Parameter] public string Label { get; set; } = string.Empty; [Parameter] public string? Value { get; set; } [Parameter] public Expression<Func<TValue>>? For { get; set; } [Parameter] public EventCallback<string?> ValueChanged { get; set; } } 用途： <MyInput @bind-Value="Input.Name" For="() => Input.Name" /> ValidationMessage的源代码 在这种情况下，最好从 InputBase<string> 继承你的组件，这样你就不需要提供验证表达式。 此外，您可以从显示数据注释属性中读取标签。 @using System.ComponentModel.DataAnnotations @using System.Reflection @inherits InputBase<string> <div class="@CssClass field"> @if (!string.IsNullOrWhiteSpace(this.Label)) { <label class="field__label">@Label</label> } <input class="form-field__input" @bind="@CurrentValue" /> @if (this.ValueExpression != null) { <ValidationMessage class="field__validation-message" For=@ValueExpression /> } </div> @code { private string? Label { get { if (ValueExpression != null) if (ValueExpression.Body is MemberExpression memberExpression) return (memberExpression.Member as PropertyInfo)?.GetCustomAttribute<DisplayAttribute>()?.GetName(); return null; } } protected override bool TryParseValueFromString(string? value, out string result, out string validationErrorMessage) { result = value ?? string.Empty; validationErrorMessage = string.Empty; return true; } } 用途： <EditForm Model="ViewModel" OnValidSubmit="Submit"> <DataAnnotationsValidator /> <ValidationSummary /> <TextualField @bind-Value="ViewModel.Email" /> <SecretField @bind-Value="ViewModel.Password" /> <button type="submit">Save</button> </EditForm>

Blazor 需要双重函数调用来选择文本部分 - 为什么？

我尝试为 DateOnly 创建自定义组件。我想选择活跃日期的一部分，如下所示： 现在，如果我按下 Arro 按钮，我想将 CurrentValue（日期）更改 1 天...

blazor - 绑定值：传递参数后

这发生在我的数据网格实体更改之前： 更改 =“@（args => onselectrowpremadeinfo（ProductCareInfo））” 通常我会使用bind-value:after，但我不明白如何传递...

Blazor CSS 隔离不起作用时的调试

我最近按照 Microsoft 的指导将最初在 AspNetCore 7.0 Blazor WASM 中模板化的项目迁移到了 AspNetCore 8.0。 一切正常，除了页面加载时，浏览器找不到...

Mudblazor：从 ChildComponents 更改 AppBarText

如何更改子组件中的 MudAppBar 文本？ 我有一个子组件（EditCustomer）。我想从 EditCustomer 更改 appbartext。 mainlayout.Razor： ...

MudNumericField 最大小数长度

在 Blazor 服务器中， 我正在尝试限制用户可以输入的小数位数 例如，如果我想将其限制为两（2）位十进制数字，则输入字段 sh...

Blazor NavLink 样式与 CSS 隔离中的类

我正在尝试使用该 razor 文件的 CSS 隔离文件中的 CSS 类在 Blazor 中设置 NavLink 的样式。 我似乎无法接受全局或内联样式的任何更改。 萨...

带有 Azure 应用服务计划的 SQL lite 数据库

我正在制作一个使用 SQLite 数据库在 Blazor Server 中存储的应用程序。根据我所读到的内容，我可以将 SQLite 数据库存储在应用程序服务存储的 wwwroot 文件夹中。 我将数据存储在两个

.NET Core Blazor，客户端，加载一个小型数据库并搜索它

我正在开发 Blazor 客户端应用程序，我们在 SQL 数据库中有一个包含大约 15,000 条记录的表。 我想在应用程序启动时预加载数据库中的所有记录，然后保留

img onerror 事件不会更改视图模型上的属性

当图像无法在 blazor 中加载时，我尝试设置一个标志，但该标志似乎从未更新。我做错了什么？ 小提琴看起来像这样： 世界，你好！ 当图像无法在 blazor 中加载时，我尝试设置一个标志，但该标志似乎从未更新。我做错了什么？ 小提琴看起来像这样： <h1>Hello, world!</h1> Welcome to your new app. <img src="https://images.dog.ceo/breeds/dane-great/n02109047_8090" onerror="this.onerror=null; @(() => SetImageFailedFlag())"> <p>Image failed to load @ImageFailedFlag</p> @code { private bool ImageFailedFlag {get;set;} = false; private void SetImageFailedFlag() { ImageFailedFlag = true; StateHasChanged(); } } 要在blazor中触发图片加载错误事件，应该是 <img src="xxx" @onerror="SetImageFailedFlag">

在 Bootstrap 中，为什么“固定底部”使按钮全宽，否则它们不是全宽？

在一个简单的页面中，我想要 1 个靠近顶部的按钮和 2 个固定在底部的按钮。当我将“固定底部”类添加到包含按钮的 div 时，其他一切都相同

无法将类参数传递给 Blazor RenderFragment

我正在开发 Blazor WebApp、.net 8.0、仅服务器应用程序。我在 RenderFragment 方面遇到问题。 这是我作为参数传递给 RenderFragment 委托的类型： 公开课...

刷新/重新加载 MAUI Blazor 混合页面

我们有一个用 Blazor Hybrid MAUI 建造的 SPA。出于各种原因，我们希望用户可以将应用程序刷新/重新加载到初始状态，类似于常规浏览器中的刷新/F5 功能。我们