当前位置: 动力学知识库 > 问答 > 编程问答 >

asp.net mvc - Paging and Sorting in Mutliple Partial View with MVC Contrib

问题描述:

I create an application using asp mvc razor + mvc grid.

My problem is : i have one view that contain multiple action that return partial view, in each partial view there is a grid that display the data. I am using mvc contrib grid which support paging and sorting.

My view (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>

Formations action :

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

{

IPagination<StratUnitVo> pagination = ....

return PartialView("_Formations", pagination);

}

Partial View _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)));

}

Other action and view is most like sample above (just difference in the model data).

My problem is :

  1. When i click the navigation paging in one grid (example : Formations), the other grid (Pools and Zones) will be navigate to. For example : click page 2 in formations grid will move another grid to page 2 too.
  2. When i click the column header in one grid (which mean i want to sort the data), the whole page is replaced by partial view. What i want is only the grid that i have clicked is sorted.

How can i fix that ?

Thanks!

网友答案:

Well, I just solved my problem like this :

  1. For paging : add new parameter for each action called 'type' and validate based on the parameter.

    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. For sorting : use ajax sort for mvc grid :

    $(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");
            }
        },
       });
      }));
    }
    
分享给朋友:
您可能感兴趣的文章:
随机阅读: