1.5 與資料互動－建立 Model

ASP.NET MVC 實務精要｜第一章 快速入門

網頁通需要進一步與特定的資料進行互動，包含資料的存取操作等等。MVC 裏面的 M 是 Model ，意思是指資料模型，負責應用程式與資料來源的溝通，並根據需求經由控制器進一步與 View 作互動，因此當你要取得伺服器的資料，例如資料庫中的特定資料內容，就必須透過 Model 這一層轉給控制器，最後由 View 將其呈現出來。

實際的應用開發，Model 通常會串接至各種實體的底層資料庫，但這不是必要的，你可以取得任何資料，為了方便說明同時讓你理解Model與資料庫的關聯並非必要，我們打算建立一組簡單的資料來示範 MVC 中Model的實際配置與設計，並且將其取出呈現在網頁。



為了呈現表列的資料，我們需要以下的資料結構與資料內容：

編號	品項名稱	價格	說明
1001	LINQ 精要	550	LINQ 入門語法到各種擴充功能討論。
1002	Entity Framework 精要	750	Entity Framework 實戰完整解構。
1003	ASP.NET MVC 精要	650	ASP .NET MVC 入門討論，從一個簡單的商站系統進行ASP.NET MVC 的討論。
1004	HTML5 從零開始	550	從基礎HTML標籤開始，逐步討論前端開發與HTML5相關技術。
1005	HTML5 完美風暴	1000	HTML5核心功能完整解構
1006	響應式網頁設計精要	880	響應式網頁設計理論與實踐示範，涵蓋手機行動裝置網頁特性發展。

現在開啟前述的 FirstMVC 專案，於 Models 資料夾按一下滑鼠右鍵展開功能表：



點選「加入」項目，於接下來的子功能表中點選「類別」，加入一個全新的類別，將其命名為Item.cs 如下：

按一下「新增」按鈕將Item.cs類別檔案加入Models資夾中。於其中建立所要示範的資料結構，內容如下：

public class Item

{

    public int ItemId { set; get; }

    public string Name { set; get; }

    public int Price { set; get; }

    public string Description { set; get; }

}

其中每個屬性對應至資料結構中的欄位如下：

屬性	欄位
ItemId	編號
Name	品項名稱
Price	價格
Description	說明

接下來為每一筆資料建立一個Item類別物件，並封裝成資料集以提供控制器存取，於Modles資料夾另外建立一個類別並且命名為KTBookStore.cs，建立內容如下：

public class KTBookStore

{

    public List<Item> Items

    {

        get

        {

            return new List<Item>

                {

                   new Item {ItemId=1001   ,Name = "LINQ 精要",

Description="LINQ 入門…", Price = 550},

                   new Item {ItemId=1002   ,Name = "Entity Framework 精要",

Description="Entity …", Price = 950}  

                   …

                };

        }}}

其中的Items 回傳一個Item型別的 List 物件，封裝稍早列舉的六筆書籍資料。控制器可以透過 KTBookStore 取得 Items ，並將其內容傳回檢視於瀏覽器呈現。
重新開啟Controllers資料夾中的HelloController.cs 控制器，配置以下的程式碼：

public ActionResult Products()

{

KTBookStore db = new KTBookStore();

var rows = db.Items ;

return View(rows);

}

Products是一個動作方法，其中建立KTBookStore模型物件 db ，透過 Items 的引用取得其中的資料物件內容 rows 。由於最後要在網頁上呈現這些資料的內容，除了回傳的型態為ActionResult，最後的 return 敘述回傳 View() 同時將 rows 當作參數傳入。接下來建立檢視於瀏覽器呈現資料內容，於上述 Products() 方法的區塊範圍內按一下右鍵展開功能表：



於功能表中點選「新增檢視」，開啟「加入檢視」對話方塊：



保留基本設定即可，按一下「加入」按鈕，會在Views/Hello資料夾中產生一個Products.cshtml 檢視檔案，這個檔案會在Hello控制器Products() 動作方法被要求時回傳，調整其中的內容如下：

@model IEnumerable<FirstMVC.Models.Item>

@{

    ViewBag.Title = "Products";

}

<h2>商品清單</h2>

<table class="table">

    <tr>

        <th>

            <span>編號</span>

        </th>

        <th>

            <span>品項名稱</span>

        </th>

        <th>

            <span>價格</span>

</th>

        <th>

            <span>說明</span>

        </th>

        <th></th>

    </tr>

    @foreach (var item in Model)

    {

        <tr>

            <td>

                @Html.DisplayFor(modelItem => item.ItemId)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Name)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Price)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Description)

            </td>

          

        </tr>

    }

</table>

由於Products()動作方法回傳時將取得的資料物件傳入，第一行的 @model 表示對應的資料型別 FirstMVC.Models.Item ，後續的 HTML 標籤，結合 Razor 語法，逐一將其中的資料取出，以下的網址字串呈現本節一開始所列舉的網頁畫面。

http://localhost:52153/Hello/Products　　

到目前為止，我們完成了最基本的MVC 實作示範，接下來從檢視開始進一步討論其中的細節。