MVC中如何通过Tab切换绑定数据并筛选表格内容？

1. 服务器端刷新方案（页面重载） #

修改Tab链接，绑定Controller路由 #

把Tab的<a>标签改为指向Controller的Action，传递区域名称作为参数，同时通过ViewBag标记当前激活的Tab：

<ul class="nav nav-tabs" role="tablist">
     <li class="nav-item" role="presentation">
          <a class="nav-link @(ViewBag.SelectedRegion == "North" ? "active" : "")" href="@Url.Action("Index", "Region", new { region = "North" })" role="tab">North</a>
     </li>
     <li class="nav-item" role="presentation">
          <a class="nav-link @(ViewBag.SelectedRegion == "South" ? "active" : "")" href="@Url.Action("Index", "Region", new { region = "South" })" role="tab">South</a>
     </li>
</ul>

编写Controller Action #

在对应Controller（示例为RegionController）中实现数据筛选逻辑，将筛选后的数据传递给视图：

public ActionResult Index(string region = "North")
{
    // 从数据源获取全量数据（示例为EF Core查询）
    var allData = _dbContext.RegionCountries.ToList();
    
    // 根据参数筛选数据，忽略大小写避免匹配问题
    var filteredData = allData.Where(d => 
        d.Region_Name.Trim().Equals(region, StringComparison.OrdinalIgnoreCase)).ToList();
    
    // 记录当前选中区域，用于Tab激活状态判断
    ViewBag.SelectedRegion = region;
    
    return View(filteredData);
}

简化表格视图代码 #

此时Model已是筛选后的数据，直接遍历渲染即可：

<table class="table">
    <thead>
        <tr>
            <th>Region Name</th>
            <th>Country Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var data in Model)
        {
        <tr>
            <td>@data.Region_Name</td>
            <td>@data.Country_Name</td>
        </tr>
        }                     
    </tbody>
</table>

2. 无刷新筛选方案（AJAX+Controller） #

如果不想页面重载，可通过AJAX请求Controller接口更新表格：

修改Tab并添加JS点击事件 #

<ul class="nav nav-tabs" role="tablist">
     <li class="nav-item" role="presentation">
          <a class="nav-link active" data-region="North" role="tab">North</a>
     </li>
     <li class="nav-item" role="presentation">
          <a class="nav-link" data-region="South" role="tab">South</a>
     </li>
</ul>

<script>
$(document).ready(function() {
    $('.nav-link').click(function(e) {
        e.preventDefault();
        // 更新Tab激活状态
        $('.nav-link').removeClass('active');
        $(this).addClass('active');
        
        var region = $(this).data('region');
        // 请求Controller接口获取筛选数据
        $.ajax({
            url: '@Url.Action("GetFilteredData", "Region")',
            type: 'GET',
            data: { region: region },
            success: function(data) {
                // 清空并重新渲染表格内容
                var tbody = $('table tbody');
                tbody.empty();
                $.each(data, function(index, item) {
                    tbody.append(`<tr><td>${item.Region_Name}</td><td>${item.Country_Name}</td></tr>`);
                });
            }
        });
    });
});
</script>

编写Controller的API接口 #

public JsonResult GetFilteredData(string region = "North")
{
    var allData = _dbContext.RegionCountries.ToList();
    var filteredData = allData.Where(d => 
        d.Region_Name.Trim().Equals(region, StringComparison.OrdinalIgnoreCase)).ToList();
    return Json(filteredData, JsonRequestBehavior.AllowGet);
}

额外建议 #

• 避免硬编码区域名称：可从数据库查询所有唯一的Region_Name，动态生成Tab标签。
• 异常处理：添加对空参数、无效区域的判断，返回默认数据或提示。
• 性能优化：数据量大时添加分页逻辑，减少单次请求数据量。

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