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>