ASP.NET Core 7 MVC：如何将数据库数据在View中以网格展示？

1. 修正PageModel的数据传递逻辑 #

你当前的问题是把查询结果存在了方法内的局部变量里，视图根本访问不到。需要把数据放到PageModel的公共属性中：

public class IndexModel : PageModel
{
    private readonly YourDbContext _context;

    // 定义公共属性，供视图调用
    public List<ACLog> ACLogs { get; set; } = new List<ACLog>();

    public IndexModel(YourDbContext context)
    {
        _context = context;
    }

    public async Task OnGetAsync()
    {
        if (_context.ACLog != null)
        {
            // 将查询结果赋值给公共属性
            ACLogs = await _context.ACLog.ToListAsync();
        }
    }
}

替换说明：把YourDbContext改成你实际的数据库上下文类名，确保ACLog是你的实体类。

2. 在Index.cshtml中渲染网格表格 #

用Razor语法结合HTML表格展示数据，直接访问PageModel的公共属性即可：

@page
@model YourNamespace.IndexModel

<h1>ACLog 数据列表</h1>

@if (Model.ACLogs.Count == 0)
{
    <p>暂无数据</p>
}
else
{
    <table class="table table-striped">
        <thead>
            <tr>
                <!-- 替换成你的ACLog实体实际字段名 -->
                <th>ID</th>
                <th>操作时间</th>
                <th>操作人</th>
                <th>操作内容</th>
                <!-- 其他字段按需添加 -->
            </tr>
        </thead>
        <tbody>
            @foreach (var log in Model.ACLogs)
            {
                <tr>
                    <td>@log.Id</td>
                    <td>@log.OperationTime.ToString("yyyy-MM-dd HH:mm:ss")</td>
                    <td>@log.OperatorName</td>
                    <td>@log.OperationContent</td>
                    <!-- 对应实体的其他字段 -->
                </tr>
            }
        </tbody>
    </table>
}

细节提示：

• @model YourNamespace.IndexModel里的YourNamespace要改成你项目实际的命名空间
• table标签的class="table table-striped"是Bootstrap样式类，不用Bootstrap的话可以删掉，自己写CSS美化
• 所有@log.xxx的部分必须和你的ACLog实体属性名完全匹配

3. 可选：数据量大时添加分页 #

如果数据太多，一次性加载会影响性能，可以加简单分页：
先修改PageModel：

public int CurrentPage { get; set; } = 1;
public int PageSize { get; set; } = 10;
public int TotalCount { get; set; }

public async Task OnGetAsync(int currentPage = 1)
{
    CurrentPage = currentPage;
    if (_context.ACLog != null)
    {
        TotalCount = await _context.ACLog.CountAsync();
        ACLogs = await _context.ACLog
            .Skip((CurrentPage - 1) * PageSize)
            .Take(PageSize)
            .ToListAsync();
    }
}

然后在视图底部加分页导航：

@if (Model.TotalCount > Model.PageSize)
{
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item @(Model.CurrentPage == 1 ? "disabled" : "")">
                <a class="page-link" asp-page="./Index" asp-route-currentPage="@(Model.CurrentPage - 1)">上一页</a>
            </li>
            @for (int i = 1; i <= Math.Ceiling((double)Model.TotalCount / Model.PageSize); i++)
            {
                <li class="page-item @(i == Model.CurrentPage ? "active" : "")">
                    <a class="page-link" asp-page="./Index" asp-route-currentPage="@i">@i</a>
                </li>
            }
            <li class="page-item @(Model.CurrentPage >= Math.Ceiling((double)Model.TotalCount / Model.PageSize) ? "disabled" : "")">
                <a class="page-link" asp-page="./Index" asp-route-currentPage="@(Model.CurrentPage + 1)">下一页</a>
            </li>
        </ul>
    </nav>
}

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