ASP.NET MVC 3 - Razor WebGrid
ASP.NET MVC3 で追加された機能に、RazorのWebGridがあります。
従来のASP.NET MVC ではリストを表示するのに、Viewにループ文を書いていました。
WebGridを使うと、Viewにループ文を書くことなく、リスト構造のオブジェクトを表示できるようです。
以下、サンプルプログラムを組んだときの手順です。
1.
リストを表示するControllerを作る。
2.
データを格納するためのModelを作る。
public class CustomerModel
{
public string CustomerID { get; set; }
public string CompanyName { get; set; }
public string Phone { get; set; }
}
単純なPOJOです。
3.
Controllerを右クリックし、[Add View]を選択する。
[Add View]ダイアログでは、[Create a strongry-typed View]にチェックを入れて
Model Class に先に作ったModelを選択する。
[Scaffold Template]は[List]を選択する。
これを行うまえに、一度ビルドするのを忘れずに。。。
ビルドしてからでないと、先に作ったModelが選択項目に出て来ないため。
4.
作成されたViewより、ループ文を消す。
今回はこのループ文に変わりに、WebGridにてリストを表示する。
5.
WebGridの定義をViewに追加する。
Viewは最終的にこんなソースになりました。
@model IEnumerable@{
ViewBag.Title = "Customers Index";
}
@{
var grid = new WebGrid(
source: Model,
defaultSort: "CustomerID",
rowsPerPage: 5);
}
<h2>@ViewBag.Title</h2>
@grid.GetHtml(tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("CustomerID"),
grid.Column("CompanyName"),
grid.Column("Phone")
)
)
WebGridのインスタンスを作成している箇所で、表示するオブジェクトとしてViewのModelを指定し、
ソートする列と一ページの表示数も指定しています。
そしてリストを表示したい箇所で、GetHtml()メソッドを呼び出しています。
この箇所で、リストに表示する列や書式も指定しています。
6.
Modelのリストを返すメソッドを定義する。
public class CustomerDAL
{
public ListGetCustomers()
{
Listcustomers = new List
{
new CustomerModel{CustomerID = "aaa",
CompanyName = "AaCompany",
Phone = "000-000-0000"},
new CustomerModel{CustomerID = "bbb",
CompanyName = "BbCompany",
Phone = "111-111-1111"},
new CustomerModel{CustomerID = "ccc",
CompanyName = "CcCompany",
Phone = "222-222-2222"},
new CustomerModel{CustomerID = "ddd",
CompanyName = "DdCompany",
Phone = "333-333-3333"},
new CustomerModel{CustomerID = "eee",
CompanyName = "EeCompany",
Phone = "444-444-4444"},
new CustomerModel{CustomerID = "fff",
CompanyName = "FfCompany",
Phone = "555-555-5555"},
new CustomerModel{CustomerID = "ggg",
CompanyName = "GgCompany",
Phone = "666-666-6666"},
new CustomerModel{CustomerID = "hhh",
CompanyName = "HhCompany",
Phone = "777-777-7777"}
};
return customers;
}
}
今回は単純にCustomerModelのインスタンスをリストに格納するだけです。
実際の開発では、データベースより取得した値をリストに入れて返すでしょう。
7.
最初に作ったControllerを修正し、Modelのリストを取得し、Viewに渡すようにする。
public class CustomerController : Controller
{
//
// GET: /Customer/public ActionResult Index()
{
var customers = new CustomerDAL().GetCustomers();
return View(customers);
}}
GetCustomers()で、Modelのリストを取得し、Viewに渡しています。
実行すると、このようにリストを表示できました。
List以外のオブジェクトも表示できるのか、
ソースや表示する列の指定を文字列ではなくプロパティでできるのかなど
機会があれば試してみたいです。
