ASP.NET MVC 實務精要｜第一章 快速入門
網頁通需要進一步與特定的資料進行互動，包含資料的存取操作等等。MVC 裏面的 M 是 Model ，意思是指資料模型，負責應用程式與資料來源的溝通，並根據需求經由控制器進一步與 View 作互動，因此當你要取得伺服器的資料，例如資料庫中的特定資料內容，就必須透過 Model 這一層轉給控制器，最後由 View 將其呈現出來。
實際的應用開發，Model 通常會串接至各種實體的底層資料庫，但這不是必要的，你可以取得任何資料，為了方便說明同時讓你理解Model與資料庫的關聯並非必要，我們打算建立一組簡單的資料來示範 MVC 中Model的實際配置與設計，並且將其取出呈現在網頁。
為了呈現表列的資料，我們需要以下的資料結構與資料內容：
現在開啟前述的 FirstMVC 專案，於 Models 資料夾按一下滑鼠右鍵展開功能表：
點選「加入」項目，於接下來的子功能表中點選「類別」，加入一個全新的類別，將其命名為Item.cs 如下：
按一下「新增」按鈕將Item.cs類別檔案加入Models資夾中。於其中建立所要示範的資料結構，內容如下：
其中每個屬性對應至資料結構中的欄位如下：
接下來為每一筆資料建立一個Item類別物件，並封裝成資料集以提供控制器存取，於Modles資料夾另外建立一個類別並且命名為KTBookStore.cs，建立內容如下：
其中的Items 回傳一個Item型別的 List 物件，封裝稍早列舉的六筆書籍資料。控制器可以透過 KTBookStore 取得 Items ，並將其內容傳回檢視於瀏覽器呈現。
重新開啟Controllers資料夾中的HelloController.cs 控制器，配置以下的程式碼：
Products是一個動作方法，其中建立KTBookStore模型物件 db ，透過 Items 的引用取得其中的資料物件內容 rows 。由於最後要在網頁上呈現這些資料的內容，除了回傳的型態為ActionResult，最後的 return 敘述回傳 View() 同時將 rows 當作參數傳入。接下來建立檢視於瀏覽器呈現資料內容，於上述 Products() 方法的區塊範圍內按一下右鍵展開功能表：
於功能表中點選「新增檢視」，開啟「加入檢視」對話方塊：
保留基本設定即可，按一下「加入」按鈕，會在Views/Hello資料夾中產生一個Products.cshtml 檢視檔案，這個檔案會在Hello控制器Products() 動作方法被要求時回傳，調整其中的內容如下：
由於Products()動作方法回傳時將取得的資料物件傳入，第一行的 @model 表示對應的資料型別 FirstMVC.Models.Item ，後續的 HTML 標籤，結合 Razor 語法，逐一將其中的資料取出，以下的網址字串呈現本節一開始所列舉的網頁畫面。
到目前為止，我們完成了最基本的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 實作示範，接下來從檢視開始進一步討論其中的細節。
沒有留言:
張貼留言