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

為了呈現表列的資料,需要以下的資料內容:
現在開啟前述篇章建立的 FirstMVC 專案,於 Models 資料按一下滑鼠右鍵展開功能表:

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

按一下「新增」按鈕將Item.cs類別檔案加入Models資夾中。於其中建立所要示範的資料結構,內容如下:
其中每個屬性對應至資料結構中的欄位如下:
接下來為每一筆資料建立一個Item類別物件,並封裝成資料集以提供控制器存取,於Modles資料夾另外建立一個類別並且命名為KTBookStore.cs,建立內容如下:
其中的Items 回傳一個Item型別的 List 物件,封裝稍早列舉的六筆書籍資料。控制器可以透過 KTBookStore 取得 Items ,並將其內容傳回檢視於瀏覽器呈現。
重新開啟Controllers資料夾中的HelloController.cs 控制器,配置以下的程式碼:
roducts是一個動作方法,其中建立KTBookStore模型物件 db ,透過 Items 的引用取得其中的資料物件內容 rows 。由於最後要在網頁上呈現這些資料的內容,除了回傳的型態為ActionResult,最後的 return 敘述回傳 View() 同時將 rows 當作參數傳入。接下來建立檢視於瀏覽器呈現資料內容,於上述 Products() 方法的區塊範圍內按一下右鍵展開功能表:

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

保留基本設定即可,按一下「加入」按鈕,會在Views/Hello資料夾中產生一個Products.cshtml 檢視檔案,這個檔案會在Hello控制器Products() 動作方法被要求時回傳,調整其中的內容如下:
由於Products()動作方法回傳時將取得的資料物件傳入,第一行的 @model 表示對應的資料型別 FirstMVC.Models.Item ,後續的 HTML 標籤,結合 Razor 語法,逐一將其中的資料取出,以下的網址字串呈現本節一開始所列舉的網頁畫面。
為了呈現表列的資料,需要以下的資料內容:
編號 | 品項名稱 | 價格 | 說明 |
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);
}
roducts是一個動作方法,其中建立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
沒有留言:
張貼留言