如何在 Blazor 的 CRUD 中列出所有用户？答案

【问题标题】：How can I list all users in a CRUD in Blazor?如何在 Blazor 的 CRUD 中列出所有用户？
【发布时间】：2022-01-05 07:56:00
【问题描述】：

我正在尝试在 Blazor 服务器环境中获取用于用户管理的 CRUD 页面。我尝试了以下代码：

控制器：

    [HttpGet]
    public async Task<ActionResult<IEnumerable<ApplicationUser>>> getUsers()
    {
        return _context.Users.ToList();
    }

剃刀页面：

@page "/administration/"
@inject HttpClient httpClient

@code {
    protected override async Task OnInitializedAsync()
    {
        var users = await httpClient.GetFromJsonAsync<List<ApplicationUser>> 
        ("api/AdministrationController");
    }
}

问题是 ApplicationUser 在 Razor 视图中无法识别。我尝试注入 Microsoft.AspNetCore.Identity 但这在客户端的 Razor 视图中也不可用。

如何使用控制器让所有用户在一个剃须刀视图中？

【问题讨论】：

标签： blazor blazor-server-side user-management

【解决方案1】：

您可以为您的 API 引入一个 DTO 对象并从 Blazor 应用程序中使用它。

 [HttpGet]
    public async Task<ActionResult<IEnumerable<ApplicationUserDto>>> getUsers()
    {
        var users =  _context.Users.ToList();
        // convert ApplicationUser --> ApplicationUserDto here
        // AutoMapper/Mapster are good for this
        
    }

然后，在您的 Razor 页面中，您可以使用 DTO：

@code {
    protected override async Task OnInitializedAsync()
    {
        var userDtos = await httpClient.GetFromJsonAsync<List<ApplicationUserDto>> 
        ("api/AdministrationController");
    }
}

DTO 是一个简单的 POCO，包含您想要的所有 ApplicationUser 字段，即：

public class ApplicationUserDto
{
  public Guid Id { get; init; }
  public string Username { get; init; }
  ... etc ...
}

【讨论】：