Пейджинг и сортировка в Mutliple Partial View с MVC Contrib

Question

Я создаю приложение, используя 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)));
}

Другие действия и вид больше похожи на пример выше (только разница в данных модели). Моя проблема:

1. Когда я щелкаю навигационную страницу в одной сетке (пример: формации), другая сетка (Пулы и зоны) будет перемещаться к. Например: щелкните страницу 2 в сетке образований, чтобы переместить другую сетку на страницу 2.
2. Когда я щелкаю заголовок столбца в одной сетке (что означает, что я хочу отсортировать данные), вся страница заменяется частичным представлением. То, что я хочу, это только сетка, по которой я щелкнул, отсортирована.

Как я могу это исправить?

Спасибо!

Answer 1

Ну, я просто решил свою проблему следующим образом:

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);
   }
   

2. Для сортировки: используйте сортировку ajax для сетки mvc:

   $(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");
           }
       },
      });
     }));
   }