MS_ASPNETMVCWebGrid

ASP.NET MVCのWebGrid

• 戻る（ASP.NET MVCの利用方法）

概要

• WebGrid クラス (System.Web.Helpers)
  https://learn.microsoft.com/ja-jp/dotnet/api/system.web.helpers.webgrid

補足（WebGrid とは何だったのか）: 原文はリンクのみだが、
位置付けを補っておく。

WebGrid は、ASP.NET Web Pages（Razor）で
導入されたヘルパーで、
IEnumerable を渡すと HTML の表を出力するというものである。

@{
    var grid = new WebGrid(Model, rowsPerPage: 20);
}
@grid.GetHtml(
    tableStyle: "table table-striped",
    columns: grid.Columns(
        grid.Column("Id",   "ID"),
        grid.Column("Name", "名前"),
        grid.Column(header: "操作", format: @<text>
            @Html.ActionLink("編集", "Edit", new { id = item.Id })
        </text>)
    ));

提供していた機能:

・ページング（rowsPerPage）
・ソート（列ヘッダのクリック）
・列の書式指定（format:）
・Ajax による部分更新（ajaxUpdateContainerId）

ASP.NET Web Forms の GridView に相当するものを、
MVC 側で提供しようとしたもの、と理解すればよい。

現在の状況:

	状況
System.Web.Helpers.WebGrid	.NET Framework 専用。ASP.NET Core には存在しない
開発状況	事実上、更新停止
新規採用	推奨しない

なぜ廃れたのか:

① 生成される HTML を細かく制御できない
     → デザイナが用意したマークアップに合わせられない
② 【サーバ側でページング・ソートする】前提
     → 現在はクライアント側 or API 側で行うことが多い
③ MVC の思想（View は表示だけ）と噛み合わない
     → grid.Column の中にロジックが入り込む
④ 型が dynamic 経由になり、コンパイル時に検証できない ★
     → 本ページ本体が扱っている DataTable 問題の根本原因でもある

現在の代替:

手段	内容
foreach で素直に書く	最も確実。HTML を完全に制御できる
クライアント側のグリッド ライブラリ	DataTables.js、AG Grid、Tabulator 等。ソート・検索・仮想化が強力
PagedList / X.PagedList	ページングだけを補助する
Blazor の QuickGrid	.NET 8 以降。C# で書けるグリッド
Razor Pages + タグ ヘルパー	表そのものは手書き、ページングだけ部品化

<!-- 現在は「素直に書く」で困らないことが多い -->
<table class="table">
  <thead><tr><th>ID</th><th>名前</th></tr></thead>
  <tbody>
  @foreach (var item in Model.Items)
  {
    <tr><td>@item.Id</td><td>@item.Name</td></tr>
  }
  </tbody>
</table>

名前の紛らわしさにも注意する。

・System.Web.Helpers.WebGrid   … 本ページの WebGrid（サーバ側）
・DataTables.js                 … jQuery のグリッド プラグイン（クライアント側）
・System.Data.DataTable         … ADO.NET のインメモリ テーブル ★

 → [ASP.NET MVCでDataTableを使用する。] は
   【System.Data.DataTable】の話である

参考

• ASP.NET MVCでDataTableを使用する。
• asp.net mvc 3 - how to format html helpers in webgrid column - Stack Overflow
  https://stackoverflow.com/questions/15158183/how-to-format-html-helpers-in-webgrid-column

Microsoft Learn

• WebGrid クラス (System.Web.Helpers)
  https://learn.microsoft.com/ja-jp/dotnet/api/system.web.helpers.webgrid
• ASP.NET Core Blazor QuickGrid コンポーネント
  https://learn.microsoft.com/ja-jp/aspnet/core/blazor/components/quickgrid

---

Tags: 移行, .NET開発, ASP.NET, ASP.NET MVC