如何使用jQuery和.NET在HTML表格中加载筛选后的数据

问题核心：页面首次加载是服务器端渲染表格内容，AJAX调用OnGet后虽获取到数据，但未主动更新页面DOM结构，导致表格无变化；同时代码存在服务器端未返回JSON数据、前端重复<tbody>标签两处明显问题。

1. 修正服务器端PageModel代码 #

统一类名与页面@Model匹配，将带筛选参数的OnGet改为返回JsonResult，确保AJAX能拿到结构化数据：

public class IndexModel : PageModel
{
    public JArray Transactions { get; set; }

    // 首次无筛选值时加载默认数据
    public void OnGet()
    {
        Transactions = GetTableValue(0); // 传入业务默认筛选值，按需调整
    }

    // 带筛选参数的接口，返回JSON格式数据
    public JsonResult OnGet(int filterid)
    {
        var filteredTransactions = GetTableValue(filterid);
        return new JsonResult(filteredTransactions);
    }
}

2. 修正前端HTML与JS代码 #

移除重复<tbody>标签，在AJAX回调中手动更新表格DOM，同时修正表头的HTML规范问题：

@page
@model IndexModel
@{
    Layout = "_Layout";
}

<script>
function SubmitFilter(){
    var transactionNumb = $("#transactionNumber").val();
    // 使用相对路径，避免硬编码域名
    $.get("/Transactions?filterid=" + transactionNumb, function(response) {
        var tbody = $("#tblTransactions tbody");
        // 清空原有表格内容
        tbody.empty();
        // 循环生成新的表格行
        $.each(response, function(index, transaction) {
            var tr = $("<tr>");
            tr.append($("<td>").text(transaction.type));
            tr.append($("<td>").text(transaction.status));
            tbody.append(tr);
        });
    });
}
</script>

<!-- 筛选输入框与触发按钮 -->
<input type="text" id="transactionNumber" placeholder="输入筛选ID">
<button onclick="SubmitFilter()">筛选</button>

<table id="tblTransactions" class="table table-hover">
    <thead>
        <tr> <!-- 表头需用<tr>包裹<td>，修正原HTML规范问题 -->
            <th scope="col">Type</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        @foreach (dynamic transaction in Model.Transactions)
        {
            <tr>
                <td>@transaction.type</td>
                <td>@transaction.status</td>
            </tr>
        }
    </tbody>
</table>

关键说明 #

• 服务器端必须返回JSON数据，AJAX才能解析并生成新的表格内容
• 前端需在AJAX回调中手动操作DOM，清空旧内容后插入新行
• 避免硬编码域名，使用相对路径可适配不同部署环境

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