使用 MVC Contrib 在多个局部视图中分页和排序答案

【问题标题】：Paging and Sorting in Mutliple Partial View with MVC Contrib使用 MVC Contrib 在多个局部视图中分页和排序
【发布时间】：2013-01-07 17:54:33
【问题描述】：

我使用 asp mvc razor + mvc grid 创建了一个应用程序。我的问题是：我有一个视图，其中包含返回部分视图的多个操作，在每个部分视图中都有一个显示数据的网格。我正在使用支持分页和排序的 mvc contrib 网格。

我的观点（index.cshtml）：

<div class="row-fluid">
    <div id="formations" class="control-group">
    @Html.Action("Formations")
</div>

<div id="pools" class="control-group">
    @Html.Action("Pools")
</div>

<div id="zones" class="control-group">
    @Html.Action("Zones")
</div>

编队行动：

    public ActionResult Formations(GridSortOptions sort, int? page, string filter = "all")
    {

        IPagination<StratUnitVo> pagination = ....        
        return PartialView("_Formations", pagination);
    }

部分视图_Formations：

@Html.Grid(Model).Sort(ViewData["sort"] as GridSortOptions).Columns(col =>
  {
       col.For(p => Html.ActionLink(p.LongName, "EditFormation", "Stratigraphy", new { id = p.Id }, null).ToHtmlString()).Encode(false).Named(Locale.Name).SortColumnName("LongName");
       col.For(p => p.FormCode).Named(Locale.Code);
   col.For(p => p.ReferenceStratUnit.LongName).Named(Locale.ReferenceFormation);      
   }).Attributes(@class => "table table-condensed table-striped table-hover")

@if (Model.Count() > 0)
{
    @Html.Raw(@Html.Pager(Model)));
}

其他动作和视图最像上面的示例（只是模型数据的差异）。我的问题是：

当我单击一个网格中的导航分页（例如：编队）时，将导航到另一个网格（池和区域）。例如：在编队网格中单击第 2 页也会将另一个网格移动到第 2 页。
当我单击一个网格中的列标题（这意味着我要对数据进行排序）时，整个页面将被部分视图替换。我想要的只是对我点击的网格进行排序。

我该如何解决？

谢谢！

【问题讨论】：

标签： asp.net-mvc sorting paging mvccontrib

【解决方案1】：

好吧，我刚刚这样解决了我的问题：

对于分页：为每个名为“类型”的操作添加新参数并根据参数进行验证。

public ActionResult Formations(GridSortOptions sort, int? page, string type, string filter = "all")
{
    if (type != null && !type.Equals("Formation")) page = 1;            

    IPagination<StratUnitVo> pagination = ......
    return PartialView("_Formations", pagination);
}

对于排序：对 mvc 网格使用 ajax 排序：

$(function () {
    ajaxSort('pools', 'Stratigraphy', 'Pools');
    ajaxSort('formations', 'Stratigraphy', 'Formations');
    ajaxSort('zones', 'Stratigraphy', 'Zones');         
});

function ajaxSort(tableId, controllerName, actionName) {
$(document).on('click', '#' + tableId + ' > table > thead > tr > th > a', (function () {
// store the href attribute, will get the column and direction parameter
var href = $(this).attr('href');

// mvc grid sort url is : 'http\\controllerName\\actionName?Column=columnname&Direction=[Ascending|Descending]            
var temp = href.split('&');

// retrieve the column name
var column = temp[0].split('=')[1];
// retrieve sort direction
var direction = temp[1].split('=')[1];
// retrieve column header
var columnHeader = $(this).text();

// remove the href attribute, prevent postback
$(this).removeAttr('href');

// use ajax to sort
$.ajax({
    url: '/' + controllerName + '/' + actionName,
    data: { 'Column': column, 'Direction': direction },
    dataType: 'html',
    success: function (data) {                
        $('#' + tableId).html(data);

        columnHeader = columnHeader.replace('\u25B2', '').replace('\u25BC', '');

        // show up down arrow
        // \u25B2 and \u+25BC is the unicode character for up/down triangle (arrow) to display in HTML                                
        var column = $('#' + tableId + ' > table > thead > tr > th > a:contains(' + columnHeader + ')');

        if(direction == 'Ascending')
            column.text(columnHeader + "\u25B2");
        else {                
            column.text(columnHeader + "\u25BC");
        }
    },
   });
  }));
}

【讨论】：