标签: blazor

我目前正在尝试为我的 Blazor WASM 应用程序实现 Fluxor，我发现的所有说明/教程都推荐了类似商店示例的内容：

public record AppStore {
   int ClickCounter,
   bool IsLoading,
   WeatherForecast[]? Forecasts
}

然后只讨论初始状态，更新只发生在数组上，bool而int数组只被彻底替换。即，示例始终从服务器获取完整数据，例如 100 个条目。

现在，这是我的问题：当我已经有 100 个条目并且只想添加/更新/删除一个条目时，如何正确处理减速器中的数组？首先，这是一个好主意吗？

我在 Blazor 服务器应用程序中有一个奇怪的行为。

当我有一个对象列表并删除列表中的一个项目时，它会删除列表中的正确项目，但会将数据从最后一项复制到前面的一项。

仅当我将列表数据绑定到我自己的组件时才会发生这种情况。如果我将它直接绑定到输入元素，则不会发生这种情况。

我在一个小代码示例中重现了该行为，如下所示，只需尝试删除第二个项目并查看该行为。

谢谢谁能帮忙...

Blazor 标记

 <table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (User user in _users)
        {
            <tr>
                <td><MyText @bind-Value="user.Id"></MyText></td>
                <td><MyText @bind-Value="user.Name"></MyText></td>
                <td @onclick="(() => DeleteUser(user))">delete</td>
            </tr>
        }
    </tbody>
</table>

Blazor 代码

private List<User> _users = new List<User>();
private class User
{
    public string Id { get; set; } = "";
    public string Name { get; set; } = "";
}

protected override void OnInitialized()
{
    _users.Add(new User() { Id = "1", Name …

我目前正在尝试在 blazor WASM 中异步调用一个昂贵的方法，同时不阻塞 UI 线程。

根据这个问题的回答，这是不可能的。然而，这些可以追溯到几年前，根据WebAssembly 路线图，现代浏览器支持线程。

另外，我可以await在不阻塞 UI 线程的情况下调用函数，只要函数是自下而上等待的。

在下面的代码片段中，单击按钮Foo将导致 UI 在执行操作时挂起几秒钟，但单击按钮Bar将在后台处理类似（但可等待）的操作，同时保持 UI 响应。

如果 WebAssembly 不支持多线程，为什么第二个选项似乎适用于多线程？如果它确实支持多线程，为什么第一个选项会阻塞 UI？

@page "/asynctest"

<div class="row">
    <div class="col">
        @DisplayValue
    </div>
    <div class="col">
        <button type="button" @onclick="OnClickFoo">Foo</button>
    </div> 
    <div class="col">
        <button type="button" @onclick="OnClickBar">Bar</button>
    </div> 
</div>

@code{
    private string DisplayValue = "";
    private double Result;
    private async Task OnClickFoo(EventArgs e)
    {
        DisplayValue = "Working...";
        Result = await Task.Run(() => Frobnicate()); // Blocks UI thread
        DisplayValue …

我正在创建一个自定义 Blazor 组件，我需要选择组件来使用所选值更新绑定字段，这部分正在工作。我还需要它来执行从父组件传入的方法，这部分不起作用。

我能够将该方法传递到自定义组件（子组件）中，但onclick选择元素的选项元素的事件未触发。

我能够在多重选择元素中实现此功能，但它在选择元素中不起作用。

如何让它触发并仍然更新绑定的数据属性？

ESelect.razor自定义（子）选择组件

@inherits InputBase<string>

<div class="form-floating">
        <select class="form-control form-select @CssClass" id="@Id" @bind="@CurrentValue" >
            <option disabled selected></option>
            @foreach(SelectOption option in Options)
            {
                <option id=@option.Id onclick="@( () => OnClick(option) )" >@option.Value</option>
            }
        </select>
        @if (!string.IsNullOrWhiteSpace(Label))
        {
            <label class="form-control-label" for="@Id">@Label</label>        
        }
        <div class="form-control-validation">
            <ValidationMessage For="@ValidationFor" />
        </div>
</div>

ESelect.razor.cs （ESelect.razor 的 C# 代码）

using BebComponents.DataModels;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System.Linq.Expressions;

namespace BebComponents
{
    public partial class ESelect
    {
        [Parameter, EditorRequired]
        public Expression<Func<string>> ValidationFor { …

我在 blazor 中构建一些动态表单生成器，我对这部分有疑问

 @using Microsoft.AspNetCore.Components.CompilerServices
 @using System.Text.Json
 @using System.ComponentModel.DataAnnotations
 @typeparam Type


<EditForm Model="@DataContext" OnValidSubmit="OnValidSubmit">
<DataAnnotationsValidator/>
 @foreach (var prop in  typeof(Type).GetProperties())
{
    <div class="mb-3">
     <label for= "@this.idform.ToString()_@prop.Name">@Label(@prop.Name) : </label> 
     
        @CreateStringComponent(@prop.Name)

        @if (ShowValidationUnderField)
        {
                   <ValidationMessage For = "@(()=> @prop.GetValue(DataContext))"></ValidationMessage>

        }
      </div>
      
    
}

@code {
[Parameter] public Type? DataContext { get; set; } 

[Parameter] 
public EventCallback<Type> OnValidSubmitCallback { get; set; }

[Parameter]
public bool ShowValidationSummary { get; set; } = false;

[Parameter]
public bool ShowValidationUnderField { get; set; } = true;
}

所以我收到这个错误 …

我正在尝试反序列化从网络服务收到的 JSON。JSON 看起来像这样：

{ "data": 
   [  
      {"name": "john", "company": "microsoft"}, 
      {"name": "karl", "company":"google"}
   ]
}

我想要反序列化为的模型：

public class employee {
   public string name {get; set;}
   public string company {get; set;}

}

问题是，由于该对象名称“data”，我无法使用 System.Text.Json 反序列化。我怎样才能使解串器解开/忽略数据标签并从该标签内的任何内容开始？

我正在尝试为主菜单中的按钮制作一个组件。

<NavLink href="@Href" title="@Title">
    <div class="main-menu-button">
        <img src="@IconUrl" />
        <div class="label">
            @Label
        </div>
    </div>
</NavLink>

@code {

    [Parameter]
    [EditorRequired]
    public string? Href { get; set; }

    [Parameter]
    [EditorRequired]
    public string? Label { get; set; }

    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    [EditorRequired]
    public string? IconUrl { get; set; }
}

我似乎无法在 css 文件中定位 NavLink。我已经尝试了所有这些不同的变体，但按钮在激活时永远不会改变颜色。

::deep a.active {
    background-color: red !important;
}

::deep .active {
    background-color: green !important;
}

::deep a .active {
    background-color: blue !important;
}

a.active …

我创建了一个新的 blazor 服务器应用程序（Visual studio for Mac 中的默认 Microsoft 示例模板）。然后在 Page 文件夹中，我创建了一个新的子文件夹“Test”。在子文件夹“Test”中，我创建了以下文件：

_Imports.razor

@layout TestTemplate

测试模板.razor

@inherits LayoutComponentBase

<h1>Test layout</h1>

@Body

索引剃刀

@page "/test"

<h3>Hello test layout</h3>

@code {

}

当我构建解决方案时，没有发现错误。但是当我打开浏览器并访问 URL http://localhost:portnr/test 时，我的浏览器会继续渲染/挂起（我认为是无限循环）。

根据 Microsoft https://learn.microsoft.com/en-us/aspnet/core/blazor/components/layouts?view=aspnetcore-6.0的文档，上述步骤应该有效（请参阅“将布局应用于文件夹”部分） 。

我检查了项目根目录下的 _Imports.razor 文件，看看是否有其他对 @layout 的引用，因为根据上面的链接，这将导致无限循环。App.razor 包含对 MainLayout 的引用：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

我正在 .NET 6 中的Blazor Server 版本中创建一个 Web 应用程序。为了进行身份验证，我使用ASP.NET Core Identity。现在我的应用程序中需要一个功能。如果应用程序空闲一段特定时间（例如 10 分钟），它将注销。我已在我的文件中添加了以下代码Program.cs。但问题是在特定时间跨度之后，如果我刷新应用程序，它就会注销。但如果我点击应用程序的任何链接，什么也不会发生。

builder.Services.ConfigureApplicationCookie(options =>
{
    // Cookie settings
    options.Cookie.HttpOnly = true;
    options.Cookie.Name = "Horus";
    options.ExpireTimeSpan = TimeSpan.FromMinutes(5);

    options.LoginPath = "/Identity/Account/Login";
    options.LogoutPath = "/Identity/account/logout";
    options.AccessDeniedPath = "/Identity/Account/Login";
    options.SlidingExpiration = true;
});

如果我点击任何链接，我还应该做什么才能注销？另一件事是这条线

options.ExpireTimeSpan = TimeSpan.FromMinutes(5)

真的会计算空闲时间吗？请告诉我。

在剃刀文件中，我注入@inject IJSRuntime JSRuntime. 在后面的代码中，我使用以下代码调用 JS 函数：

private async Task DownloadPdf(bool foo)
{
    await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./create-pdf.js");
    await module.InvokeVoidAsync("generatePdf", foo);
}

这工作得很好，但现在我需要从 C# 代码调用 JS 函数，该函数不是代码隐藏，而是一个单独的 *.cs 文件：

public static class Bar
{
    public static double Baz()
    {
        // do something
        // call JS function
        return baz;
    }
}

我尝试过这种方法但JSRuntime始终如此null。如何从静态 C# 方法调用 JS？