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 實作示範,接下來從檢視開始進一步討論其中的細節。
沒有留言:
張貼留言