ASP.NET WP-WebGrid

データベースの前の章では、カミソリコードを使用してデータベースデータを表示し、自分でHTMLマークアップを実行しました。ただし、Razorを使用しているASP.NET Webページでは、* WebGridヘルパー*を使用してデータを表示する簡単な方法もあります。

このヘルパーは、データを表示するHTMLテーブルをレンダリングできます。
このヘルパーは、データをページングする方法を作成するためのフォーマットのオプションをサポートします。
WebGridヘルパーでは、列見出しをクリックするだけでデータをソートできます。

同じデータを表示する簡単な例を見てみましょうが、今回はWebGridヘルパーを使用します。この例では、 ListCustomers.cshtml ファイルのコピーを作成し、 <tr> や <td> タグなどのHTMLマークアップを使用してテーブルを手動で作成する代わりにWebGridを使用します。

WebGridを使用したデータの表示と並べ替え

最初にCSHTMLファイルを作成する必要があります。

データの表示

名前フィールドに CustomersWebGrid.cshtml と入力し、[OK]をクリックして続行します。

CustomersWebGrid.cshtmlファイルの次のコードを置き換えます。

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>

   <head>
      <title>Customers List</title>
      <style>
         table, th, td {
            border: solid 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>

   </head>
   <body>
      <h1>Customers List</h1>

      <div id = "grid">
         @grid.GetHtml()
      </div>

   </body>
</html>

ご覧のとおり、コードは最初に WebPagesCustomers データベースファイルを開き、次に簡単なSQLクエリを作成します。

var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";

dataという名前の変数には、SQL Selectステートメントから返されたデータが入力されます。

var data = db.Query(selectQueryString);

次に、WebGridヘルパーを使用して、データから新しいグリッドを作成します。

var grid = new WebGrid(data);

このコードは、新しいWebGridオブジェクトを作成し、それをグリッド変数に割り当てます。ページの本文では、次のプログラムに示すように、WebGridヘルパーを使用してデータをレンダリングします。

<div id = "grid">
   @grid.GetHtml()
</div>

アプリケーションを実行して、次のURLを指定してみましょう- http：//localhost：36905/CustomersWebGrid 。次のWebページが表示されます。

顧客リスト

ご覧のとおり、可能な限り単純なコードを使用することで、WebGridヘルパーはデータを表示およびソートするときに多くの作業を行います。

上記の出力では、データがFirstNameでソートされていることがわかります。IDやLastNameなどでデータを簡単にソートできるようになりました。列ヘッダーをクリックするだけです。

したがって、ID列ヘッダーをクリックすると、次のスクリーンショットに示すように、データがIDでソートされていることがわかります。

ID顧客リスト

WebGridヘルパーは、列の書式設定やグリッド全体のスタイル設定など、さらに多くのことができます。

同じ例を見てみましょうが、今回は列をフォーマットします。

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>

   <head>
      <title>Customers List</title>
      <style>
         table, th, td {
            border: solid 1px #bbbbbb;
            border-collapse: collapse;
            padding: 2px;
         }
      </style>

   </head>
   <body>
      <h1>Customers List</h1>

      <div id = "grid">
         @grid.GetHtml(
            columns: grid.Columns(
               grid.Column("FirstName", format:@<i>@item.FirstName</i>),
               grid.Column("LastName", format:@<i>@item.LastName</i>),
               grid.Column("Address", format:@<text>$@item.Address</text>)
            )
         )
      </div>

   </body>
</html>

アプリケーションを実行して、次のURLを指定してみましょう- http：//localhost：36905/CustomersWebGrid 。次のWebページが表示されます。

イタリック形式

ご覧のとおり、FirstName列とLastName列のデータは斜体で表示されています。

次のコードに示すように、レンダリングされたHTMLテーブルの外観を指定する* CSSクラス*を定義することにより、グリッド全体のスタイルを設定する別の簡単な例を見てみましょう。

@{
   var db = Database.Open("WebPagesCustomers");
   var selectQueryString = "SELECT * FROM Customers ORDER BY FirstName";
   var data = db.Query(selectQueryString);
   var grid = new WebGrid(data);
}

<!DOCTYPE html>
<html>

   <head>
      <title>Customers List</title>
      <style type = "text/css">
         .grid { margin: 4px; border-collapse: collapse; width: 600px; }
         .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
         .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
         .alt { background-color: #E8E8E8; color: #000; }
         .product { width: 200px; font-weight:bold;}
      </style>

   </head>
   <body>
      <h1>Customers List</h1>

      <div id = "grid">
         @grid.GetHtml(
            tableStyle: "grid",
            headerStyle: "head",
            alternatingRowStyle: "alt",
            columns: grid.Columns(
               grid.Column("FirstName", format:@<i>@item.FirstName</i>),
               grid.Column("LastName", format:@<i>@item.LastName</i>),
               grid.Column("Address", format:@<text>$@item.Address</text>)
            )
         )
      </div>

   </body>
</html>

アプリケーションを実行して、次のURLを指定してみましょう- http：//localhost：36905/CustomersWebGrid 。次のWebページが表示されます。

Customer WebGrid

Asp.net-wp-webgrid

ASP.NET WP-WebGrid

WebGridを使用したデータの表示と並べ替え