ASP.NET Core 5 Blazor WASM中将Identity User分配给Box并支持用户名传参

方案实现 #

你的现有模型结构不需要修改，只需要加一层用户名和用户ID的映射逻辑即可，实现分后端API准备和Blazor前端实现两部分：

1. 后端API准备 #

首先在你的控制器中注入UserManager<ApplicationUser>，提供两个必要的接口：

• 拉取所有用户的精简信息（用于下拉选择场景）

[HttpGet("users")]
public async Task<IActionResult> GetAllUsers()
{
    // 仅返回必要的ID和用户名，避免泄露敏感信息
    var userList = await _userManager.Users
        .Select(u => new { u.Id, u.UserName })
        .ToListAsync();
    return Ok(userList);
}

• 根据用户名查询用户ID（用于手动输入用户名场景）

[HttpGet("user-by-name/{userName}")]
public async Task<IActionResult> GetUserByName(string userName)
{
    var user = await _userManager.FindByNameAsync(userName);
    if (user == null) return NotFound("用户不存在");
    return Ok(new { user.Id, user.UserName });
}

2. Blazor前端实现 #

推荐优先用下拉选择的方式，避免手动输入用户名出错，实现逻辑如下：

页面逻辑定义

在Box新增/编辑页的@code块中定义变量和初始化逻辑：

// 存储所有可选用户列表
private List<(string Id, string UserName)> UserList { get; set; } = new();
// 存储当前编辑的Box实例
private Box CurrentBox { get; set; } = new();

protected override async Task OnInitializedAsync()
{
    // 页面初始化时拉取用户列表
    UserList = await _httpClient.GetFromJsonAsync<List<(string Id, string UserName)>>("api/你的控制器名称/users");
}

UI绑定

用InputSelect组件做选择器，展示用户名，实际绑定用户ID到Box的UserId字段：

<EditForm Model="CurrentBox" OnValidSubmit="SaveBox">
    <!-- 其他Box字段的输入框省略 -->
    <div class="form-group">
        <label>分配用户</label>
        <InputSelect @bind-Value="CurrentBox.UserId" class="form-control">
            <option value="">请选择用户</option>
            @foreach (var user in UserList)
            {
                <option value="@user.Id">@user.UserName</option>
            }
        </InputSelect>
    </div>
    <button type="submit" class="btn btn-primary">保存</button>
</EditForm>

手动输入用户名的补充实现

如果你确实需要支持直接输入用户名赋值，增加以下逻辑即可：

<!-- 增加用户名输入框 -->
<input type="text" @bind-Value="InputUserName" @bind:after="MatchUser" placeholder="输入用户名" class="form-control" />

@code {
    private string InputUserName { get; set; }
    private async Task MatchUser()
    {
        if (string.IsNullOrWhiteSpace(InputUserName))
        {
            CurrentBox.UserId = null;
            return;
        }
        try
        {
            var user = await _httpClient.GetFromJsonAsync<(string Id, string UserName)>($"api/你的控制器名称/user-by-name/{InputUserName}");
            CurrentBox.UserId = user.Id;
        }
        catch (HttpRequestException ex) when (ex.StatusCode == System.Net.HttpStatusCode.NotFound)
        {
            CurrentBox.UserId = null;
            // 这里可自行增加用户不存在的提示逻辑
        }
    }
}

注意事项 #

保存Box到数据库时，仅需要保证UserId字段赋值正确即可，EF Core会自动处理外键关系，不需要手动查询完整的ApplicationUser对象赋值给导航属性。

内容的提问来源于stack exchange，提问作者Nate