blazor 相关问题

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

我正在尝试将导航栏固定在模拟选项卡栏的底部，图标位于页面名称的顶部。这是我的 NavMenu.razor 上的代码：我正在尝试将导航栏固定在模拟选项卡栏的底部，图标位于页面名称的顶部。这是我的 NavMenu.razor 上的代码： <nav class="navbar navbar-dark navbar-expand fixed-bottom bg-dark justify-content-center"> <div class="container-fluid"> <ul class="navbar-nav nav-justified w-100 text-center"> <li class="nav-item"> <NavLink class="nav-link d-flex flex-column" href="" Match="NavLinkMatch.All"> <i class="bi bi-house-fill" aria-hidden="true"></i> <span>Home</span> </NavLink> </li> <li class="nav-item"> <NavLink class="nav-link d-flex flex-column" href="book"> <i class="bi bi-calendar-check-fill" aria-hidden="true"></i> <span>Book</span> </NavLink> </li> <li class="nav-item"> <NavLink class="nav-link d-flex flex-column" href="profile"> <i class="bi bi-person-fill" aria-hidden="true"></i> <span>Profile</span> </NavLink> </li> <li class="nav-item"> <NavLink class="nav-link d-flex flex-column" href="settings"> <i class="bi bi-gear-fill" aria-hidden="true"></i> <span>Settings</span> </NavLink> </li> </ul> </div> 这是我的 MainLayout.razor： <div class="page"> <NavMenu /> <main> <article class="content px-4"> @Body </article> </main> 但结果很糟糕：尽管这个 jsfiddle 显示了正确的行为： https://jsfiddle.net/5orphjv4/2/ 知道我做错了什么吗？我可以重现您的问题，这是因为导航栏使用默认的NavMenu.razor.css。您可以通过更改默认的 css 样式来修复它。使第一个导航项与其他导航项位于同一行：打开NavMenu.razor下面的NavMenu.razor.css，删除以下代码： .nav-item:first-of-type { padding-top: 1rem; } 使点击效果包含文字：打开 NavMenu.razor 下面的 NavMenu.razor.css，然后更改导航项的高度： .nav-item ::deep a { color: #d7d7d7; border-radius: 4px; height: 5rem; display: flex; align-items: center; line-height: 3rem; } 结果图像：

blazor bootstrap-5 maui-blazor

回答 1 投票 0

为什么我的 MAUI Blazor 混合应用程序将输入框放在弹出按钮上？

我有一个非常基本的 MAUI Blazor 混合应用程序，我一直根据这个视频系列构建。在“Windows Machine”下调试时，它会显示带有 4 个选项的左侧导航栏。直到

android blazor maui hybrid flyout

回答 1 投票 0

Blazor 应用程序部署到 iis 服务器后未加载

我已将应用程序部署到 IIS 服务器，当页面尝试加载时出现以下错误我收到此页面不工作网站当前无法处理此请求。 HTTP 错误 500

c# iis blazor

回答 1 投票 0

为什么 OnInitializedAsync() 在页面重新加载时调用两次

通常，在 Blazor 版本 8 中创建和呈现页面时，RenderMode.InteractiveServer 会调用一次 OnInitializedAsync()。但是当我在 Chrome 上执行 Reload 时，它会被调用两次。一个...

blazor blazor-server-side

回答 1 投票 0

Microsoft.FluentUI 刷新时渲染问题

使用FluentUI时出现渲染问题。问题是 - 当您刷新页面（F5）时 - 它正在闪烁（看起来最初它是在没有任何样式的情况下渲染的，并且仅在几毫秒后......

blazor fluent-ui

回答 1 投票 0

如何将 Blazor 版本 7 服务器转换为版本 8 InteractiveServer？

我有一个 Blazor 版本 6/7 服务器应用程序，需要将其转换为版本 8 InteractiveServer。我这里有防伪代码，也需要更改。我需要做出哪些改变？

blazor blazor-server-side

回答 1 投票 0

无法将类型“System.Net.HttpResponseMessage”隐式转换为我的对象

我对此很陌生，我面临着这个我不理解的问题。我正在尝试创建一个代码，可以在其中更新数据库中用户的数据。下面的代码块显示错误：使用...

c# asp.net-core blazor dotnet-httpclient api-design

回答 1 投票 0

<select> 值不会绑定到 .net 8 Identity Blazor Web App 脚手架注册页面中的模型

我正在启用“Web 应用程序”的“Web 应用程序”中使用 .net 8 脚手架 blazor 身份页面。我已将 a 添加到带有硬编码值的表单中，并将 int Id 绑定到所选值。然而当...

asp.net blazor blazor-server-side

回答 1 投票 0

值“”对于

我有一个 Blazor Web 应用程序，它使用 System.ComponentModel.DataAnnotations 属性在注册表单中进行验证。我有一个名为 NationalCode 的属性，它可以为 null long 我没有

c# asp.net validation blazor annotations

回答 1 投票 0

Blazor InteractiveServer 和预渲染 - 何时调用 OnInitializedAsync()？

我正在将我的应用程序从 Blazor Ver 6/7 服务器端升级到 Ver 8 InteractiveServer。我想要预渲染，这将首先渲染页面脚手架/骨架，然后我们花时间从数据库读取到

blazor blazor-server-side

回答 1 投票 0

如何在 Blazor 版本 8 中获取远程 IP 地址

在 Blazor 版本 6/7 中，我可以使用以下命令在 _Host.cshtml 中获取远程 IP 地址： @注入 ILogger 记录器 RemoteIp = HttpContext.GetRemoteIpAddress(Logger); 但这在......

blazor blazor-server-side

回答 1 投票 0

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

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

blazor blazor-server-side

回答 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>  <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="~/" />  <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />  <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />  <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" />  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />  <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="/" /> 我不知道为什么会发生这样的变化。不知怎的，~已经失去了意义，但我找不到任何讨论这个的内容。

blazor blazor-server-side

回答 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> } }; } }

c# html blazor

回答 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', ''); 希望这对其他人有帮助:)

javascript ios .net blazor blazor-webassembly

回答 1 投票 0

如何通过 RemoteNavigationManager 避免 TaskCanceledException

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

blazor blazor-server-side

回答 1 投票 0

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

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

.net asp.net-core blazor blazor-server-side blazor-rendermode

回答 1 投票 0

Blazor 的 FocusAsync 并不总是设置焦点

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