Razor Pages点击表格超链接无法渲染第二个Partial View问题

点击部门结果表格内的超链接后，原本的部门视图消失，员工视图也无法正确渲染在旁。

相关代码文件 #

Index.cs #

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using PracticeApp.Models;
using System.Linq;

namespace PracticeApp.Pages
{
    public class IndexModel : PageModel
    {
        public CompanyContext _context;

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

        public PartialViewResult OnPostDisplayDepartment(int value)
        {
            return Partial("_DisplayDepartmentPartial", _context.Departments.Where(x => x.DepartmentId == value).ToList());
        }

        public PartialViewResult OnPostDisplayEmployee(int value)
        {
            return Partial("_DisplayEmployeePartial", _context.Employees.Where(x => x.DepartmentId == value).ToList());
        }
    }
}

Index.cshtml #

@page
@model IndexModel
@{ ViewData["Title"] = "Index"; }

<form method="post">
    <table>
        <tr>
            <td>
                @Html.TextBox("TxtDepartment")
            </td>
            <td>
                <button type="button" id="DepartmentSearch">Search</button>
            </td>
        </tr>
    </table>
</form>
<br />
<div id="DepartmentResult"></div>
<div id="EmployeeResult"></div>

@section Scripts {
    <script>
        $("#DepartmentSearch").click(function()
        {
            $.ajax(
            {
                url: "/Index?handler=DisplayDepartment",
                type: "POST",
                data: { value: $("#TxtDepartment").val() },
                headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
                success: function(data) { $("#DepartmentResult").html(data); }
            });
        });
    </script>
}

_DisplayDepartmentPartial.cshtml #

@model IEnumerable<Models.Department>

@if (Model.Count() != 0)
 {
    <table style="border: 1px solid black">
        <thead>
            <tr>
                <th colspan="2" style="border: 1px solid black; text-align: center;">Department Results</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td align="center" style="border: 1px solid black; font-weight: bold;">
                    @Html.DisplayNameFor(m => m.DepartmentId)
                </td>
                <td align="center" style="border: 1px solid black; font-weight: bold;">
                    @Html.DisplayNameFor(m => m.DepartmentName)
                </td>
            </tr>

            @foreach (Models.Department item in Model)
             {
                <tr>
                    <td id="TxtEmployee" align="center" style="border: 1px solid black;">
                        <a id="EmployeeSearch" href="Index?handler=DisplayDepartment#">
                            @item.DepartmentId
                        </a>
                    </td>
                    <td align="center" style="border: 1px solid black;">
                        @item.DepartmentName
                    </td>
                </tr>
             }
        </tbody>
    </table>
 }
else
{
    <p>No data</p>
}

@section Scripts {
    <script>
        $("#EmployeeSearch").click(function()
        {
            $.ajax(
            {
                url: "Index?handler=DisplayDepartment",
                type: "POST",
                data: { value: $("#TxtEmployee").val() },
                headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
                success: function(data) { $("#EmployeeResult").html(data); }
            });
        });
    </script>
}

_DisplayEmployeePartial.cshtml #

@model IEnumerable<Models.Employee>

@if (Model.Count() != 0)
 {
    <table style="border: 1px solid black">
        <thead>
            <tr>
                <th colspan="2" style="border: 1px solid black; text-align: center;">Employee Results</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td align="center" style="border: 1px solid black; font-weight: bold;">
                    @Html.DisplayNameFor(m => m.DepartmentId)
                </td>
                <td align="center" style="border: 1px solid black; font-weight: bold;">
                    @Html.DisplayNameFor(m => m.EmployeeName)
                </td>
            </tr>

            @foreach (Models.Employee item in Model)
             {
                <tr>
                    <td align="center" style="border: 1px solid black;">
                        @item.DepartmentId
                    </td>
                    <td align="center" style="border: 1px solid black;">
                        @item.EmployeeName
                    </td>
                </tr>
             }
        </tbody>
    </table>
 }
else
{
    <p>No data</p>
}

操作截图 #

1. 用户输入值并点击搜索按钮
   

2. 用户点击表格内超链接后视图消失
   

问题原因 #

1. 超链接默认行为未阻止：点击<a>标签会触发页面跳转，导致当前页面重新加载，之前渲染的Partial View全部消失。
2. AJAX请求Handler错误：员工查询调用了DisplayDepartment，而非正确的DisplayEmployee。
3. 重复ID问题：循环渲染的超链接和单元格使用相同id，JS无法绑定所有元素。
4. Partial View脚本不生效：Razor Pages中Partial View的@section Scripts不会被主页面渲染，事件绑定代码无法执行。

修复方案 #

修改 _DisplayDepartmentPartial.cshtml #

@model IEnumerable<Models.Department>

@if (Model.Any())
{
    <table style="border: 1px solid black">
        <thead>
            <tr>
                <th colspan="2" style="border: 1px solid black; text-align: center;">部门查询结果</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center" style="border: 1px solid black; font-weight: bold;">
                    @Html.DisplayNameFor(m => m.DepartmentId)
                </td>
                <td align="center" style="border: 1px solid black; font-weight: bold;">
                    @Html.DisplayNameFor(m => m.DepartmentName)
                </td>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td align="center" style="border: 1px solid black;">
                        <a href="#" class="employee-search" data-dept-id="@item.DepartmentId">
                            @item.DepartmentId
                        </a>
                    </td>
                    <td align="center" style="border: 1px solid black;">
                        @item.DepartmentName
                    </td>
                </tr>
            }
        </tbody>
    </table>
}
else
{
    <p>无数据</p>
}

修改 Index.cshtml 的 Scripts 部分 #

@section Scripts {
    <script>
        $("#DepartmentSearch").click(function() {
            $.ajax({
                url: "/Index?handler=DisplayDepartment",
                type: "POST",
                data: { value: $("#TxtDepartment").val() },
                headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
                success: function(data) { 
                    $("#DepartmentResult").html(data); 
                }
            });
        });

        // 事件委托绑定动态元素
        $(document).on("click", ".employee-search", function(e) {
            e.preventDefault(); // 阻止页面跳转
            var deptId = $(this).data("dept-id");
            $.ajax({
                url: "/Index?handler=DisplayEmployee",
                type: "POST",
                data: { value: deptId },
                headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
                success: function(data) { 
                    $("#EmployeeResult").html(data); 
                }
            });
        });
    </script>
}

修复说明 #

• 移除Partial View中的脚本块，将事件绑定逻辑移到主页面，使用事件委托处理动态生成的元素。
• 用class替代重复id，通过data-*属性存储部门ID，避免DOM元素ID冲突。
• 调用e.preventDefault()阻止超链接默认跳转行为，保留当前页面状态。
• 修正AJAX请求的Handler为DisplayEmployee，正确触发员工数据查询。

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