1

asp mvc razor +mvcgridを使用してアプリケーションを作成します。私の問題は次のとおりです。部分ビューを返す複数のアクションを含む1つのビューがあり、各部分ビューにはデータを表示するグリッドがあります。ページングと並べ替えをサポートするMVCcontribグリッドを使用しています。

私の見解（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. 1つのグリッド（例：フォーメーション）でナビゲーションページングをクリックすると、他のグリッド（プールとゾーン）に移動します。例：フォーメーショングリッドでページ2をクリックすると、別のグリッドもページ2に移動します。
  2. 1つのグリッドで列ヘッダーをクリックすると（つまり、データを並べ替えたい場合）、ページ全体が部分ビューに置き換えられます。私が欲しいのは、クリックしたグリッドだけがソートされていることです。

どうすれば修正できますか？

ありがとう！

4

1 に答える 1

4

さて、私はこのように私の問題を解決しました：

  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. 並べ替えの場合: 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");
        }
    },
   });
  }));
}
于 2013-01-28T00:27:17.700 に答える