如何在Razor View中正确展示所有待审批的用户列表？

• 页面模型中定义的UserId、IsSelected均为单个标量属性，在OnGetAsync中循环遍历_db.UserRoles时，每轮循环都会覆盖前一次赋值的属性值，循环结束后仅保留最后一条匹配记录的内容，没有将多用户数据存储为集合供视图使用。
• 视图页面硬编码仅渲染单条用户选项块，没有遍历集合的渲染逻辑，甚至标签绑定的是当前登录管理员的身份信息，无法匹配多用户展示需求。
• 此前尝试编写foreach循环未生效的原因：页面模型中没有可被遍历的集合类型属性，不存在可遍历的数据源。

1. 调整页面模型Approve.cshtml.cs #

新增承载单条审批项的实体类，将单值属性替换为用户集合属性，在GET请求中一次性组装好所有待审批用户数据：

public class ApproveModel : PageModel
{
    private readonly ApplicationDbContext _db;

    // 定义单条用户审批项的结构
    public class UserApprovalItem
    {
        public string UserId { get; set; }
        public string DisplayName { get; set; }
        public bool IsSelected { get; set; }
    }

    // 替换原有单值属性，存储所有待审批用户列表
    public List<UserApprovalItem> PendingUserList { get; set; } = new();

    public ApproveModel(ApplicationDbContext db)
    {
        _db = db;
    }

    public async Task<IActionResult> OnGetAsync()
    {
        // 联表查询所有绑定待审批角色（RoleId = "2"）的用户，组装为列表
        PendingUserList = await _db.UserRoles
            .Where(ur => ur.RoleId == "2")
            .Join(
                _db.Users,
                ur => ur.UserId,
                u => u.Id,
                (ur, u) => new UserApprovalItem
                {
                    UserId = u.Id,
                    DisplayName = u.UserName,
                    IsSelected = true // 可根据业务调整初始勾选状态
                }
            )
            .ToListAsync();

        return Page();
    }

    // 新增POST处理方法，接收前端提交的审批结果
    public async Task<IActionResult> OnPostAsync(List<UserApprovalItem> submittedUsers)
    {
        // 在此处实现审批状态更新逻辑，将提交的用户状态写入数据库
        return Page();
    }
}

2. 调整视图页面Approve.cshtml #

将单条用户的渲染块改为遍历集合的循环逻辑，确保每个用户项都生成独立的表单控件，支持模型绑定：

<form method="post">
<div class="card">
    <div class="card-header">
        <h2>Approve users</h2>
    </div>
    <div class="card-body">
        @* 遍历所有待审批用户，逐一生成勾选块 *@
        @foreach (var userItem in Model.PendingUserList)
        {
            <div class="form-check m-1">
                <input type="hidden" asp-for="@userItem.UserId" />
                <input asp-for="@userItem.IsSelected" class="form-check-input" />
                <label class="form-check-label">
                    @userItem.DisplayName
                </label>
            </div>
        }
    </div>
    <div class="card-footer">
        <input type="submit" value="Update" class="btn btn-primary" style="width:auto" />
    </div>
</div>

关键注意事项 #

• 视图中渲染表单控件时，必须为每一项携带对应的UserId隐藏域，否则POST提交时后端无法区分勾选状态对应的具体用户。
• 多数据展示场景禁止使用全局标量属性存储循环遍历的结果，必须使用集合类型属性作为视图数据源。

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