blazor 相关问题

我有一个 Blazor Web App 应用程序。它有一个 Telerik 向导。第一步，我渲染一个 Stripe Address Web 元素。这是我的 App.razor：我有一个 Blazor Web App 应用程序。它有一个 Telerik 向导。第一步，我渲染一个 Stripe Address Web 元素。这是我的App.razor： <!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="app.css" /> <link rel="stylesheet" href="WizardDemo.styles.css" /> <link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/5.1.1/kendo-theme-bootstrap/all.css" /> <HeadOutlet /> <script src="https://blazor.cdn.telerik.com/blazor/5.1.1/telerik-blazor.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/7.0.2/signalr.min.js"></script> <script src="https://js.stripe.com/v3/"></script> </head> <body> <Routes /> <script src="_framework/blazor.web.js"></script> </body> </html> 它具有 Telerik Blazor 和 Stripe Web Elements 的 <link/> 和 <script/> 标签。这是 Home.razor（结账）页面： @page "/" @inject IJSRuntime JS @rendermode InteractiveServer @using Telerik.Blazor @using Telerik.Blazor.Components <PageTitle>Checkout</PageTitle> <h3>Checkout</h3> <div style="width: 600px; margin: 0 auto;"> <TelerikWizard StepperPosition="@Position"> <WizardSteps> <WizardStep Label="Address" Disabled="StepsDisable[0]"> <Content> <form id="address-form"> <h3>Address</h3> <div id="address-element">  </div> </form> </Content> </WizardStep> <WizardStep Label="Payment" Disabled="StepsDisable[1]"> <Content> <h1>Payment Entry</h1> </Content> </WizardStep> <WizardStep Label="Review" Disabled="StepsDisable[2]"> <Content> <h1>Confirmation</h1> </Content> </WizardStep> </WizardSteps> <WizardSettings> <WizardStepperSettings Linear="true" StepType="StepperStepType.Steps" /> </WizardSettings> </TelerikWizard> </div> @code { IJSObjectReference? module; public WizardStepperPosition Position { get; set; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { module = await JS.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/Home.razor.js"); await module.InvokeVoidAsync("initializeAddress"); } } public Dictionary<int, bool> StepsDisable { get; set; } = new Dictionary<int, bool> { {0, false}, {1, false}, {2, false}, }; public List<Step> Steps { get; set; } = new List<Step> { new Step { Index = 0, Text="Step 1" }, new Step { Index = 1, Text="Step 2" }, new Step { Index = 2, Text="Step 3" } }; public class Step { public int Index { get; set; } public string? Text { get; set; } } } 这是一个带有 TelerikWizard 的服务器页面。请注意，我的第一个 Step 有一个 form 和 address-form id。在 OnAfterRender 中，它导入 Home.razor.js 组件，然后调用 initialzeAddress 函数，如下所示： let elements = {}; export const initializeAddress = () => { // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<my-public-test-key>'); const options = { // Fully customizable with appearance API. appearance: { /* ... */ } }; // Only need to create this if no elements group exist yet. // Create a new Elements instance if needed, passing the // optional appearance object. elements = stripe.elements(/*options*/); // Create and mount the Address Element in shipping mode const addressElement = elements.create("address", { mode: "billing", }); addressElement.mount("#address-element"); } export const handleNextStep = async () => { const addressElement = elements.getElement('address'); return await addressElement.getValue(); }; 首次打开页面时，这会成功加载 Stripe Address Web 元素。我可以填写表格并且它可以正常工作。当我单击 Next 按钮，然后单击 Previous 按钮时，就会出现问题，使我返回到地址步骤。我希望看到地址。但是，我什么也没看到 - 地址表单根本不呈现。当我单击“上一步”按钮返回到该步骤时，如何获取要渲染的地址？当您返回时，<WizardStep Label="Address" Disabled="StepsDisable[0]">部分将由 Blazor 重新渲染（内部包含初始表单）。但是页面的其余部分将不会再次进行（第一次）渲染。 await module.InvokeVoidAsync("initializeAddress"); 行不再执行。如果 TelerikWizard 有一些 StepChanged 事件，那么这将是再次初始化的地方。否则，将地址表单包装在 Blazor 组件中并在其中使用 OnAfterRender 代码。

blazor stripe-payments telerik

回答 1 投票 0

如何从 Blazor 应用程序中的类库访问连接字符串？

在我的解决方案中，我有三个项目：类库（业务逻辑层/数据访问） Blazor WebAssembly 应用程序（客户端应用程序）控制台应用程序（客户端应用程序）我的类库拥有所有业务逻辑：...

c# .net asp.net-core blazor .net-7.0

回答 1 投票 0

当作用域服务实例化两次时，如何在服务器端 Blazor 中实现作用域状态容器？

我有一个关于服务器端 Blazor 的基本问题。在 Blazor WASM 和 MAUI Blazor Hybrid 工作过之后，我现在需要开发一个服务器端 Blazor 应用程序，并且遇到了作用域问题

c# blazor blazor-server-side

回答 1 投票 0

Blazor wasm 身份验证问题

我遇到 Blazor WASM 身份验证问题，此处重现： https://github.com/jahnotto/authfrust 请注意，Home.razor 页面顶部有一个 @attribute [Authorize]。 ...

.net asp.net-core blazor blazor-webassembly

回答 1 投票 0

如何使用 Blazor SSR 访问浏览器的会话存储（无交互性）。 .Net8

使用无交互功能的 Blazor SSR。我需要在每个页面的初始化期间读取会话存储。我尝试过 Nuget 'Blazored.SessionStorage'，但这需要交互性。我也尝试过

asp.net-core blazor

回答 1 投票 0

.Net 8 Blazor Web App 如何将不存在的 url 映射到 <NotFound> 元素

这是一个交互式 WebAssembly Blazor Web 应用程序。当用户单击不存在的网址的链接时，我希望应用程序进入中的元素设置：链接是这样的： ...

.net asp.net-core razor blazor

回答 1 投票 0

Blazor 自定义下拉列表，具有 HTML 选择并按文本排序，而不是枚举值

我正在尝试为枚举构建一个自定义 Blazor 下拉组件，该组件能够按枚举成员的显示值/文本对其进行排序。我有以下代码：我正在尝试为枚举构建一个自定义 Blazor 下拉组件，该组件能够按枚举成员的“显示值/文本”对枚举成员进行排序。我有以下代码： <div> <select value="@this.SelectedValue" @onchange="@this.OnSelectedValueChanged" @key="@this.Items"> @foreach (var value in this.Items) { // Use enum value as value and display name as text. if (value is Enum enumName) { <option id="@value" value="@value">@enumName.GetDisplayName(CultureInfo.CurrentCulture)</option> } } </select> </div> 排序顺序枚举： public enum SortOrder { None, Ascending, Descending } 在文件后面的代码中： private List<TItem?> OriginalItems { get; set; } = []; [Parameter] [EditorRequired] public IEnumerable<TItem?> Items { get; set; } = []; [Parameter] public TItem? SelectedValue { get; set; } [Parameter] public EventCallback<TItem?> SelectedValueChanged { get; set; } [Parameter] public EventCallback<TItem?> OnValueChanged { get; set; } [Parameter] public SortOrder SortOrder { get; set; } protected override void OnInitialized() { base.OnInitialized(); this.OriginalItems = this.Items.ToList(); this.SortItems(); } protected async Task OnSelectedValueChanged(ChangeEventArgs args) { if (args.Value is not string value) { return; } if (this.SelectedValue is Enum _) { try { var result = (TItem?)Enum.Parse(typeof(TItem?), value); await this.SelectedValueChanged.InvokeAsync(result); await this.OnValueChanged.InvokeAsync(result); } catch { // ignored } } } private void SortItems() { if (this.SortOrder == SortOrder.None) { return; } if (typeof(TItem).BaseType == typeof(Enum)) { this.Items = this.SortOrder == SortOrder.Ascending ? [.. this.Items.OrderBy(f => (f as Enum)?.GetDisplayNameForEnum(CultureInfo.CurrentCulture))] : [.. this.Items.OrderByDescending(f => (f as Enum)?.GetDisplayNameForEnum(CultureInfo.CurrentCulture))]; } } GetDisplayValue函数仅获取枚举的显示值，并为放入下拉列表中的所有枚举实现，例如： private static string GetDisplayName(this SortOrder order, CultureInfo culture) { var de = culture.Name.StartsWith("de"); return order switch { SortOrder.None => de ? "Keine" : "None", SortOrder.Ascending => de ? "Aufsteigend" : "Ascending", SortOrder.Descending => de ? "Absteigend" : "Descending", _ => $"[[{type}]]" }; } 还有一个用于过滤的输入字段、过滤方法、过滤器大小以及其他一些内容，例如设置的 id。但是，我删除了它们，因为它们与问题无关。 TItem 是一个通用成员（在我的例子中仅用于枚举）。当我将组件添加到页面时，初始排序起作用。搜索作品。但是，当我选择其中一项时，排序将被忽略，并且 select 似乎会按枚举成员值回退/“排序”（例如，value= 的 option 中指定的内容）。有没有办法始终让 select 按显示名称排序，即使在值选择更改后（调用 OnSelectedValueChanged() 后）？提示：在SortItems()结束时调用OnSelectedValueChanged()不起作用。提示 2：在 SortItems() 中的 this.OriginalItems = this.Items.ToList(); 之前调用 OnInitialized() 也没有帮助。提示 3：对列表进行排序后，使用 this.Items 的列表索引作为选择中的值不起作用，并且会降级，即所选值已正确设置，但不再显示在下拉列表中。我现在想出的解决方案是重写 SortItems 函数以返回一个值，无论集合是否更改（例如重新排序），然后使用 OnAfterRender() 调用 StateHasChanged()。变化： protected override void OnAfterRender(bool firstRender) { if (!firstRender) { if (this.SortItems()) { this.StateHasChanged(); } } base.OnAfterRender(firstRender); } private bool SortItems() { if (this.SortOrder == SortOrder.None) { return false; } if (typeof(TItem).BaseType == typeof(Enum)) { var initialItems = this.Items.ToList(); this.Items = this.SortOrder == SortOrder.Ascending ? [.. this.Items.OrderBy(f => (f as Enum)?.GetDisplayName(CultureInfo.CurrentCulture))] : [.. this.Items.OrderByDescending(f => (f as Enum)?.GetDisplayName(CultureInfo.CurrentCulture))]; return !Enumerable.SequenceEqual(initialItems, this.Items); } return false; }

c# select enums blazor dropdown

回答 0 投票 0

Blazor 8 Web 应用程序在 Azure AD 重定向后进入无限循环并且无法登录

我正在使用 Blazor 8 WebApp 和 Azure AD OIDC 身份验证。一切都在本地工作，但在服务器上，身份验证后，我可以看到重定向无限发生，直到 cookie ......

azure-active-directory blazor openid-connect

回答 1 投票 0

razor.g.cs文件出错，在VS中找不到，找不到_razor.g.cs文件

我在 .razor 文件和 _razor.g.cs 文件中收到“;预期”错误，在以前的 blazor 版本中，我在解决方案文件夹中找到这些 g.cs 文件，现在我在那里找不到它们，并且

blazor .net-6.0 visual-studio-2022

回答 2 投票 0

Blazor .NET 8 - 暂存启动配置文件未启动网站 VS2022

我有一个 Blazor .NET 8 应用程序，我试图让它在 VS2022 的暂存中运行，以便应用配置转换：设置启动配置文件如下：当我运行我的应用程序时，我可以看到...

c# blazor visual-studio-2022 iis-express .net-8.0

回答 1 投票 0

MVC 核心上的 Blazor 服务器在加载 blazor.server.js [.NET8] 时出现错误 500

所以我正在使用最新的 .NET 8 在我们现有的 MVC 核心项目上测试这个 blazor 服务器，运行时总是显示此错误：该请求匹配多个端点。匹配： Blazor 静态...

c# .net asp.net-mvc blazor blazor-server-side

回答 1 投票 0

blazor 相关问题

最新问题