blazor 相关问题

Blazor是一个Web框架,允许开发人员在.NET中编写客户端代码。它是ASP.NET Core的一部分,称为“Razor Components”。

.NET 8 DownstreamAPI 未进行身份验证

我已使用 Microsoft Identity 保护我的 .NET 8 Blazor 应用程序。在我的应用程序中,我想从我的 API 获取数据,并且也使用 Microsoft Identity 进行保护。我使用 DownstreamAPI 发送

回答 1 投票 0

从 blazor .NET 8 中的子组件更新 MainLayout

我曾经在之前的 Blazor 项目中使用自定义方法来授权用户,如下所示: 主布局 @if(AppState.Me == null) { } 别的 { @

回答 1 投票 0

在 Blazor 中从父母到孩子沟通

考虑父 MainPage.razor 和子 ChildComponent.razor。现在,当我单击 MainPage.razor 中的按钮时,我想与 ChildComponent.razor 进行通信。 可能想像

回答 1 投票 0

Blazor Radzen 过滤和排序无法工作/交互

有一个非常奇怪的问题,我有一个使用 blazor 和 radzen 设置的基本 Web 应用程序,它从 Mssql 检索数据并显示它。 问题在于过滤和排序。 只需将“允许 Fi”...

回答 1 投票 0

如何一起使用MudBlazor和FluentUI?

我正在使用 .NET 8.0 和服务器作为交互式渲染模式开发 Blazor Web 应用程序。 当我在前端工作时,我使用 MudBlazor 作为我的组件库,并且我想使用 FluentUI 组件...

回答 1 投票 0

如何将 Blazor 组件实例传递给其他组件并渲染它?

我的应用程序中有一种工厂,我在其中创建各种对象的实例。所有对象都继承自同一个基类。 我现在尝试将此推导的实例传递到

回答 1 投票 0

BUnit 使用 Mask 将值设置为 MudTextField

我在 BUnit 和 XUnit 中使用 MudBlazor 测试 Blazor Web 组装项目。我尝试使用 .input("xxx") 设置 MudTextField 值,它在大多数情况下都有效,但在使用 Mask 的情况下会出现错误,

回答 1 投票 0

Blazor 无法附加到调试器问题

我的 Blazor 解决方案将不再运行。我要么得到 或者我得到 以前该解决方案启动时没有任何问题。 我在 Visual Studio 2022 版本 17.9.5 上运行。所有项目都是.net 7...

回答 1 投票 0

Blazor url 始终以 https://localhost:5001http://localhost:5000 开头,这是什么问题?

当我删除它并粘贴我自己的内容时,我无法配置它,运行后会出现如下图所示的错误,当我检查网址为 https://localhost:5001http://localhost 时: 5000如何...

回答 3 投票 0

Blazor 和 EventCallback,都是在父组件中更新数据和运行代码?

我在 Blazor 中有一个父组件和一个子组件。有没有一种更简单的方法可以在父子之间绑定值,并且如果绑定值发生更改,也可以在父级中运行代码? 我有这个代码 家长: @page&qu...

回答 1 投票 0

需要读取blazor服务器mainlayout.cs中的cookie

我需要在 MainLayout.razor.cs OnInitializedAsync() 中获取 cookie 并将其保存在作用域服务中。 我尝试过通过从 HTTP 上下文获取中间件路线并将其填充到...

回答 1 投票 0

在 blazor 应用程序中动态设置 tr 颜色

我有动态创建的表(存储过程返回数据表)并创建成功,但是当我单击事件 getTrnDetails(batchno) 时,我想为 着色以显示分隔...

回答 1 投票 0

Mudblazor Datagrid 预加载过滤器

我正在使用 MudDataGrid 组件:https://dev.mudblazor.com/components/datagrid#default-data-grid 我试图在页面加载后立即添加过滤器,但我找不到执行此操作的文档。 我...

回答 1 投票 0

Microsoft.AspNetCore.Components.WebView.Wpf 和 Microsoft.Web.WebView2.Wpf 有什么区别

我目前正在尝试使用 WPF 完成我的第一个 blazor 桌面应用程序。我唯一缺少的是 WindowStyle="none" WPF MainWindow 的拖动行为。 我发现了以下内容...

回答 1 投票 0

绑定DateTime时出现验证错误?与 MudBlazor 的 MudTextField

我将MudTextField的InputType设置为DateTimeLocal并将其绑定到DateTime?成员,但在使用 .NET 5.0 和 MudBlazor 5.2.5 的 Visual Studio 2019 中出现验证错误。 我将 MudTextField 的 InputType 设置为 DateTimeLocal 并将其绑定到 DateTime? 成员,但在使用 .NET 5.0 和 MudBlazor 5.2.5 的 Visual Studio 2019 中出现验证错误。 <MudTextField Format="s" InputType="InputType.DateTimeLocal" @bind-Value="testdate" /> @code { private DateTime? testdate { get; set; } } 如上所述,我尝试通过尽可能简化代码来隔离问题,但我无法进一步挖掘。 我尽可能多地搜索,但找不到有相同问题的主题。 我想请知情人士提供建议。 用途:T="DateTime?" <MudTextField T="DateTime?" Format="s" InputType="InputType.DateTimeLocal" @bind-Value="testdate" /> @code { private DateTime? testdate { get; set; } }

回答 1 投票 0

将焦点从输入移动到选择时保持选择可见

有没有办法让它像下拉菜单一样 这样,当我在输入或选择外部单击时,下拉菜单(选择)就会消失,同时当我将焦点从...

回答 1 投票 0

我的表格未在 blazor 中正确更新

我有一个名为 GetGridCuentas 的函数,它调用上下文以获取要在我的表格中显示的数据。它第一次工作,但之后它不断得到同一张表,但它不

回答 1 投票 0

Blazor Mudblazor 表单验证未使用多级子组件触发

我正在使用 Blazor Mudblazor v6.17.0 并且我有一个名为 CustomerComponent 的组件 我正在使用 Blazor Mudblazor v6.17.0 并且我有一个名为 CustomerComponent 的组件 <div class="row" style="padding-top:10px;"> <div class="col-4 mb-3"> <MudAutocomplete id="name" For="@(() => Customer.Name)" T="string" Label="Name:" @bind-Value="Customer.Name" SearchFunc="@SearchCustomer" Margin="Margin.Dense" Dense="true" Variant="Variant.Outlined" /> </div> </div> @code { [Parameter] public Customer Customer { get; set; } [Parameter] public IEnumerable<string> CustomerList { get; set; } private Task<IEnumerable<string>> SearchCustomer(string value) { if (string.IsNullOrEmpty(value)) { Customer.Name = ""; return Task.FromResult(CustomerList); } var filteredList = CustomerList.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase)); return Task.FromResult(filteredList); } 以及使用该组件的组件,称为 CustomerTemplateComponent <EditForm Model="@Template" OnValidSubmit="SaveEvent"> <DataAnnotationsValidator/> <br /> <div class="row" style="padding-top: 6px;"> <div class="col-12"> <MudTextField id="TemplateName" For="@(() => Template.TemplateName)" @bind-Value="Template.TemplateName" Label="Template Name:" Variant="Variant.Outlined" Margin="Margin.Dense"></MudTextField> </div> </div> <CustomerComponent Currencies="@Currencies" CustomerList="@CustomerList" Customer="@Template.Customer" "/> <div class="row" style="padding-top:8px;"> <div class="col-12 text-end mb-3"> <button class="btn btn-primary" disabled="@Processing" id="Save-Button">Save</button> <div type="button" class="btn btn-secondary" @onclick="CancelEvent" id="Cancel-Button">Cancel</div> </div> </div> </EditForm> } @code { [Parameter] public bool Processing { get; set; } [Parameter] public Template Template { get; set; } [Parameter] public EventCallback CancelEvent { get; set; } [Parameter] public EventCallback SaveEvent { get; set; } [Parameter] public IEnumerable<string> CustomerList { get; set; } } 该组件的使用方式如下 这里使用的是这个 <MudPaper Elevation="10"> <MudGrid Class="d-flex align-content-center justify-center flex-grow-1 gap-4" Style="padding:10px;"> <CustomerTemplateComponent CancelEvent="@Cancel" CustomerList="@Customers" SaveEvent="@Save" Processing="@Processing" Customer="@_customer" /> </MudGrid> </MudPaper> private async Task Save() { Processing = true; try { await _templateService.SaveAsync(_template); ToastService.ShowSuccess("Template Updated."); NavigationManager.NavigateTo("/tradetemplates"); } catch (Exception ex) { Logger.Error(ex, "Error saving templates."); ToastService.ShowError(ex.Message); } finally { Processing = false; } } here are the classes public class Template { public string TemplateName { get; set; } public Customer Customer { get; set; } } public class Customer { public string Name { get; set; } } 我遇到的问题是,当单击按钮时,表单未经过验证,并且使用无效模式调用 api,基本组件也不会绑定。当参数深入两层时,我应该使用级联参数还是其他参数?或者是否存在不同的错误,因为当我从顶级表单使用基本组件时,它工作正常。 可以找到工作示例https://try.mudblazor.com/snippet/GEGSkxGrGBqyVXZR 为了确保在父组件的 EditForm 中捕获子组件验证,您可以使用 EditContext.OnValidationRequested,将 EditContext 作为 CascadingParameter 从父组件传递到子组件。 注意:我在这里使用了@bind-Customer // CustomerTemplateComponent.razor <EditForm Model="@Template" OnValidSubmit="SaveEvent" Context="EditContext"> <DataAnnotationsValidator/> <br /> <div class="row" style="padding-top: 6px;"> <div class="col-12"> <MudTextField id="TemplateName" For="@(() => Template.TemplateName)" @bind-Value="Template.TemplateName" Label="Template Name:" Variant="Variant.Outlined" Margin="Margin.Dense"> </MudTextField> </div> </div> <CascadingValue Value="EditContext"> <CustomerComponent CustomerList="@CustomerList" @bind-Customer="@Template.Customer"/> </CascadingValue> <div class="row" style="padding-top:8px;"> <div class="col-12 text-end mb-3"> <button class="btn btn-primary" disabled="@Processing" id="Save-Button">Save</button> <div type="button" class="btn btn-secondary" @onclick="CancelEvent" id="Cancel-Button">Cancel</div> </div> </div> </EditForm> @code { [Parameter] public bool Processing { get; set; } [Parameter] public Template Template { get; set; } [Parameter] public EventCallback CancelEvent { get; set; } [Parameter] public EventCallback SaveEvent { get; set; } [Parameter] public IEnumerable<string> CustomerList { get; set; } private EditContext EditContext; protected override void OnInitialized() { EditContext = new EditContext(Template); } } 然后,在子组件中,即CustomerComponent。我们订阅 EditContext.OnValidationRequested 事件,当表单请求验证时,即单击提交按钮时,该事件将被触发。在这里,我们可以使用此事件来验证属性,然后 EditContext.NotifyValidationStateChanged 将验证传播回父组件 EditContext。 其他一些更改: 将@bind-Value更改为使用Value和ValueChanged,因为我们需要在MudAutoComplete的值发生变化时实现自定义逻辑,这允许我们在父组件上使用@bind-Customer。 ValidationMessageStore - 用于保存验证消息,并在实例化时绑定到 EditContext,即 new ValidationMessageStore(ParentEditContext); // CustomerComponent.razor @using System.ComponentModel.DataAnnotations @using Microsoft.AspNetCore.Components.Forms @implements IDisposable <div class="row" style="padding-top:10px;"> <div class="col-4 mb-3"> <MudAutocomplete id="name" T="string" Label="Name:" Value="@Customer.Name" ResetValueOnEmptyText="true" ValueChanged="@HandleNameChanged" SearchFunc="@SearchCustomer" For="@(() => Customer.Name)" Margin="Margin.Dense" Dense="true" Variant="Variant.Outlined" /> </div> </div> @code { [CascadingParameter] public EditContext ParentEditContext { get; set; } private ValidationMessageStore _messageStore; [Parameter] public Customer Customer { get; set; } [Parameter] public EventCallback<Customer> CustomerChanged { get; set; } [Parameter] public IEnumerable<string> CustomerList { get; set; } protected override void OnInitialized() { if (ParentEditContext != null) { _messageStore = new ValidationMessageStore(ParentEditContext); ParentEditContext.OnValidationRequested += (sender, eventArgs) => { _messageStore.Clear(); Validate(); ParentEditContext.NotifyValidationStateChanged(); }; } } async Task HandleNameChanged(string newName) { Customer.Name = newName; await CustomerChanged.InvokeAsync(Customer); } void Validate() { var validationResults = new List<ValidationResult>(); var context = new ValidationContext(Customer) { MemberName = nameof(Customer.Name) }; Validator.TryValidateProperty(Customer.Name, context, validationResults); foreach (var validationResult in validationResults) { _messageStore.Add(new FieldIdentifier(Customer, nameof(Customer.Name)), validationResult.ErrorMessage); } } public void Dispose() { if (ParentEditContext != null) { ParentEditContext.OnValidationRequested -= (sender, eventArgs) => { _messageStore.Clear(); Validate(); ParentEditContext.NotifyValidationStateChanged(); }; } } private Task<IEnumerable<string>> SearchCustomer(string value) { if (string.IsNullOrEmpty(value)) { Customer.Name = ""; return Task.FromResult(CustomerList.AsEnumerable()); } var filteredList = CustomerList.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase)); return Task.FromResult(filteredList.AsEnumerable()); } } 演示👉MudBlazor 片段 如果您想重新验证整个对象而不仅仅是一个属性,那么您可以使用 Validator.TryValidateObject。我已将该片段包含在演示中。 void ValidateEntireObject() { var validationResults = new List<ValidationResult>(); Validator.TryValidateObject(Customer, new ValidationContext(Customer), validationResults, true); foreach (var validationResult in validationResults) { _messageStore.Add(new FieldIdentifier(Customer, validationResult.MemberNames.First()), validationResult.ErrorMessage); } }

回答 1 投票 0

为什么 Blazor 值更改后没有立即渲染?

在 WinForms .NET 8 表单中使用 BlazorWebView 控件(简介),我确实显示了这个“Counter.razor”文件: 在 WinForms .NET 8 表单中使用 BlazorWebView 控件(简介),我确实显示了这个“Counter.razor”文件: <p><button @onclick="IncrementCount">Increment counter</button></p> <p>@_counterValue</p> @code { private int _counterValue = 0; private void IncrementCount() { _counterValue++; } } 正确的行为 上面的代码完美运行: 用户单击按钮。 变量递增。 页面显示新的变量值。 不正确的行为 现在我将 IncrementCount() 方法更改为: private void IncrementCount() { SynchronizationContext.Current!.Post( delegate { _counterValue++; }, null); } 现在它的行为是这样的: 用户单击按钮。 变量递增(现在为“1”)。 页面仍显示“0”。 用户再次单击按钮。 变量再次递增。 (现在是“2”)。 页面显示“1”。 等等。 即我总是有一个相差一的错误。 修复它 要解决此问题,我必须将代码更改为: private void IncrementCount() { SynchronizationContext.Current!.Post( delegate { _counterValue++; StateHasChanged(); }, null); } 现在,添加对 StateHasChanged() 的调用后,它的行为符合预期: 用户单击按钮。 变量递增。 页面显示新的变量值。 背景 上面SynchronizationContext的用法是一个大型应用程序的最小示例,我必须通过这种机制调度调用(主要是因为我必须调用其他WinForms对话框)。 我确实想了解为什么需要调用“StateHasChanged”,因为我想避免它。 在我的实际应用程序中(不是上面的最小示例),这将强制进行大量重新渲染以适合应用程序。 我的问题 有人可以向我解释一下为什么我直接更改变量与通过SynchronizationContext更改变量的行为不同吗? 是否有更改可以使其工作而无需额外调用 StateHasChanged()? 更新1 在我的现实世界应用程序中,我大致执行以下步骤: 用户单击 Blazor 按钮。 显示 WinForms 表单。 关闭表单后,我必须更新 Blazor 中的一些值。 所以这就是我在 SynchronizationContext.Current!.Post() 调用中执行代码的原因,如建议的 here。 我还尝试将我的代码放入队列中并在 Application.Idle 事件处理程序中处理该队列,但这行为完全相同(相差一错误)。 IncrementCounter 由渲染器的 UI 事件进程发布到 同步上下文。它在 callback UI 处理程序中作为 ComponentBase 传递。 Task IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, object? arg) { var task = callback.InvokeAsync(arg); var shouldAwaitTask = task.Status != TaskStatus.RanToCompletion && task.Status != TaskStatus.Canceled; // After each event, we synchronously re-render (unless !ShouldRender()) // This just saves the developer the trouble of putting "StateHasChanged();" // at the end of every event callback. StateHasChanged(); return shouldAwaitTask ? CallStateHasChangedOnAsyncCompletion(task) : Task.CompletedTask; } 完整代码可以在这里找到:https://github.com/dotnet/aspnetcore/blob/63c8031b6a6af5009b3c5bb4291fcc4c32b06b10/src/Components/Components/src/ComponentBase.cs#L322 所以你正在做的就是发布这个 { _counterValue++; } 作为代码块进入IncrementCounter后面的同步上下文队列。 IncrementCounter 在执行代码之前完成所有渲染并改变 _counterValue。 当直接更改时,突变会在 UI 处理程序中调用 StateHasChanged 之前发生。 问题:为什么要直接将代码发布到同步上下文? ComponentBase具有内置函数InvokeAsync来调用必须在同步上下文上执行的任何代码,请参阅 - https://github.com/dotnet/aspnetcore/blob/63c8031b6a6af5009b3c5bb4291fcc4c32b06b10/src/Components/Components/ src/ComponentBase.cs#L178 注: 我现在从来没有编写过这个代码: private void IncrementCount() { } 我总是这样做: private Task IncrementCount() { //work return Task.CompletedTask; } 它可以防止这种情况发生: private async void IncrementCount() { }

回答 1 投票 0

如何在MarkupString中绑定事件

@if(!string.IsNullOrEmpty(_markup)) { @((标记字符串)_标记) } @代码 { 公共字符串_markup =“AB @if(!string.IsNullOrEmpty(_markup)) { @((MarkupString)_markup) } @code { public string _markup = "<ul><li class='li-a'>A</li><li class='li-a'>B</li></ul>"; } 我想在 MarkupString 中绑定事件。 我留下问题是因为我对 Blazor 没有足够的了解,因此,我没有足够的关键字在 Google 上搜索。 前) public string _markup = "<ul><li class='li-a' @onclick="(e) => clicktext(e)">A</li><li class='li-a' @onclick="(e) => clicktext(e)">B</li></ul>"; void clicktext(object e) { //code here.. } 你不能用 MarkupString 来做到这一点。如果您想要交互行为,您需要使用 RenderFragment。由于您没有提供问题的任何背景信息,我不知道这是否适合您的用例。 这是一个简单的例子: @page "/" @using Microsoft.AspNetCore.Components.Rendering <PageTitle>Home</PageTitle> <h1>Hello, world!</h1> @_markup @code{ private RenderFragment _markup => (__builder) => { <ul> <li class="li-a" @onclick="OnClickText">A</li> <li class="li-a" @onclick="OnClickText">B</li> </ul> }; private Task OnClickText(MouseEventArgs e) { //code here.. return Task.CompletedTask; } }

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.