blazor 相关问题

渲染多个相同组件时一次获取API

我有一个 Blazor 组件需要通过 API 获取数据，问题是我在 OnInitializedAsync 函数中调用 fetch API，因此每次渲染组件时 fetch API 都会调用。 因为...

清除选定的下拉菜单项而不使用绑定值

我们如何清除/重置 Radzen DropDown 上的所选项目？ 我没有使用bind-Value来获取所选项目。 相反，我使用 Change() 来获取所选对象。 但是，如果我选择一项...

有没有办法在正则表达式属性中包含动态正则表达式字符串？

我的 Blazor 应用程序上的文本框正在使用 [RegularExpression] 属性进行验证。该属性需要是动态的，因为我需要能够“即时更改验证字符串......”

Blazer 服务器：尝试使用窗口从 JavaScript 调用 .net 方法，DotNet 总是给出错误“未设置调用调度程序”

我正在尝试按照本文档从 Blazer 服务器应用程序中的某些 JavaScript 调用 .net 方法，但我总是得到“未设置呼叫调度程序”。 我想要 .net 方法...

.Net 8 Blazor - 发布后缺少 CSS 文件

我正在启动一个新的.Net 8 Blazor 应用程序。 当我运行 dotnetpublish -c Release 命令并启动已发布的应用程序时，我的 css 文件出现 404 错误。当我开发时不会发生这种情况...

AuthorizationHandler 获取注入服务的新实例

我有一个带有自定义 AuthorizationHandler 和 IAuthorizationRequirement 的 Blazor 应用程序。 AuthorizationHandler 的片段： 内部类 PermissionLevelAuthorizationHandler : AuthorizationHand...

在带有 Open ID Connect 的 Blazor WASM 中，如何强制刷新 Auth/ID 令牌

我有一个 Blazor WASM 应用程序，通过 Open ID Connect 与我的 IdP 集成。我们需要存储在 ID 令牌和身份验证令牌中的自定义声明。这在大多数情况下都运行良好。然而，有一个

在 Blazor 服务器中调用 Android 上的相机

我有这个代码： @page“/斯卡纳” @注入IJSRuntime JS @使用 BlazorBarcodeScanner.ZXing.JS 我有这个代码： @page "/Skaner" @inject IJSRuntime JS @using BlazorBarcodeScanner.ZXing.JS <BarcodeReader Title="Skanuj kod kreskowy" StartCameraAutomatically="true" ShowStart="true" ShowReset="true" ShowToggleTorch="true" ShowVideoDeviceList="true" VideoWidth="300" VideoHeight="200" OnBarcodeReceived="HandleBarcodeReceived" /> @code { private void HandleBarcodeReceived(BarcodeReceivedEventArgs args) { // Przetwarzaj zeskanowany kod Console.WriteLine($"Zeskanowany kod: {args.BarcodeText}"); // Możesz dodać logikę do wyświetlenia lub przetworzenia zeskanowanego kodu } } 当我在 Windows 上运行它时，一切正常。 当我想在 Android 上运行它时，事情会变得更糟，因为它会说这样的话：“Skanuj kod kreskowy 无法枚举设备，方法不受支持。错误：无法枚举设备，方法不受支持。在 t.BrowserMultiFormatReader。 （http://192.168.0.78:8082/_content/BlazorBarcodeScanner.ZXing.JS/zxingjs.index.min.js:15:28105）在Generator.next（）在http://192.168.0.78:8082/_content/ BlazorBarcodeScanner.ZXing.JS/zxingjs.index.min.js:15:27264 at new Promise () at P (http://192.168.0.78:8082/_content/BlazorBarcodeScanner.ZXing.JS/zxingjs.index.min.js ：15：27009）在t.BrowserMultiFormatReader.listVideoInputDevices（http://192.168.0.78：8082/_content/BlazorBarcodeScanner.ZXing.JS/zxingjs.index.min.js：15：27944）在Object.listVideoInputDevices（http：/ /192.168.0.78:8082/_content/BlazorBarcodeScanner.ZXing.JS/BlazorBarcodeScanner.js:92:77) 在 http://192.168.0.78:8082/_framework/blazor.server.js:1:3047 在新的 Promise ()在 y.beginInvokeJSFromDotNet (http://192.168.0.78:8082/_framework/blazor.server.js:1:3004" 该应用程序由 Blazor Server 架构中的 IIS 托管。我使用它，他们的网站（例如在 Android 上）可以正常工作，即会打开一个请求使用相机许可的窗口。 https://www.nuget.org/packages/BlazorBarcodeScanner.ZXing.JS/#readme-body-tab https://www.nuget.org/packages/BlazorBarcodeScanner.ZXing.JS/#readme-body-tab 有什么提示为什么它不起作用吗？ 我将其替换为 BlazorBarcodeScanner.ZXing.JS @page "/SkanerXJ" @using BlazorBarcodeScanner.ZXing.JS.Exceptions @using BlazorBarcodeScanner.ZXing.JS <h3>Skanowanie kodu kreskowego</h3> <BlazorBarcodeScanner.ZXing.JS.BarcodeReader Title="Scan Barcode from Camera" StartCameraAutomatically="false" ShowStart="true" ShowReset="true" ShowToggleTorch="true" ShowVideoDeviceList="true" VideoWidth="600" VideoHeight="480" StreamWidth="1920" StreamHeight="1080" /> <p>Ostatnio zeskanowany kod: @LastScannedCode</p> @code { private string LastScannedCode; // Przykład metody do przypisania zeskanowanego kodu private void OnBarcodeScanned(string barcode) { LastScannedCode = barcode; Console.WriteLine("Zeskanowany kod: " + barcode); } } It only reads 2D codes and I want 1D!!!

使用 Blazor Virtualize 组件加载列表时滚动到底部

加载 Blazor 页面时，我尝试转到 Virtualize 列表的末尾以显示最后的信息（诸如聊天应用程序之类的消息）。 所以我有以下 Blazor 代码： 加载 Blazor 页面时，我尝试转到 Virtualize 列表的末尾以显示最后的信息（诸如聊天应用程序之类的消息）。 所以我有以下 Blazor 代码： <div id="messages-container" style="overflow-y: scroll; height:500px"> <Virtualize Context="message" ItemsProvider="@GetMessages"> <p>@message.Content</p> </Virtualize> </div> <script> function scrollToBottom() { var objDiv = document.getElementById("messages-container"); objDiv.scrollTop = objDiv.scrollHeight; } </script> <button onclick="scrollToBottom();">Manual scroll</button> 在 scrollToBottom() 渲染完第一页消息的初始 DOM 后，如何引发 JS Virtualize 函数？ 如果我在页面的scrollToBottom()方法中执行OnAfterRenderAsync()JS函数，滚动不会按预期工作，因为： ItemsProvider 不会在 OnAfterRenderAsync() 方法之前调用。所以没有检索到数据。 因为没有检索到数据，所以没有渲染 DOM，并且 messages-container 为空，并且有一个 scrollHeight 值定义为 500。 protected override async Task OnAfterRenderAsync(bool firstRender) { await JSRuntime.InvokeVoidAsync("scrollToBottom"); } 但是，在 Virtualize 组件渲染第一页后，如果我单击 Manual scroll 按钮，Virtualize 组件将滚动到数据的最后一页（scrollHeight 值在本例中定义）以 9845 为例）。 如何在 scrollToBottom() 组件的第一页渲染完成后调用 Virtualize JS 函数？ 或者还有其他方法可以转到 Virtualize 组件的底部（最后一页）？ 理性 名为 scrollToBottom 的 JavaScirpt 函数未被调用，因为组件 Virtualize 正在内部调用 StateHasChanged() 事件。根据 Microsoft，StateHasChanged() 事件是 Virtualize 组件调用的唯一状态更改检测器。要检测状态更改，必须实施解决方法。 解决方案 @page "/" @inject IJSRuntime JS; <div id="messages-container" style="overflow-y: scroll; height:500px"> <Virtualize Context="message" ItemsProvider="@((ItemsProviderRequest request)=>{ ValueTask<ItemsProviderResult<Messages>> result = GetMessages(request); ContentChanged(); return result; })"> <p>@message.Content</p> </Virtualize> </div> <script> function scrollToBottom() { var objDiv = document.getElementById("messages-container"); objDiv.scrollTop = objDiv.scrollHeight; console.log(objDiv); } </script> @code{ Messages[] messages { get; set; } public bool initialScroll = true; public class Messages { public string? Id { get; set; } public string? Content { get; set; } } public async void ContentChanged() { if (initialScroll) { initialScroll = false; // Scroll to the end of the first page await JS.InvokeAsync<string>("scrollToBottom"); // Scroll to the last page await JS.InvokeAsync<string>("scrollToBottom"); } } public Task<Messages[]> GenerateDummyMessages() { Messages[] messages = new Messages[1000]; for (int i = 0; i < 1000; i++) { messages[i] = new Messages(); messages[i].Id = i.ToString(); messages[i].Content = $"This is the message nr. {i}"; } return Task.FromResult(messages); } public Task<Messages[]> GetDummyMessages(int start, int count) { int index = 0; Messages[] request = new Messages[count]; while (start < messages.Length && index < request.Length) { request[index] = messages[start]; index++; start++; } return Task.FromResult(request); } public async ValueTask<ItemsProviderResult<Messages>> GetMessages(ItemsProviderRequest request) { int max_size = 1000; DateTime start = DateTime.Now; if (messages == null) messages = await GenerateDummyMessages(); // Render the number of elements requested that is equal to the page size from a start index Messages[] messages_ = await GetDummyMessages(request.StartIndex, request.Count); // SIMULATE DELAY while ((DateTime.Now - start).TotalSeconds < 2); return new ItemsProviderResult<Messages>(messages_, max_size); } } 在 Virtualize 组件中，必须修改 ItemsProvider 委托回调。项目提供程序必须通过 Blazor 属性实现匿名 lambda 函数，该属性请求将 ItemsProviderRequest 作为参数传递给回调方法，在本例中为 GetMessages。在匿名 lambda 函数体内，调用回调方法，其结果存储在变量中，调用执行名为 ContentChanged 的滚动功能的方法，然后由匿名函数返回回调方法的结果Virtualize 组件的 lambda 函数用于渲染内容。 <Virtualize Context="message" ItemsProvider="@((ItemsProviderRequest request)=>{ ValueTask<ItemsProviderResult<Messages>> result = GetMessages(request); ContentChanged(); return result; })"> <p>@message.Content</p> </Virtualize> 在 ContentChanged 方法中，JavaScript 函数被调用两次，第一次滚动到渲染元素第一部分的末尾，第二次滚动到底部以请求加载最后一部分元素。 public bool initialScroll = true; public async void ContentChanged() { if (initialScroll) { initialScroll = false; // Scroll to the end of the first page await JS.InvokeAsync<string>("scrollToBottom"); // Scroll to the last page await JS.InvokeAsync<string>("scrollToBottom"); } } 模拟消息提取服务的方法，模拟延迟2秒。 public async ValueTask<ItemsProviderResult<Messages>> GetMessages(ItemsProviderRequest request) { int max_size = 1000; DateTime start = DateTime.Now; if (messages == null) messages = await GenerateDummyMessages(); // Render the number of elements requested that is equal to the page size from a start index Messages[] messages_ = await GetDummyMessages(request.StartIndex, request.Count); // SIMULATE DELAY while ((DateTime.Now - start).TotalSeconds < 2); return new ItemsProviderResult<Messages>(messages_, max_size); } 结果

C# Blazor EventCallBack 未设置

我是 Blazor 新手，正在尝试一些东西，但在尝试触发回调时遇到了问题。 我的父级是 Home.razor 并包含： @页 ”/” 首页 我是 Blazor 新手，正在尝试一些东西，但在尝试触发回调时遇到了问题。 我的父级是 Home.razor 并包含： @page "/" <PageTitle>Home</PageTitle> <h1>Hello, world!</h1> Welcome to your new app. Increment: <!-- Use @bind for two-way binding --> <input type="number" @bind="_incrementAmount" /> <p>Increment amount: @_incrementAmount</p> <Counter IncrementAmount="_incrementAmount" OnOddCount="@(async (count) => await OddCountDetected(count))" OnEvenCount="@(async (count) => await EvenCountDetected(count))"> </Counter> <div style="color: red; height: @Count; min-height:5px; background-color:burlywood; overflow:auto;"> <p> Odd? @_odd.ToString() </p> </div> @code { private int _incrementAmount { get; set; } = 1; private int _count { get; set; } private bool _odd; public string Count { get { return _count + "px"; } set { _count = int.Parse(value); } } public async Task OddCountDetected(int count) { Console.WriteLine($"OddCountDetected called in Home.razor with count: {count}"); // Debug log _count = count; _odd = true; StateHasChanged(); // Refresh the UI } public async Task EvenCountDetected(int count) { Console.WriteLine($"EvenCountDetected called in Home.razor with count: {count}"); // Debug log _odd = false; StateHasChanged(); // Refresh the UI } } 我的孩子名为 Counter.razor 并包含以下代码 @page "/counter" @rendermode InteractiveServer <PageTitle>Counter</PageTitle> <h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; [Parameter] public int IncrementAmount { get; set; } = 1; [Parameter] public EventCallback<int> OnOddCount { get; set; } [Parameter] public EventCallback<int> OnEvenCount { get; set; } private async Task IncrementCount() { currentCount += IncrementAmount; Console.WriteLine($"Incrementing: Current count = {currentCount}, IncrementAmount = {IncrementAmount}"); // Check if OnOddCount or OnEvenCount should be invoked if (int.IsOddInteger(currentCount)) { Console.WriteLine($"Odd count detected: {currentCount}"); // Log when odd is detected // Check if there is an assigned delegate if (OnOddCount.HasDelegate) { Console.WriteLine("Invoking OnOddCount callback"); // Log when callback is invoked await OnOddCount.InvokeAsync(currentCount); } else { Console.WriteLine("OnOddCount has no delegate"); } } else { Console.WriteLine($"Even count detected: {currentCount}"); // Log when even is detected // Check if there is an assigned delegate if (OnEvenCount.HasDelegate) { Console.WriteLine("Invoking OnEvenCount callback"); // Log when callback is invoked await OnEvenCount.InvokeAsync(currentCount); } else { Console.WriteLine("OnEvenCount has no delegate"); } } } } 在这种情况下，每次我触发 IncrementCount() 方法 OnOddCount.HasDelegate 和 OnEvenCount.HasDelegate 都是 false。 我尝试使用以下代码更改设置委托的方式： <Counter IncrementAmount="_incrementAmount" OnOddCount="@this.OddCountDetected" OnEvenCount="@this.EvenCountDetected"> </Counter> && <Counter IncrementAmount="_incrementAmount" OnOddCount="@OddCountDetected" OnEvenCount="@EvenCountDetected"> </Counter> 我也尝试过这个问题中所说的答案： Blazor EventCallback 参数未触发 但即使我尝试了，它仍然没有设置好。 此外，另一个症状可能是 @_incrementAmount 不会触发 StateHasChanged()，因此不会在页面上显示新值。 首先，确保您以交互模式运行。 我已将我的项目设置为服务器，但也可以是其中之一。 请注意，当您进行实验时，在服务器模式下调试会更容易、更快捷。 首先我的 App 显示已启用全局交互功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <base href="/" /> <link rel="stylesheet" href="bootstrap/bootstrap.min.css" /> <link rel="stylesheet" href="app.css" /> <link rel="stylesheet" href="SO79018875.styles.css" /> <link rel="icon" type="image/png" href="favicon.png" /> <HeadOutlet @rendermode="InteractiveServer" /> </head> <body> <Routes @rendermode="InteractiveServer" /> <script src="_framework/blazor.web.js"></script> </body> </html> 柜台页面 @page "/counter" <PageTitle>Counter</PageTitle> <h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; [Parameter] public int IncrementAmount { get; set; } = 1; [Parameter] public EventCallback<int> OnOddCount { get; set; } [Parameter] public EventCallback<int> OnEvenCount { get; set; } private async Task IncrementCount() { currentCount += IncrementAmount; Console.WriteLine($"Incrementing: Current count = {currentCount}, IncrementAmount = {IncrementAmount}"); // Check if OnOddCount or OnEvenCount should be invoked if (int.IsOddInteger(currentCount)) { Console.WriteLine($"Odd count detected: {currentCount}"); // Log when odd is detected // Check if there is an assigned delegate if (OnOddCount.HasDelegate) Console.WriteLine("Invoking OnOddCount callback"); // Log when callback is invoked else Console.WriteLine("OnOddCount has no delegate"); // Just call it. It handles a null delegate await OnOddCount.InvokeAsync(currentCount); } else { Console.WriteLine($"Even count detected: {currentCount}"); // Log when even is detected // Check if there is an assigned delegate if (OnEvenCount.HasDelegate) Console.WriteLine("Invoking OnEvenCount callback"); // Log when callback is invoked else Console.WriteLine("OnEvenCount has no delegate"); await OnEvenCount.InvokeAsync(currentCount); } } } 和主页： @page "/" <PageTitle>Home</PageTitle> <h1>Hello, world!</h1> Welcome to your new app. Increment: <!-- Use @bind for two-way binding --> <input class="form-control mb-3" type="number" @bind="_incrementAmount" /> <p>Increment amount: @_incrementAmount</p> <Counter IncrementAmount="_incrementAmount" OnOddCount="OddCountDetected" OnEvenCount="EvenCountDetected"> </Counter> <div class="bg-dark text-white m-2 p-2" > <pre> Odd? @_odd.ToString() </pre> </div> @code { private int _incrementAmount { get; set; } = 1; private int _count { get; set; } private bool _odd; public Task OddCountDetected(int count) { Console.WriteLine($"OddCountDetected called in Home.razor with count: {count}"); _count = count; _odd = true; return Task.CompletedTask; } public Task EvenCountDetected(int count) { Console.WriteLine($"EvenCountDetected called in Home.razor with count: {count}"); _odd = false; return Task.CompletedTask; } } 需要强调的要点是： 没有 StateHasChanged 调用，它们内置于 ComponentBase。 删除了很多不必要的async呼叫。

更改 Razor @ref 组件中的属性不会更新其在 HTML 元素中的用法

这里是 Blazor 的初学者。 我有一个非常简单的 Razor 组件，它有一个名为 Paragraph 的属性，该属性由 HTML 元素使用： @段落 @代码 { 酒吧...

如何正确处理多选？

我正在努力处理 .NET 8 Blazor 服务器端应用程序中的多选下拉组件。我正在使用 MudBlazor 选择组件来支持多重选择。 我正在加载来自...的部门列表

使用 python 请求与 Signal-R blazor 服务器对话

有一个由 blazor tech 设计的网站，它不提供使我能够发送常规 HTTP 请求的 REST API 服务。但我需要用 python （像机器人一样）与服务器通信并发送 HTTP

外键约束错误：与不存在的外键冲突

我尝试更新我的迁移，但随后发生错误 ALTER TABLE 语句与 FOREIGN KEY 约束“FK_ClassSessionsDetails_PeopleTypes_PeopleTypeId”冲突。骗局...

Bootstrap 不影响 Blazor 应用程序中的样式

我们将应用程序迁移到.Net 8，Bootstrap 似乎没有像以前那样响应。我设置了一些测试 div 来检查。在我的索引页面中，我设置了一堆 div，它们应该只在

上传前在.Net core Blazor中压缩图像

我需要上传图像然后将其存储在数据库上。我想在将图像上传到服务器之前对其进行压缩或调整大小。我正在尝试 magick.Net，但它现在对我不起作用。还有其他的吗

在 Blazor 服务器中使用实体框架获取联接数据时出现 InvalidOperationException

我正在开发一个 Blazor 服务器端项目，我需要在 OnInitializedAsync 方法中使用 Entity Framework Core 从多个表中获取和联接数据。然而，我遇到了以下...

在 InteractiveServer 模式下渲染 Blazor 时出现问题

我有 Blazor 8.0 应用程序。我使用带有身份日志记录的默认 Blazor 模板。当我使用 日志页面和规范中的其他几个页面时...

InteractiveServer 模式下渲染 blazor 的问题

我有 .net 8.0 的应用程序，blazor。我使用带有身份日志记录的默认 blazor 模板。当我使用 日志页面和位于

.NET Core Blazor Server 无法访问 Cloud Run 中的 Cloud SQL

我的云中有多个使用 PHP 和 .NET Core 运行的应用程序。我现有的 ASP.NET Core Web API 在尝试连接我的 Cloud SQL (MySQL) 时没有问题。使用任一