WebGrid

WebGridオブジェクト生成

WebGrid コンストラクターのパラメーター
名前	型	備考
source	IEnumerable<dynamic>	レンダリング対象のデータ。
columnNames	IEnumerable<string>	レンダリングされる列をフィルター選択します。
defaultSort	string	並べ替えの基準にする既定の列を指定します。
rowsPerPage	int	1 ページ当たりに表示する行数を制御します (既定値は 10)。
canPage	bool	データのページ切り替えを有効または無効にします。
canSort	bool	データの並べ替えを有効または無効にします。
ajaxUpdateContainerId	string	グリッドに含まれる要素の ID。これにより、AJAX のサポートが可能になります。
ajaxUpdateCallback	string	AJAX の更新が完了した時点で呼び出されるクライアント側の関数。
fieldNamePrefix	string	複数のグリッドをサポートするためのクエリ文字列フィールドのプレフィックス。
pageFieldName	string	ページ番号のクエリ文字列フィールド名。
selectionFieldName	string	選択した行番号のクエリ文字列フィールド名。
sortFieldName	string	並べ替え列のクエリ文字列フィールド名。
sortDirectionFieldName	string	並べ替えの方向のクエリ文字列フィールド名。

WebGrid.GetHtml のパラメーター
名前	型	備考
tableStyle	string	表のスタイル指定に使うクラス。
headerStyle	string	ヘッダー行のスタイル指定に使うクラス。
footerStyle	string	フッター行のスタイル指定に使うクラス。
rowStyle	string	行のスタイル指定に使うクラス (奇数行のみ)。
alternatingRowStyle	string	行のスタイル指定に使うクラス (偶数行のみ)。
selectedRowStyle	string	選択した行のスタイル指定に使うクラス。
caption	string	表見出しとして表示される文字列。
displayHeader	bool	ヘッダー行を表示するかどうかを指定します。
fillEmptyRows	bool	rowsPerPage の行数を確保するために、表に空の行を追加できるかどうかを指定します。
emptyRowCellValue	string	空の行に設定される値。fillEmptyRows が設定されている場合にのみ使用されます。
columns	IEnumerable<WebGridColumn>	列のレンダリングをカスタマイズするための列モデル。
exclusions	IEnumerable<string>	列の値が自動で設定される場合に除外する列。
mode	WebGridPagerModes	ページ切り替えレンダリングのモード (既定値は NextPrevious および Numeric)。
firstText	string	先頭ページへのリンクのテキスト。
previousText	string	前ページへのリンクのテキスト。
nextText	string	次ページへのリンクのテキスト。
lastText	string	最終ページへのリンクのテキスト。
numericLinksCount	int	表示する数字リンクの数 (既定値は 5)。
htmlAttributes	object	要素に設定する 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>
}

参照

Razor で #if DEBUG を使う http://jirolabo.hatenablog.com/entry/2016/02/22/160232 http://stackoverflow.com/questions/4696175/razor-view-engine-how-to-enter-preprocessorif-debug

メモ

ビューヘルパー（リンク・エンコード）
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

八寿のナレッジベース

目次

WebGrid

WebGridオブジェクト生成

ソートやページング

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

参照

メモ