在Razor Pages中使用路由参数自动加载部门分部视图

核心思路 #

放弃原来的AJAX触发逻辑，改为通过URL路由参数传递部门ID，页面加载时直接在服务器端查询数据并渲染分部视图，完全不需要前端AJAX请求。

1. 配置Razor Page路由 #

在Index.cshtml顶部设置带可选整数参数的路由，确保ID参数能被正确识别：

@page "{id:int?}"
@model YourNamespace.IndexModel

2. PageModel处理参数与数据查询 #

修改Index.cshtml.cs，在OnGetAsync方法中接收路由参数，查询对应部门数据：

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Threading.Tasks;

public class IndexModel : PageModel
{
    private readonly YourDbContext _dbContext;

    // 注入数据库上下文
    public IndexModel(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 存储要传递给分部视图的部门数据
    public Department Department { get; set; }
    // 可选：如果需要展示部门列表供选择，添加该属性
    public List<Department> AllDepartments { get; set; }

    public async Task OnGetAsync(int? id)
    {
        // 先加载所有部门（如果需要展示选择列表）
        AllDepartments = await _dbContext.Departments.ToListAsync();

        // 如果路由中有ID参数，查询对应部门
        if (id.HasValue)
        {
            Department = await _dbContext.Departments.FindAsync(id.Value);
        }
    }
}

3. 主页面渲染分部视图 #

在Index.cshtml中，根据是否存在有效部门数据，渲染分部视图或提示信息/部门列表：

<h1>部门详情</h1>

@if (Model.Department != null)
{
    <!-- 渲染分部视图，传递部门模型 -->
    <partial name="_DepartmentDetails" model="Model.Department" />
}
else
{
    <p>请选择一个部门查看详情：</p>
    <ul>
        @foreach (var dept in Model.AllDepartments)
        {
            <!-- 生成带ID参数的跳转链接 -->
            <li><a href="/Index/@dept.Id">@dept.Name</a></li>
        }
    </ul>
}

4. 分部视图实现（_DepartmentDetails.cshtml） #

创建分部视图，接收Department模型并展示数据：

@model Department

<div class="card">
    <div class="card-header">
        <h3>@Model.Name</h3>
    </div>
    <div class="card-body">
        <p><strong>描述：</strong>@Model.Description</p>
        <p><strong>员工数量：</strong>@Model.EmployeeCount</p>
        <!-- 根据你的Department模型添加其他字段 -->
    </div>
</div>

关键注意事项 #

• 路由参数的类型约束int?确保只有整数ID能被识别，避免无效请求
• 数据库查询时要处理id为空的情况，避免空引用异常
• 如果需要保留无刷新体验，可以结合JS监听URL变化（比如popstate事件）再发起AJAX，但这和你“替换AJAX交互”的需求不符，优先用服务器端渲染方案

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