blazor 相关问题

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

如何在 Blazor 版本 8 InteractiveServer 中实现防伪功能?

我正在将 Blazor 版本 6/7 服务器转换为版本 8 InteractiveServer。 在版本 6/7 中,我在 _Host.cshtml 中使用以下内容设置了防伪功能 @inject IAntiforgery Xsrf // ... @{ ...

回答 1 投票 0

Blazor 版本 8 - 无法加载资源

我正在将 Blazor 服务器应用程序版本 6/7 转换为 InteractiveServer 版本 8。为此,我基本上将 _Host.cshtml 复制到 App.razor,然后删除 _Host.cshtml。 所以 App.razor 现在有: 我正在将 Blazor 服务器应用程序版本 6/7 转换为 InteractiveServer 版本 8。为此,我基本上将 _Host.cshtml 复制到 App.razor,然后删除 _Host.cshtml。 App.razor 现在具有: <head> <!-- Copyright (c) 2023 by David Thielen - ALL RIGHTS RESERVED --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/png" href="favicon.png" /> <base href="~/" /> <!-- Bootstrap includes --> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <!-- MudBlazor includes --> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <!-- DevExpress includes --> <link href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.bs5.css" rel="stylesheet" asp-append-version="true" /> <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" asp-append-version="true" /> <!-- AzureMapControl --> <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" /> <!-- app includes --> <link href="css/elements.css" rel="stylesheet" asp-append-version="true" /> <link href="css/chrome.css" rel="stylesheet" asp-append-version="true" /> <link href="css/components.css" rel="stylesheet" asp-append-version="true" /> <link href="css/pages.css" rel="stylesheet" asp-append-version="true" /> <link href="css/overrides.css" rel="stylesheet" asp-append-version="true" /> <link href="LouisHowe.web.styles.css" rel="stylesheet" /> <script src="~/js/Interop.js"></script> <HeadOutlet @rendermode="InteractiveServer" /> </head> 并且没有任何 css 文件正在加载。我收到 404 无法加载所有资源的错误消息。我需要做什么才能找到并加载这些? 找到它 - _Host.cshtml 有: <base href="~/" /> App.razor 需要它是: <base href="/" /> 我不知道为什么会发生这样的变化。不知怎的,~已经失去了意义,但我找不到任何讨论这个的内容。

回答 1 投票 0

尝试在 Blazor 项目中生成 html

我正在尝试制作多个盒子。我有一个错误说无法从 void 转换为对象。这是我第一次使用 Blazor。我哪里出错了? 我的选择清单- 我正在尝试制作多个盒子。我有一个错误说无法从 void 转换为对象。这是我第一次使用 Blazor。我哪里出错了? 我的选择列表- <form method="post" action=""> Groups<br /> <select @bind="groups"> @for (int i = 1; i <= 16; i++) { <option value="@i">@i</option> } </select> </form> <p>Selected Value: @groups</p> 运行方法 <div> @makeGroups() </div> @code{ int groups = 1; void makeGroups() { for (int i = 1; i <= groups; i++) { <div class="leftBox"> </div> <div class="middleBox"> </div> <div class="rightBox"> </div> } } 有多种方法可以实现您想要的目标。我将列出一些选项/想法。 第一个选项是在 html 部分内使用 for 循环: <form method="post" action=""> Groups<br /> <select @bind="groups"> @for (int i = 1; i <= 16; i++) { <option value="@i">@i</option> } </select> </form> <p>Selected Value: @groups</p> <div> @for (int i = 1; i <= groups; i++) { <div class="leftBox"> </div> <div class="middleBox"> </div> <div class="rightBox"> </div> } </div> @code { int groups = 1; } 您在单独的 Razor 组件中添加 for 循环。 例如:GroupView.razor: @for (int i = 1; i <= NumberOfGroups; i++) { <div class="leftBox"> </div> <div class="middleBox"> </div> <div class="rightBox"> </div> } @code { [Parameter] public int NumberOfGroups { get; set; } } 并像这样使用它: <form method="post" action=""> Groups<br /> <select @bind="groups"> @for (int i = 1; i <= 16; i++) { <option value="@i">@i</option> } </select> </form> <p>Selected Value: @groups</p> <div> <GroupView NumberOfGroups="groups" /> </div> @code { int groups = 1; } 创建一个返回 RenderFragment 类似于您最初意图的方法: <form method="post" action=""> Groups<br /> <select @bind="groups"> @for (int i = 1; i <= 16; i++) { <option value="@i">@i</option> } </select> </form> <p>Selected Value: @groups</p> <div> @MakeGroups() </div> @code { int groups = 1; private RenderFragment MakeGroups() { return (__builder) => { for (int i = 1; i <= groups; i++) { <div class="leftBox"> </div> <div class="middleBox"> </div> <div class="rightBox"> </div> } }; } }

回答 1 投票 0

iPhone 中的相机在 Blazor WASM 的 Web 浏览器中无法工作

我们在 blazor WASM 中编写了以下代码,我们试图在网络浏览器上捕获用户的图像。 索引剃刀 我们在 blazor WASM 中编写了以下代码,我们试图在网络浏览器上捕获用户的图像。 索引.razor <div class="v-canvas"> <video id="videoFeed" width="320" height="240" /> <canvas class="d-none" id="currentFrame" width="320" height="240" /> </div> <button @onclick="CaptureFrame"> <span>Capture</span> </button> @code { protected override async Task OnInitializedAsync() { await JSRuntime.InvokeVoidAsync("startVideo", "videoFeed"); } private async Task CaptureFrame() { await JSRuntime.InvokeAsync<String>("getFrame", "videoFeed", "currentFrame",DotNetObjectReference.Create(this)); } } [JSInvokable] public async Task ProcessImage(string imageString) { //Some logic } Javascript代码 function startVideo(src) { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) { let video = document.getElementById(src); if ("srcObject" in video) { video.srcObject = stream; } else { video.src = window.URL.createObjectURL(stream); video.webkitMatchesSelector.src = window.URL.createObjectURL(stream); } video.onloadedmetadata = function (e) { video.play(); video.webkitMatchesSelector.play(); Play(src); }; //mirror image video.style.webkitTransform = "scaleX(-1)"; video.style.transform = "scaleX(-1)"; }); } } function getFrame(src, dest, dotNetHelper) { let video = document.getElementById(src); let canvas = document.getElementById(dest); canvas.getContext('2d').drawImage(video, 0, 0, 320, 240); let dataUrl = canvas.toDataURL("image/jpeg"); dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl); } 以上解决方案已发布在IIS上,并在多设备上进行了测试。 这适用于 iPad、MacBook、Windows 笔记本电脑和 Android 手机。 对于 Safari/Chrome 中的 iPhone,即使授予相机权限后,视频也根本不会在浏览器中加载。 此代码的参考取自 - https://wellsb.com/csharp/aspnet/blazor-webcam-capture 找了好久才找到解决办法。 我必须在js文件的视频标签中添加以下属性。 let video = document.getElementById(src); video.setAttribute('autoplay', ''); video.setAttribute('muted', ''); video.setAttribute('playsinline', ''); 希望这对其他人有帮助:)

回答 1 投票 0

如何通过 RemoteNavigationManager 避免 TaskCanceledException

我有一个 Blazor 服务器应用程序,每隔几分钟我就会在日志中看到以下内容: 错误 12:09:54 [] Microsoft.AspNetCore.Components.Server.Circuits.RemoteNavigationManager - 导航失败...

回答 1 投票 0

为什么我的按钮不能调用按钮类型为按钮的函数?

我正在制作一个食谱网站,用户可以上传自己的食谱。我正在努力处理我的 CreateRecipe 页面。我希望用户输入成分名称、成分数量和单位...

回答 1 投票 0

Blazor 的 FocusAsync 并不总是设置焦点

我无法使 .NET 6 的 Blazor AsyncFocus 方法工作。 据我所知,AsyncFocus 仅在组件值不为空时才起作用。该模型确保组件值不为空。 模型: 命名空间

回答 2 投票 0

Blazor-EditForm InputCheckbox 可空布尔问题解决方案

我正在尝试为 Blazor 上从输入库派生的编辑表单创建定制输入,但是我很难掌握它,因为我这周最近才学习 Blazor 和 C#,一般来说...

回答 3 投票 0

如何在 Blazor QuickGrid 中的断点处隐藏/显示列?

在 Blazor 8 中使用常规 Bootstrap 5 方法时,通过将 Class="d-sm-none d-md-block" 添加到 QuickGrid 组件的 PropertyColumn 以便在小屏幕上隐藏它,Bootstrap ...

回答 1 投票 0

Blazor 服务器模式如何在刷新页面时维护 AuthenticationStateProvider 的状态?

Blazor 服务器模式如何在刷新页面时维护 AuthenticationStateProvider 的状态? 刷新浏览器页面时状态被清除,需要重新登录。我希望...

回答 1 投票 0

Blazor .net8 @onclick 不起作用。怎么解决?

我在 Blazor .net8 中创建了一个组件,但 @onclick 未激活。它甚至与以前版本的颜色不同 以前是这样的 我做的一切都和旧版本一样,只是在这里我

回答 2 投票 0

在 InteractiveServer(流式传输)模式下运行 Blazor 版本 8

我正在尝试将我的 Blazor 服务器端(版本 6/7)应用程序转换为版本 8。我想继续在服务器模式下使用 InteractiveServer,而不是 InteractiveAuto。 最快显示我的页面的方法是设置

回答 1 投票 0

MudBlazor 上的多选不更新文本字段

我正在将 MudBlazor 用于 Blazor 项目。我正在尝试使用枚举创建多选组件。我让它工作,以便组件显示并正确选择选择。这是...

回答 1 投票 0

Blazor WASM 异常导致数百个额外的套接字和连接异常

我刚刚开始学习 Blazor WASM(通常我是后端开发人员),我对经常发生的事情感到困惑。 这可能是一个非常菜鸟的问题,但请...

回答 3 投票 0

Blazor 组件继承,没有任何渲染

我想做简单的组件继承,但是当我导航到 /testpage 时我没有看到任何东西我做错了什么? 测试基地: @继承组件库 @if (!string.IsNullOrEmpty(名称)) { &l...

回答 1 投票 0

指定的 deps.json[] 不存在 - Blazor WebAssembly App 项目类型

我看过类似的帖子,但我无法找到解决方案来完成这项工作。 我启动一个新应用程序并尝试任何 ef 命令,然后收到此消息。我以前从未在任何

回答 3 投票 0

MudBlazor 中针对复杂对象的可扩展行

我有一个 EmployeeModel,我想将其显示在 MudTable 中。员工有一些标准属性,例如姓名、电子邮件等,还有就业率列表。例如员工

回答 1 投票 0

如何在动态生成/操作的 HTML 上添加 @onclick 函数?

我有一些代码,它搜索文本字符串,并将某个子字符串的所有实例替换为包含 onclick 函数的元素。它看起来像这样: 私人str...

回答 2 投票 0

使用长轮询通过 SignalR 快速打开新选项卡会导致最后几个选项卡永远无法完成加载

我有一个在 IIS 服务器上运行的 Blazor 服务器应用程序。我没有意识到我需要在 IIS 中启用 WebSocket,因此我的应用程序一直使用长轮询而不是 WebSocket 运行...

回答 1 投票 0

如何为 Blazor 创建 Fluent UI 自定义主题

所以我正在查看设计主题文档 https://www. Fluentui-blazor.net/DesignTheme 看起来在我的 App.razor 中我打算创建我的自定义主题,如下所示: 所以我正在查看设计主题文档https://www. Fluentui-blazor.net/DesignTheme 看起来在我的 App.razor 中我应该像这样创建自定义主题: <FluentDesignTheme CustomColor="#00FFFF" StorageName="customtheme" /> 这意味着将记录添加到我的本地存储中,如下所示: "customtheme" = {"primaryColor": "#00FFFF"} 但是这个主题没有出现在我的本地存储中。 如何创建自定义主题并按需将其应用到组件?我不想更改我的整个应用程序,但即使我这样做了,我也无法让记录的示例在我的 v4.3.1 项目中运行。任何帮助将不胜感激!也许有人有一个示例存储库我可以查看主题?阅读文档后,我不确定 Fluent UI 主题系统是否有效或是否能满足我的需求(创建主题然后将其应用到组件) 谢谢! 将此添加到您的 <body/> 标签的末尾。 ... <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script> <loading-theme storage-name="theme"></loading-theme> </body> Options.razor页面设置主题。 @page "/options" @rendermode InteractiveServer <PageTitle>Options</PageTitle> <FluentDesignTheme @bind-Mode="@Mode" @bind-CustomColor="@CustomColor" @bind-OfficeColor="@OfficeColor" StorageName="theme" /> <FluentSwitch @bind-Value=UseCustomColor Label="@(UseCustomColor ? "Custom Colours": "Office Colours")" /> @if (UseCustomColor) { <FluentGrid> <FluentGridItem> <FluentSelect Label="Theme" Width="250px" Items="@(Enum.GetValues<DesignThemeModes>())" @bind-SelectedOption="@Mode" /> </FluentGridItem> <FluentGridItem> <FluentStack Orientation="Orientation.Vertical" VerticalGap="4"> <FluentLabel>Color</FluentLabel> <input type="color" @bind=@CustomColor @bind:event="oninput" style="height:32px;margin:0;padding:0;" /> </FluentStack> </FluentGridItem> </FluentGrid> } else { <FluentGrid> <FluentGridItem> <FluentSelect Label="Theme" Width="250px" Items="@(Enum.GetValues<DesignThemeModes>())" @bind-SelectedOption="@Mode" /> </FluentGridItem> <FluentGridItem> <FluentSelect Label="Color" Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))" Height="200px" Width="250px" @bind-SelectedOption="@OfficeColor"> <OptionTemplate> <FluentStack> <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())" Color="Color.Custom" CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" /> <FluentLabel>@context</FluentLabel> </FluentStack> </OptionTemplate> </FluentSelect> </FluentGridItem> </FluentGrid> } <FluentGrid Style="margin: 30px 0px; padding: 30px; border: 1px solid var(--accent-fill-rest);"> <FluentGridItem> <FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" /> </FluentGridItem> <FluentGridItem> <FluentLabel>Example of content</FluentLabel> </FluentGridItem> <FluentGridItem> <FluentButton Appearance="Appearance.Outline">Outline button</FluentButton> </FluentGridItem> <FluentGridItem> <FluentButton Appearance="Appearance.Accent">Accent button</FluentButton> </FluentGridItem> </FluentGrid> @code { private bool useCustomColor; private string? customColor = null; public DesignThemeModes Mode { get; set; } public OfficeColor? OfficeColor { get; set; } public string? CustomColor { get => customColor; set { customColor = value; UseCustomColor = (value is not null); } } public bool UseCustomColor { get => this.useCustomColor; set { if (value is true) { this.OfficeColor = null; } else { this.customColor = null; } this.useCustomColor = value; } } }

回答 1 投票 0

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