ASP.NET MVC 3 - Razor WebGrid(2)

前回は表示するデータをハードコーディングしていましたが、
今回はデータベースから取得するように変更しました。

データベースはSQL Server 2008、接続方法はADO.NET Entity Framework です。
以下、手順です。

1.ADO.NET Entity Data Model を追加
Modelsフォルダを選択し、右クリックして[新しい項目の追加]を選択します。。
[新しい項目の追加]ウィンドウより[ADO.NET Entity Data Model]を選択するが、
自分の場合は左の[インストールされたテンプレート]の[データ]を選ぶと[ADO.NET Entity Data Model]が表示されました。

2.データベースの接続設定
ほとんどウィザードに従うだけです。使用したいデータベースの.mdfファイルを参照するようにしましょう。

3.一度、ビルドする。

4.Controllerを修正
Entity Data Modelよりデータを取得するように修正します。


public class CustomerController : Controller
{
//
// GET: /Customer/

public ActionResult Index()
{
northwndEntities ent = new northwndEntities();
var model = from p in ent.Customers
orderby p.CustomerID
select p;
return View(model);
}
}


取得したデータを、そのままViewに渡します。
Entity Data ModelのインスタンスをここでDisposeすると、Viewでエラーとなるので要注意です。

5.Viewの修正
Index.cshtmlの一番上の行を修正し、表示するModelの型をEntity Data Model で定義されているもの
に変更します。


@model IEnumerable<WebGridSample.Models.Customers>

@{
ViewBag.Title = "Customers Index";
}
@{
var grid = new WebGrid(
source: Model,
rowsPerPage: 5);
}
<h2>@ViewBag.Title</h2>
<div id="grid">
@grid.GetHtml(tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("CustomerID"),
grid.Column("CompanyName"),
grid.Column("Phone")
)
)

</div>


それとソートはControllerで行っているので、WebGridのインスタンス作成時からは外しました。

実行すると、こんな感じになりました。
ASP.NET MVC 3 Razor - WebGrid(2)_List