ASP.NET MVC局部视图自动排序AJAX刷新后失效问题排查

问题原因 #

1. 排序分页参数未被处理：初始加载时WebGrid的排序请求指向Index Action，AJAX刷新后，WebGrid生成的排序链接默认指向LoadReferenceTypes，但该Action未接收并处理sort、sortdir、page等参数，导致返回未排序分页的全量数据，甚至因参数不匹配引发绑定失败，网格消失。
2. WebGrid内置AJAX逻辑异常：WebGrid的排序分页依赖自身生成的客户端脚本，AJAX替换局部视图DOM后，新生成的表头链接要么未绑定正确的AJAX触发逻辑，要么因URL指向错误导致请求无法返回有效局部视图。

最佳实现方式 #

1. 修改控制器Action，处理排序分页参数 #

更新LoadReferenceTypes方法，接收排序、分页参数，手动处理数据的排序和分页逻辑：

[HttpGet]
public ActionResult LoadReferenceTypes(string sort = null, string sortdir = "ASC", int page = 1)
{
    ConfigurationModel model = new ConfigurationModel();
    var data = model.ReferenceTypesList;

    // 执行排序逻辑
    if (!string.IsNullOrEmpty(sort))
    {
        var property = typeof(GameServiceManager.ReferenceTypes).GetProperty(sort);
        data = sortdir.Equals("ASC", StringComparison.OrdinalIgnoreCase)
            ? data.OrderBy(x => property.GetValue(x))
            : data.OrderByDescending(x => property.GetValue(x));
    }

    // 执行分页逻辑
    int pageSize = 10;
    var pagedData = data.Skip((page - 1) * pageSize).Take(pageSize).ToList();

    // 传递总行数、当前排序分页参数到视图
    ViewBag.TotalRows = data.Count();
    ViewBag.Sort = sort;
    ViewBag.SortDir = sortdir;
    ViewBag.Page = page;

    return PartialView("_ReferenceTypes", pagedData);
}

2. 调整局部视图的WebGrid初始化逻辑 #

在局部视图中，手动传入排序分页参数，关闭WebGrid自动处理排序分页（改为控制器端处理），确保AJAX容器ID正确：

@{
    if (Model != null)
    {
        var totalRows = ViewBag.TotalRows ?? Model.Count();
        var currentSort = ViewBag.Sort;
        var currentSortDir = ViewBag.SortDir ?? "ASC";
        var currentPage = ViewBag.Page ?? 1;

        WebGrid grid = new WebGrid(
            null, 
            rowsPerPage: 10, 
            ajaxUpdateContainerId: "DivReferenceTypes",
            sortField: currentSort,
            sortDirection: currentSortDir,
            page: currentPage
        );
        // 关闭自动排序分页，使用控制器处理后的分页数据
        grid.Bind(Model, autoSortAndPage: false, rowCount: totalRows); 
        
        @grid.GetHtml(tableStyle: "table table-bordered",
            mode: WebGridPagerModes.All,
            firstText: "<< First",
            previousText: "< Prev",
            nextText: "Next >",
            lastText: "Last >>",
            columns: grid.Columns(
            grid.Column("ReferenceTypeKey", "Key"),
            grid.Column("ReferenceTypeName", "Reference Name"),
            grid.Column("AdditionalDetails", "Additional Details"),
            grid.Column(header: "Action", format: @<a data-value="@item.ReferenceTypeKey" class="btnEdit" href="javascript:DeleteEntry('@item.ReferenceTypeKey');">Delete</a>)))
    }
}

3. 优化AJAX刷新函数，保留当前排序分页状态 #

修改主视图中的RefreshReferenceTypes函数，获取当前网格的排序分页参数并携带到AJAX请求中，确保刷新后保持当前视图状态：

function RefreshReferenceTypes() {
    // 获取当前网格的排序参数
    var sortLink = $('#DivReferenceTypes').find('.webgrid-sort-header a');
    var sort = sortLink.data('sort') || '';
    var sortdir = sortLink.data('sortdir') || 'ASC';
    // 获取当前页码
    var activePage = $('#DivReferenceTypes').find('.webgrid-pager a.active');
    var page = activePage.length > 0 ? activePage.text() : 1;

    $.ajax({
        url: '@Url.Action("LoadReferenceTypes", "Configuration")',
        type: 'GET',
        dataType: "html",
        data: { sort: sort, sortdir: sortdir, page: page },
        success: function (result) { 
            $('#DivReferenceTypes').html(result); 
        },
        error: function (xhr, status, error) { 
            alert(xhr.responseText);
        }
    });
}

核心原理说明 #

• WebGrid的AJAX排序分页依赖生成的链接URL携带sort、sortdir、page参数，且请求需指向能处理这些参数的Action。
• 关闭autoSortAndPage后，WebGrid不再自动从Request中读取参数，而是使用传入的sortField、sortDirection、page参数生成正确的链接。
• AJAX刷新时携带当前参数，确保刷新后的网格与刷新前的排序分页状态一致，同时新生成的WebGrid链接会自动触发AJAX请求，实现无刷新排序分页。

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