ASP.NET MVC 實務精要｜第一章 快速入門
檢視頁負責網頁的組成，如前一個小節示範的商品展示頁，除了固定的HTML標籤，同時包含以 @ 字元開頭的Razor語法敘述構成的動態內容。Razor是檢視引擎，負責動態建構檢視頁的內容與外觀，透過其專屬的語法，整合程式碼與資料，並在需要的時候結合HTML標籤，輸出至瀏覽器以呈現網頁內容。回到 Products.cshtml 檢視檔案，來看看其中的第一行：
這是一行Razor語法，因此以@字元開始，而 @model宣告了 model 物件型態，這個型態必須對應後續控制器傳送過來的資料型態，以這個檢視檔案所接收的控制器HelloController.cs 動作方法Products()，其中內容如下：
請特別注意最後一行，參數 rows 為一 IEnumerable<FirstMVC.Models.Item> 相容型態的物件，它被傳送至檢視中，因此在檢視中透過model 物件即可將其接收下來。
完成model物件宣告之後，接下來於檢視中，就可以進一步透過 Razor 的 Model 關鍵字存取控制器傳送過來的資料物件，也就是上述的 rows ，而在這個範例中，rows包含了數筆書籍資料，因此透過 foreach 語法逐一將其取出，並且針對每一筆資料存取其欄位內容，最後整合<table>標籤以表格型式輸出。
在Products.cshtml 檢視檔案中，除了以 @ 為字首，Razor 語法包含了兩種不同的格式，如果要即時取得某個特定的值，例如為了逐筆呈現所有取得的資料欄位內容，於每一個標籤中撰寫了以下的語法：
這一行Razor 語法會取得此筆 item 資料的 Name 欄位內容，並結合至
標籤中，這是獨立的程式片段。如果某段程式碼並非要取得回傳值而是進行特定的邏輯運算，則需將其封裝於 ＠{…} 構成的區段中，其中的程式碼必須是合法的C# 程式碼，例如檢視檔案中的設值程式碼：
其中執行的設值運算將字串 Products 設定給 ViewBag.Title，而且最後以 ; 結束，形成一段合法的C#程式碼。
如下的foreach巡覽操作亦是一種程式區塊：
其中大括弧區塊的內容會持續輸出，對於製作表格或是清單類型的內容相當有用。
最後，你必須理解的是，這些大括弧構成的區塊執行特定程式邏輯運算，相較於程式片段的內容，並不會有任何回傳值呈現在網頁上。
HTML Helper
在 foreach{} 程式區塊中，除了程式碼，還可以進一步嵌入所需的HTML標籤，例如這個範例中的 <tr> 與 <td> 標籤，而為了方便整合資料與網頁標籤，甚至能夠利用HTML Helper 動態建立標籤，HTML Helper 是 MVC 提供的 HtmlHelper 類別 ，用來協助開發人員產生各種HTML標籤內容。現在以 Products.cshtml 其中的取得item 資料的Razor程式碼為例：
緊接著 @ 後方的 Html 會取得一個 HtmlHelper 類別物件，它提供了大量的方法支援檢視的建立，DisplayFor() 即為其中一個方法成員，它會回傳小括弧裏運算式的結果文字內容，因此如果開啟這個檢視所產生的網頁原始碼內容，你會看到每筆資料欄位被逐一取出，結合<td>以表格型式呈現，部份內容如下：
這裏僅是單純的取出運算式的內容文字將其呈現出來，後續我們會看到更多的設計討論。
ViewBag資料字典
前一個小節討論Razor語法時，我們看到了引用 ViewBag 屬性的程式片段如下：
ViewBag 是一種資料字典屬性，可以同時在控制器與檢視中進行存取，因為這個特性，當我們需要在檢視與控制器中進行資料溝通時，即可透過ViewBag來完成。現在於HelloController控制器中建立一個動作方法 CompanyInfo() 並且配置以下的內容：
其中建立了三個自訂的清單值：CompanyName、CDescription1與CDescription2，儲存網站名稱與相關資訊，最後回傳檢視檔案。針對此動作方法新增檢視CompanyInfo.cshtml，並且於其中撰寫如下的內容：
其中包含三行以@開始的Razor程式片段，分別引用動作方法中設定的ViewBag屬性值，並且將其呈現於畫面中，檢視結果如下：
當然你也可以在檢視檔案中設定ViewBag，就如同每個新的檢視建立時預設會有以下的Razor 程式碼：
在預設的情形下，ViewBag.Title用來表示網頁的標題，這一行將其設定為檢視的名稱，你可以自行修改，而完成ViewBag設定，其它檢視亦能取得此屬性值，關於ViewBag.Title的細節，後續討論預設樣板時會有進一步的說明。
ViewBag 進一步包裝 ViewData 以簡化資料的存取設定，更正式的，你可以利用 ViewData 完成相同的資料存取操作，上述的範例修改如下：
在檢視中，可以透過ViewData 進一步作存取如下：
於瀏覽器檢視會得到相同的結果，讀者可以進一步自行測試，ViewData與ViewBag設定的資料可以相互存取，因此你可以根據自已的需求，任意使用ViewData或是ViewBag進行操作。
檢視頁負責網頁的組成，如前一個小節示範的商品展示頁，除了固定的HTML標籤，同時包含以 @ 字元開頭的Razor語法敘述構成的動態內容。Razor是檢視引擎，負責動態建構檢視頁的內容與外觀，透過其專屬的語法，整合程式碼與資料，並在需要的時候結合HTML標籤，輸出至瀏覽器以呈現網頁內容。回到 Products.cshtml 檢視檔案，來看看其中的第一行：
@model IEnumerable<FirstMVC.Models.Item>
這是一行Razor語法，因此以@字元開始，而 @model宣告了 model 物件型態，這個型態必須對應後續控制器傳送過來的資料型態，以這個檢視檔案所接收的控制器HelloController.cs 動作方法Products()，其中內容如下：
public ActionResult Products()
{
KTBookStore db = new KTBookStore();
var rows = db.Items ;
return View(rows);
}
請特別注意最後一行，參數 rows 為一 IEnumerable<FirstMVC.Models.Item> 相容型態的物件，它被傳送至檢視中，因此在檢視中透過model 物件即可將其接收下來。
完成model物件宣告之後，接下來於檢視中，就可以進一步透過 Razor 的 Model 關鍵字存取控制器傳送過來的資料物件，也就是上述的 rows ，而在這個範例中，rows包含了數筆書籍資料，因此透過 foreach 語法逐一將其取出，並且針對每一筆資料存取其欄位內容，最後整合<table>標籤以表格型式輸出。
在Products.cshtml 檢視檔案中，除了以 @ 為字首，Razor 語法包含了兩種不同的格式，如果要即時取得某個特定的值，例如為了逐筆呈現所有取得的資料欄位內容，於每一個標籤中撰寫了以下的語法：
@Html.DisplayFor(item => item.Name)
這一行Razor 語法會取得此筆 item 資料的 Name 欄位內容，並結合至
標籤中，這是獨立的程式片段。如果某段程式碼並非要取得回傳值而是進行特定的邏輯運算，則需將其封裝於 ＠{…} 構成的區段中，其中的程式碼必須是合法的C# 程式碼，例如檢視檔案中的設值程式碼：
@{
ViewBag.Title = "Products";
}
其中執行的設值運算將字串 Products 設定給 ViewBag.Title，而且最後以 ; 結束，形成一段合法的C#程式碼。
如下的foreach巡覽操作亦是一種程式區塊：
@foreach (var item in Model)
{
…
}
其中大括弧區塊的內容會持續輸出，對於製作表格或是清單類型的內容相當有用。
最後，你必須理解的是，這些大括弧構成的區塊執行特定程式邏輯運算，相較於程式片段的內容，並不會有任何回傳值呈現在網頁上。
HTML Helper
在 foreach{} 程式區塊中，除了程式碼，還可以進一步嵌入所需的HTML標籤，例如這個範例中的 <tr> 與 <td> 標籤，而為了方便整合資料與網頁標籤，甚至能夠利用HTML Helper 動態建立標籤，HTML Helper 是 MVC 提供的 HtmlHelper 類別 ，用來協助開發人員產生各種HTML標籤內容。現在以 Products.cshtml 其中的取得item 資料的Razor程式碼為例：
@Html.DisplayFor(modelItem => item.ItemId)
緊接著 @ 後方的 Html 會取得一個 HtmlHelper 類別物件，它提供了大量的方法支援檢視的建立，DisplayFor() 即為其中一個方法成員，它會回傳小括弧裏運算式的結果文字內容，因此如果開啟這個檢視所產生的網頁原始碼內容，你會看到每筆資料欄位被逐一取出，結合<td>以表格型式呈現，部份內容如下：
<table class="table">
<tr>
<th> <span>編號</span></th>
<th><span>品項名稱</span></th>
<th><span>價格</span></th>
<th><span>說明</span></th>
<th></th>
</tr>
<tr>
<td>1001</td>
<td>LINQ 精要 </td>
<td>550</td>
<td>LINQ 入門語法到各種擴充功能討論</td>
</tr>
…
</table>
這裏僅是單純的取出運算式的內容文字將其呈現出來，後續我們會看到更多的設計討論。
ViewBag資料字典
前一個小節討論Razor語法時，我們看到了引用 ViewBag 屬性的程式片段如下：
ViewBag.Title = "Products";
ViewBag 是一種資料字典屬性，可以同時在控制器與檢視中進行存取，因為這個特性，當我們需要在檢視與控制器中進行資料溝通時，即可透過ViewBag來完成。現在於HelloController控制器中建立一個動作方法 CompanyInfo() 並且配置以下的內容：
public ActionResult CompanyInfo()
{
ViewBag.CompanyName = "康廷數位" ;
ViewBag.CDescription1 = "HTML5 與 ASP.NET MVC 教育訓練與技術圖書出版";
ViewBag.CDescription2 = "網站平台開發設計";
return View();
}
其中建立了三個自訂的清單值：CompanyName、CDescription1與CDescription2，儲存網站名稱與相關資訊，最後回傳檢視檔案。針對此動作方法新增檢視CompanyInfo.cshtml，並且於其中撰寫如下的內容：
@{
ViewBag.Title = "CompanyInfo";
}
<h1>@ViewBag.CompanyName</h1>
<div>
<P>@ViewBag.CDescription1</P>
<p>@ViewBag.CDescription2</p>
</div>
其中包含三行以@開始的Razor程式片段，分別引用動作方法中設定的ViewBag屬性值，並且將其呈現於畫面中，檢視結果如下：
當然你也可以在檢視檔案中設定ViewBag，就如同每個新的檢視建立時預設會有以下的Razor 程式碼：
@{
ViewBag.Title = "CompanyInfo";
}
在預設的情形下，ViewBag.Title用來表示網頁的標題，這一行將其設定為檢視的名稱，你可以自行修改，而完成ViewBag設定，其它檢視亦能取得此屬性值，關於ViewBag.Title的細節，後續討論預設樣板時會有進一步的說明。
ViewBag 進一步包裝 ViewData 以簡化資料的存取設定，更正式的，你可以利用 ViewData 完成相同的資料存取操作，上述的範例修改如下：
ViewData["CompanyName"] = "康廷數位";
ViewData["CDescription1"] = " HTML5 與 ASP.NET MVC 教育訓練與技術圖書出版";
ViewData["CDescription2"] = "ViewData-網站平台開發設計";
在檢視中，可以透過ViewData 進一步作存取如下：
<h1>@ViewData["CompanyName"]</h1>
<div>
<p>@ViewData["CDescription1"]</p>
<p>@ViewData["CDescription2"]</p>
</div>
於瀏覽器檢視會得到相同的結果，讀者可以進一步自行測試，ViewData與ViewBag設定的資料可以相互存取，因此你可以根據自已的需求，任意使用ViewData或是ViewBag進行操作。
沒有留言:
張貼留言