如何在局部视图显示用户列表及解决@Html.Partial调用布局失效问题

嘿，我来帮你搞定这两个局部视图的问题，一步步来：

1. 如何在局部视图中显示用户列表 #

你已经在HomeController里写好了UserList Action来获取用户数据，接下来只需要完成对应的局部视图文件：

步骤1：创建局部视图_UserList.cshtml #

在Views/Home文件夹下创建这个视图文件，顶部指定模型类型，然后渲染用户数据：

@model IEnumerable<YourNamespace.ApplicationUser>

<h3>用户列表</h3>
<table class="table">
    <thead>
        <tr>
            <th>用户名</th>
            <th>部门</th>
            <th>职位</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in Model)
        {
            <tr>
                <td>@user.UserName</td>
                <td>@(user.Departments?.Name ?? "无部门")</td>
                <td>@(user.Positions?.Name ?? "无职位")</td>
            </tr>
        }
    </tbody>
</table>

注意：把YourNamespace替换成你项目的实际命名空间，比如你的ApplicationUser所在的命名空间。

步骤2：优化控制器的UserList方法 #

建议把IQueryable转换成List，避免延迟加载可能带来的问题：

public IActionResult UserList() {
    var users = _context.Users
        .Include(a => a.Departments)
        .Include(a => a.Positions)
        .ToList(); // 这里加上ToList()
    return PartialView("_UserList", users);
}

2. 解决@Html.Partial("_UserList")在_Layout.cshtml中无法生效的问题 #

你遇到的问题核心是：@Html.Partial只会直接渲染视图文件，不会调用控制器的Action方法。也就是说，你直接用Partial的时候，局部视图的Model是null，因为没有从控制器获取数据，自然显示不出内容。

这里有两个常用的解决方法：

方法一：使用@Html.Action（简单直接） #

在_Layout.cshtml里把@Html.Partial("_UserList")替换成：

@Html.Action("UserList", "Home")

这个方法会主动调用HomeController的UserList Action，获取用户数据后再渲染局部视图，完美解决数据为空的问题。

方法二：使用ViewComponent（ASP.NET Core推荐方案） #

如果你的项目是ASP.NET Core，更推荐用ViewComponent来做这类布局中的复用组件：

1. 创建ViewComponent类
   在项目中新建一个Components文件夹，创建UserListViewComponent.cs：

public class UserListViewComponent : ViewComponent
{
    private readonly ApplicationDbContext _context;

    public UserListViewComponent(ApplicationDbContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var users = await _context.Users
            .Include(a => a.Departments)
            .Include(a => a.Positions)
            .ToListAsync();
        return View("_UserList", users);
    }
}

2. 在_Layout.cshtml中调用ViewComponent

@await Component.InvokeAsync("UserList")

这个方式更符合ASP.NET Core的组件化开发思想，也更灵活。

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