asp.net webgridヘッダーの書式設定とページングの問題

Question

asp.net MVC 3でaspxビューエンジンを使用しています。選択したレコードとページを適切に表示するWebGridコントロールがあります。フィールドヘッダーをクリックすると、データもソートされます。

問題：2ページと私はソート可能なフィールドのいずれかをクリックすると

1. 、グリッドは、並べ替え後に戻って最初のページに再読み込みします。私はまだソートをしながら、2番目のページにそれを保持したい。
2. 次のコードのように、「レベル」フィールドの隣にマウスオーバーすると、そのフィールドを説明するツールチップのように動作する静的なDIVレイヤーが表示される画像を表示したいとします。

これらの2つのことを行うためのプロパティはありません。回避策はありますか？ここに私のコードは次のとおりです。お時間を

var grid = new WebGrid(source: Model.EmployeeList, columnNames: new[] { "Name", "Level", "Department"}); 

grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0, 
    columns: grid.Columns(
    grid.Column("Name", header: "Full Name"), 
    grid.Column("Level", header: "Level" ), 
    grid.Column("Department", header: "Department"))) 

おかげで...

Answer 1

あなたのWebGridのが置かれているコンテナの名前にだけでなくajaxUpdateContainerIdパラメータを設定する必要があります。 exampeの場合：

<div id="updateWebGrid"> 
    @grid.GetHtml(tableStyle: "table-EmpStyle", headerStyle: "tr-header", rowStyle: "webGrid-Row", alternatingRowStyle: "webGrid-alt-Row", previousText: "Previous",nextText: "Next", numericLinksCount: 0, ajaxUpdateContainerId: "updateWebGrid" 
    columns: grid.Columns( 
     grid.Column("Name", header: "Full Name"), 
     grid.Column("Level", header: "Level" ), 
     grid.Column("Department", header: "Department"))) 
</div> 

あなたの2番目の質問について、あなたは例えば、いくつかのクラス

を注入するために、あなたの列のFormatプロパティを使用する必要があります。

@helper CreateImage(string m) 
{ 
    <div>@m <img src="#" class="someImage"/></div> 
} 

@grid.GetHtml(columns: new WebGridColumn[] 
{ 
    new WebGridColumn() {ColumnName = "TestTypeId", Header = "Test Type"}, 
    new WebGridColumn() {ColumnName = "Name", Header = "Name", Format = m => CreateImage(m.Name)} 
}) 

あなたはこの部分を宣言したら、あなたがすべきクラスsomeImageのimgタグの上にマウスを置くと、divを表示するためにjQueryを使用します。

$(document).ready(function() { 
    $(".someImage").mouseover(function() { 
     $("yourDivId_Or_Class_for_Tooltip").show(); 
    }); 

    $(".someImage").mouseout(function() { 
     $("yourDivId_Or_Class_for_Tooltip").show(); 
    }); 
}); 

それはそれです。私はこのコードのすべての部分をチェックしませんでしたが、これはあなたが従うべきロジックです。私はWebGridに関するブログ記事を書いていますので、参考にしてください：http://apparch.wordpress.com/2012/01/04/webgrid-in-mvc3/