小编Leo*_*rci的帖子

我应该什么时候调用 StateHasChanged,什么时候 Blazor 会自动拦截某些更改?

我很难理解何时应该调用StateHasChanged()以及何时 Blazor 拦截某些内容已更改,因此必须重新呈现。

我创建了一个示例项目,其中包含一个按钮和一个名为 AddItem 的自定义组件。该组件包含一个带有红色边框的 div 和一个按钮。

我所期望的:我希望当用户单击 Index 页面中包含的按钮时,AddItem 的 div 将显示出来。然后我想在用户单击 AddItem 的按钮时隐藏它。

注意: AddItem 不会将它的_isVisible标志暴露在外面,而是包含一个Show()方法。SoAddItems.Show()将在单击索引按钮时调用。

测试:

  1. 我点击索引的点击按钮,然后调用方法Open()AddItem.Show()。标志_isVisible被设置为true但没有任何反应并且索引ShouldRender()被调用。

    控制台输出:

    • 渲染索引
  2. AddItem.Show()public void Show() {_isVisible = true; StateHasChanged();}. 现在 AddItem 的 div 按预期显示和隐藏。

    控制台输出:

    • 渲染 AddItem(在索引按钮上单击 1°)
    • 渲染索引(点击索引按钮 1°)
    • 渲染 AddItem(点击 addItem 的关闭按钮 2°)
  3. 我已经修改<AddItem @ref="AddItem" /><AddItem @ref="AddItem" CloseEventCallback="CallBack" />,StateHasChanged …

blazor

32
推荐指数
2
解决办法
1万
查看次数

如果用户未通过身份验证,Blazor 重定向到登录

我正在尝试使用 Blazor WebAssembly 开发一个应用程序,我想知道如果用户未通过身份验证,我该如何保护我的整个应用程序。我将实施的行为是:

  • 如果匿名用户请求任何页面,那么他将被重定向到登录页面

更好的

  • 用户必须通过身份验证才能使用此应用程序

目前我已经实现了将[Authorize]属性应用于每个页面的这种行为,但我想集中它。

我已经在 Blazor 服务器端应用[Authorize]_host.razor组件内部的属性实现了这个目标。

Blazor 客户端是否有解决方案?

blazor blazor-client-side

18
推荐指数
4
解决办法
1万
查看次数

使用 Entity Framework Core 的 Blazor 并发问题

我的目标

我想创建一个新的 IdentityUser 并显示已通过同一个 Blazor 页面创建的所有用户。该页面有:

  1. 通过您的表单将创建一个 IdentityUser
  2. 第三方的网格组件 (DevExpress Blazor DxDataGrid),它显示使用 UserManager.Users 属性的所有用户。此组件接受 IQueryable 作为数据源。

问题

当我通过表单 (1) 创建一个新用户时,我会收到以下并发错误:

InvalidOperationException:在上一个操作完成之前,在此上下文中启动了第二个操作。不保证任何实例成员都是线程安全的。

我认为问题与CreateAsync(IdentityUser user)UserManager.Users指的是相同的 DbContext 的事实有关

该问题与第三方的组件无关,因为我重现了相同的问题,并用一个简单的列表替换了它。

重现问题的步骤

  1. 使用身份验证创建一个新的 Blazor 服务器端项目
  2. 使用以下代码更改 Index.razor:

    @page "/"
    
    <h1>Hello, world!</h1>
    
    number of users: @Users.Count()
    <button @onclick="@(async () => await Add())">click me</button>
    <ul>
    @foreach(var user in Users) 
    {
        <li>@user.UserName</li>
    }
    </ul>
    
    @code {
        [Inject] UserManager<IdentityUser> UserManager { get; set; }
    
        IQueryable<IdentityUser> Users;
    
        protected override void OnInitialized()
        {
            Users = UserManager.Users;
        } …
    Run Code Online (Sandbox Code Playgroud)

entity-framework-core asp.net-core blazor blazor-server-side

10
推荐指数
1
解决办法
3166
查看次数

EditForm - 如何防止按回车键提交

我找到了这篇文章,但我很难理解如何防止任何人独立提交“输入”键<input>

<EditForm Model="exampleModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />
    <InputText id="name2" @bind-Value="exampleModel.Name2" />

    <button type="submit">Submit</button>
</EditForm>
Run Code Online (Sandbox Code Playgroud)
@code {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }

    public class ExampleModel
    {
         [Required]
         [StringLength(10, ErrorMessage = "Name is too long.")]
         public string Name { get; set; }
         public string Name2 {get; set;}
    }
}
Run Code Online (Sandbox Code Playgroud)

用例

Enter 键 在 HTML 表单上,如果您正在填写文本框并按 Enter 键,它将提交表单,即使您尚未完成其余信息的填写。有许多网站使用此功能,例如 Google 搜索框会在您按 Enter 键时提交。这是有效的,因为您只有一个文本框要填写,但如果要填写的字段不止一个,您不希望表单按回车键提交。

blazor

6
推荐指数
2
解决办法
4350
查看次数

是否可以在 RCL 中创建 Blazor 页面?

本页介绍了如何创建 Razor 类库来放置共享组件。我试图创建一个示例 Blazor 服务器端项目,其中它index.razor有一个在 Razor 类库中定义的组件。有用。

我想做的是开发一个 Blazor 服务器端应用程序,将来可以将托管模型更改为 WASM。我想知道是否可以在共享 RCL 中创建页面和组件,在这种情况下,我可以在 Blazor 服务器端项目中创建控制器,并通过 Http 调用从 Razor 类库中使用它们。如果我想将托管模型更改为 WASM,这将在将来对我有所帮助。

无论如何,我已经尝试在 RCL 中创建一个 Blazor 页面,但是当我尝试调用里面写的 URL 时,@page它没有到达。

我想问你是否有可能实现这种行为。如果是,我错过了什么?

您可以复制我的示例,只需创建一个新的 Blazor 服务器端项目,使其引用 RCL,然后插入@page "/testpage"Component1.razor

asp.net-core blazor razor-class-library blazor-server-side blazor-client-side

4
推荐指数
1
解决办法
637
查看次数

StateHasChanged 是重新渲染所有组件还是仅重新渲染差异?

我正在学习 Blazor 组件,我想知道 StateHasChanged 会强制组件重新呈现所有自身还是仅重新呈现差异。智能感知报告指出

通知组件其状态已更改。如果适用,这将导致重新渲染组件。

“这将导致组件被重新渲染”是什么意思?

c# blazor

3
推荐指数
1
解决办法
1189
查看次数

Func&lt;T, Task&gt; 和匿名异步 await Action&lt;T&gt; 的区别

我正在 ASP.NET Core Blazor 上开发,有时我会在 GitHub 上学习一些东西。这个问题与 Blazor 并不严格相关,但我看到很多 Blazor 开发人员在做我将要解释的内容。

我注意到一些组件接受 aAction<T>作为参数,而其他组件接受Func<T, Task>.

/* example */

public class MyComponentA : ComponentBase 
{
    [Parameter] public Action<T> OnClick {get; set;}

    //... other methods
}

public class MyComponentB : ComponentBase 
{
    [Parameter] public Func<T, Task> OnClickAsync {get; set;}

    //... other methods
}

Run Code Online (Sandbox Code Playgroud)

我的理解是你应该绑定Action<T>到一个无异步/等待方法和Func<T, Task>一个异步/方法。到现在为止还挺好。

但是,我看到有人被用来传递一个异步/等待匿名函数作为Action<T>OnClick=@(async (item) => await Foo(item))。有时,我也传递了一个匿名的 async/await 函数Action,它可以工作。

  • 这是正确的吗? …

c# async-await blazor

3
推荐指数
2
解决办法
814
查看次数