ユーザ用ツール

サイト用ツール


it技術:web開発:webgrid

WebGrid

WebGridオブジェクト生成

WebGrid コンストラクターのパラメーター
名前備考
sourceIEnumerable<dynamic>レンダリング対象のデータ。
columnNamesIEnumerable<string>レンダリングされる列をフィルター選択します。
defaultSortstring並べ替えの基準にする既定の列を指定します。
rowsPerPageint1 ページ当たりに表示する行数を制御します (既定値は 10)。
canPageboolデータのページ切り替えを有効または無効にします。
canSortboolデータの並べ替えを有効または無効にします。
ajaxUpdateContainerIdstringグリッドに含まれる要素の ID。これにより、AJAX のサポートが可能になります。
ajaxUpdateCallbackstringAJAX の更新が完了した時点で呼び出されるクライアント側の関数。
fieldNamePrefixstring複数のグリッドをサポートするためのクエリ文字列フィールドのプレフィックス。
pageFieldNamestringページ番号のクエリ文字列フィールド名。
selectionFieldNamestring選択した行番号のクエリ文字列フィールド名。
sortFieldNamestring並べ替え列のクエリ文字列フィールド名。
sortDirectionFieldNamestring並べ替えの方向のクエリ文字列フィールド名。
WebGrid.GetHtml のパラメーター
名前備考
tableStylestring表のスタイル指定に使うクラス。
headerStylestringヘッダー行のスタイル指定に使うクラス。
footerStylestringフッター行のスタイル指定に使うクラス。
rowStylestring行のスタイル指定に使うクラス (奇数行のみ)。
alternatingRowStylestring行のスタイル指定に使うクラス (偶数行のみ)。
selectedRowStylestring選択した行のスタイル指定に使うクラス。
captionstring表見出しとして表示される文字列。
displayHeaderboolヘッダー行を表示するかどうかを指定します。
fillEmptyRowsboolrowsPerPage の行数を確保するために、表に空の行を追加できるかどうかを指定します。
emptyRowCellValuestring空の行に設定される値。fillEmptyRows が設定されている場合にのみ使用されます。
columnsIEnumerable<WebGridColumn>列のレンダリングをカスタマイズするための列モデル。
exclusionsIEnumerable<string>列の値が自動で設定される場合に除外する列。
modeWebGridPagerModesページ切り替えレンダリングのモード (既定値は NextPrevious および Numeric)。
firstTextstring先頭ページへのリンクのテキスト。
previousTextstring前ページへのリンクのテキスト。
nextTextstring次ページへのリンクのテキスト。
lastTextstring最終ページへのリンクのテキスト。
numericLinksCountint表示する数字リンクの数 (既定値は 5)。
htmlAttributesobject要素に設定する HTML 属性を保持します。

ASP.NET MVC で WebGrid を最大限に活用する

WebGrid
@model LatestResult.Models.DropDownListViewModel
@{
    // WebGridオブジェクト生成
    var grid = new WebGrid(source: Model.ResultData, ajaxUpdateContainerId: "content", canPage: false);
}

ソートやページング

アクションメソッドの引数にパラメータの名前を入れると値が自動的に入る。

Controller
public ActionResult List(int page, string sort, string sortDir)

ASP.NET MVCでページャーつきテーブルを表示する

条件により行の背景色を変更

JQueryを使用して、条件によって背景色を変更する。

List.cshtml
@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#content tbody tr").each(function (i, row) {
                var $actualRow = $(row);
                if ($actualRow.find('.state').text() == '未使用') {
                    $actualRow.find('td').css('background-color', 'lightcoral');
                }
 
            });
        });
    </script>
}

参照

メモ

ビューヘルパー(リンク・エンコード)
http://aspmvc.tokumori-domain.com/view/linkviewhelper/
http://www.buildinsider.net/web/bookaspmvc5/040303

検証付きドロップダウンリストを実装する
http://miso-soup3.hateblo.jp/entry/2013/12/04/035934
http://www.atmarkit.co.jp/ait/articles/0904/10/news113_5.html

ASP.NET MVC で二重サブミットを防止したい
http://tnakamura.hatenablog.com/entry/2015/07/30/double-submit-protection

Show Ajax Loading Indicator when sorting or paging ASP.net MVC Webgrid
http://stackoverflow.com/questions/13004401/show-ajax-loading-indicator-when-sorting-or-paging-asp-net-mvc-webgrid

jQuery の ajax 処理で Now Loading の画像を表示する方法
https://jquery.nj-clucker.com/now-loading/

Displaying A Progress Indicator During JQuery Ajax Calls
http://www.binaryintellect.net/articles/1ec0ae5e-ff6e-4b59-8f16-3cb17ecda3cf.aspx
it技術/web開発/webgrid.txt · 最終更新: 2017/03/30 18:29 by yajuadmin