呂高旭｜隨筆。HTML5 ＆ World Wide Web

康廷數位｜www.kangting.tw

2014-02-13

ASP.NET MVC 精要 － 與資料互動（3）

MVC 裏面的 M 是 Model ，意思是指資料模型，負責應用程式與資料來源的溝通，並根據需求經由控制器進一步與 View 作互動…

原文：http://www.kangting.tw/2014/02/aspnet-mvc-3.html

MVC 裏面的 M 是 Model ，意思是指資料模型，負責應用程式與資料來源的溝通，並根據需求經由控制器進一步與 View 作互動，因此當你要取得伺服器的資料，例如資料庫中的特定資料內容，就必須透過 Model 這一層轉給控制器，最後由 View 將其呈現出來。現在我們建立一組測試資料來示範 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　　
 

原文：http://www.kangting.tw/2014/02/aspnet-mvc-3.html