理解視圖
ASP.NET MVC與ASP.NET或者動態伺服器頁（ASP）不同，它並沒有任何直接對應於一個頁面的東西。在ASP.NET MVC應用程式中，磁碟上並沒有一個頁面來對應你在瀏覽器地址欄中輸入的URL路徑。在ASP.NET MVC應用程式中，最接近頁面的東西是稱為視圖（View）的東西。
在ASP.NET MVC應用程式中，即將到達的瀏覽器請求被映射到了控制器動作。一個控制器動作可能會返回一個視圖。然而，一個控制器動作可能執行某種類型的操作，例如將你重新導向到另一個控制器動作。
代碼清單1含有一個簡單的控制器，叫做HomeController.HomeController暴露出了兩個控制器動作，叫做指數（）和詳細資料（）。
代碼清單1 - HomeController.cs使用系統; 使用 System.Collections.Generic; 使用 System.Linq; 使用 System.Web; 使用 System.Web.Mvc; 命名空間 MvcApp.Controllers{ [HandleError] public class HomeController：Controller { public ActionResult Index（） { return View（）; } public ActionResult Details（） { return RedirectToAction（ “Index”）; } }}
你可以通過在瀏覽器的地址欄輸入下面的URL，調用第一個動作，指數（）動作：
/首頁/索引
你可以通過在瀏覽器中輸入這個地址，來調用第二個動作，細節（）動作：
/首頁/細節
指數（）動作返回一個視圖。你所建立的大多數動作都將返回一個視圖，然而，動作可以返回任何類型的動作結果。例如，詳細資料（）動作返回了一個RedirectToActionResult，它可以將即將到達的請求重新導向到指數（）動作。
指數（）動作包含了下面一行代碼：
return View（）;
這行的代碼返回了一個視圖，該視圖在伺服器上的路徑必須和下面的路徑一樣：
\查看\首頁\的Index.aspx
視圖的路徑由控制器和控制器動作的名稱推斷得出。
如果你願意，可以顯式地指明視圖下面一行代碼返回了一個視圖，名為“弗雷德”：
返回視圖（“Fred”）;
當執行這行代碼時，將會從下面的路徑返回一個視圖：
\查看\首頁\ Fred.aspx
2.建立一個視圖
你可以在解決方案瀏覽器中的檔案夾上點擊右鍵，並選擇功能表項目“Add（添加）”，“建立項目”（1）。選擇“MVC View Page”模板將標準視圖添加到你的項目中。
應該意識到你不能像ASP.NET或者ASP應用程式中那樣，隨意向項目中添加視圖。你必須將視圖添加到檔案夾中，並且該檔案夾的名稱與控制器的名稱相同（不含控制器尾碼）舉個例子，如果你想建立一個新的，叫做索引的視圖，該視圖可以由名為ProductController的的控制器返回，那麼你必須添加這個視圖到項目的如下檔案夾中：
\查看\產品\ Index.aspx的
含有視圖的檔案夾的名稱必須與返回該視圖的控制器的名稱相對應。
3.向視圖中新增內容
一個視圖是一個標準的，可以包含指令碼的（X）HTML文檔。你使用指令碼來向視圖中添加動態內容。
舉個例子，代碼清單2中的視圖顯示了當前的日期和時間。
代碼清單2 - \ Views \ Home \ Index.aspx
<％@ Page Language =“C＃”AutoEventWireup =“true”CodeBehind =“Index.aspx.cs”Inherits =“MvcApp.Views.Home.Index”％> <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns =”http://www.w3.org/1999/xhtml“> <頭RUNAT = “伺服器”> <TITLE>索引</ TITLE> </ HEAD> <BODY> <DIV> 的當前日期和時間是： <％回複於（DateTime.Now）;％> </ DIV> </ body> </ html>
注意到代碼清單2中的HTML頁面的身體中含有下面的指令碼：
<％Response.Write（DateTime.Now）;％>
使用指令碼分隔字元<％和％>來標記指令碼的開始和結束。這個指令碼使用C＃編寫。它顯示了當前的日期和時間，通過調用回複於（）方法將內容呈現到了瀏覽器中指令碼。分隔字元<％和％>可以用於執行一條或者多條語句。
因為經常會調用回複於（）方法，微軟為你提供了一種調用回複於（）的簡單途徑。代碼清單3中的視圖使用<％=和％>作為調用回複於（）方法的簡單途徑。
代碼清單3 - Views \ Home \ Index2.aspx
<％@ Page Language =“C＃”AutoEventWireup =“true”CodeBehind =“Index2.aspx.cs”Inherits =“MvcApp.Views.Home.Index2”％> <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns =”http://www.w3.org/1999/xhtml“> <頭RUNAT = “伺服器”> <TITLE>索引2 </ TITLE> </ HEAD> <BODY> <DIV> 的當前日期和時間是： <％= DateTime.Now％> </ DIV> </ BODY> < / HTML>
你可以使用任何的.NET語言在視圖中產生動態內容，可以使用Visual Basic.Net或者C＃來編寫你的控制器和視圖。
4.使用HTML Helpers來產生視圖內容
為了使向視圖中新增內容更加容易一些，你可以利用叫做HTML Helper的東西.HTML Helper是一個產生字串的方法。你可以使用HTML協助者來產生標準的HTML元素，例如文字框，連結，下拉框和列表框。
舉個例子，代碼清單4中的視圖利用了兩個HTML Helpers，TextBox（）和Password（），用於產生一個登入表單（見圖2）。
代碼清單4 - \ Views \ Home \ Index3.aspx
<％@ Page Language =“C＃”AutoEventWireup =“true”CodeBehind =“Index3.aspx.cs”Inherits =“MvcApp.Views.Home.Index3”％> <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns =”http://www.w3.org/1999/xhtml“> <head runat =“server”> <title>登入表單</ title> </ head> <body> <p> <form method =“post”action =“/ Home / Login”> <label for =“userName” >使用者名稱：</ label> <br /> <％= Html.TextBox（“userName”）％> <br /> <br /> <label for =“password”>密碼：</ label> <br /> <％= Html.Password（“password” ％> <br /> <br /> <input type =“submit”value =“登入”/> </ form> </ p> </ body> </ html><br /> <％= Html.Password（ “密碼”）％> <br /> <br /> <INPUT TYPE = “提交”值= “登入”/> </ FORM> </ DIV> </ body> </ html><br /> <％= Html.Password（ “密碼”）％> <br /> <br /> <INPUT TYPE = “提交”值= “登入”/> </ FORM> </ DIV> </ body> </ html>
所有的HTML協助者方法都在視圖的Html屬性上調。舉個例子，你可以通過調用Html.TextBox（）方法來呈現（render）一個文字框。
注意，當你在調用HTML Helper時，必須使用指令碼分隔字元<％=和％>。HTML Helper只是返回一個字串你需要調用Response.Write（）來將字串呈現到瀏覽器中。
使用HTML協助方法是可選的。它們通過減少你編寫的HTML和指令碼數量來使開發更為簡單。代碼清單5中的視圖呈現了與代碼清單4中完全相同的表單，但是沒有使用HTML助手。
代碼清單5 - \ Views \ Home \ Index4.aspx
<％@ Page Language =“C＃”AutoEventWireup =“true”CodeBehind =“Index4.aspx.cs”Inherits =“MvcApp.Views.Home.Index4”％> <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns =”http://www.w3.org/1999/xhtml“> <head runat =“server”> <title>沒有協助的登入表單</ title> </ head> <body> <p> <form method =“post”action =“/ Home / Login”> <label for = userName“>使用者名稱：</ label> <br /> <輸入名稱= “userName的”/> <br /> <br /> </標籤>：密碼<用於= “密碼”的標籤> <br /> <輸入名稱= “密碼”類型= “密碼”/> < br /> <br /> <input type =“submit”value =“登入”/> </ form> </ p> </ body> </ html></標籤> <br /> <輸入名稱= “密碼”類型= “密碼”/> <br /> <br /> <INPUT TYPE = “提交”值= “登入”/> </ FORM> < / p> </ body> </ html></標籤> <br /> <輸入名稱= “密碼”類型= “密碼”/> <br /> <br /> <INPUT TYPE = “提交”值= “登入”/> </ FORM> < / p> </ body> </ html>/ body> </ html>/ body> </ html>
你可以建立自己的HTML協助者。據個例子，你可以建立一個GridView（）Helper方法，它自動地在一個HTML表格中顯示一系列的資料庫記錄。我們將在建立自訂HTML協助者這篇教程中探討這一話題。
5.使用ViewData屬性將資料傳遞給視圖
你可以使用視圖的另一個屬性，ViewData的屬性，將資料從控制器傳遞給視圖。例如，代碼清單6中的控制器向ViewData的添加了一條訊息。
代碼清單6 - ProductController.cs
使用系統; 使用System.Collections.Generic; 使用System.Linq; 使用System.Web; 使用System.Web.Mvc; namespace MvcApp.Controllers { public class ProductController：Controller { public ActionResult Details（） { ViewData [“message”] =“Hello World！”; return View（）; } } }
控制器的ViewData屬性代表著一個成對的名稱和數值的集合。在代碼清單6中，詳細（）方法向ViewData集合中添加了一個名為訊息的項，其值為“Hello World！”當視圖由詳情（）方法返回時，ViewData的將會自動傳遞給視圖。
代碼清單7中的視圖從ViewData的中擷取了訊息，並且將訊息呈現到了瀏覽器中。
代碼清單7 - \ Views \ Product \ Details.aspx
<％@ Page Language =“C＃”AutoEventWireup =“true”CodeBehind =“Details.aspx.cs”Inherits =“MvcApp.Views.Product.Details”％> <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns =”http://www.w3.org/1999/xhtml“> <頭RUNAT = “伺服器”> <TITLE>產品詳細資料</ TITLE> </ HEAD> <BODY> <DIV> <％=了Html.Encode（電腦[ “訊息”]）％> </ DIV> </ BODY > </ html>
注意到當前呈現訊息時，視圖利用了Html.Encode（）Helper方法.Html.Encode（）HTML Helper方法將例如“<”和“>”這樣的特殊字元編碼為在網頁面中能夠安全顯示的字元。無論何時呈現使用者提交到網站的內容時，你都應該對內容進行編碼，以避免的JavaScript注入攻擊。
（因為我們自己在ProductController的中建立了訊息，所以並不是真的需要對訊息進行編碼。然而，當在視圖中顯示擷取自的ViewData中的內容時，總是調用了Html.Encode（）是一個很好的習慣。）
在代碼清單7中，我們利用了的ViewData來將一個簡單的字串訊息從控制器傳遞到了視圖。你也可以使用的ViewData將其他類型的資料從控制器傳遞到視圖，例如一個資料庫記錄集合。舉個例子，如果你想要在視圖中顯示產品資料庫表的內容，那麼你可以將資料庫記錄的集合儲存在ViewData的中進行傳遞。
你也可以從控制器向視圖傳遞強型別查看資料。我們將在教程“理解強型別查看資料和視圖”中探討這個話題。
總結
這篇教程提供了對ASP.NET MVC視圖，視圖資料（查看資料）和HTML協助者的一個簡短的介紹。在第一部分，你學習了如何向項目中添加新的視圖你學習了必須將視圖添加到正確的檔案夾中，以使其能夠被特定的控制器調用。接下來，我們討論了HTML協助者這一主題。你學習了HTML協助者是如何輕鬆地產生標準的HTML內容的最後，你學習了如何利用ViewData將資料從控制器傳遞給視圖。
【相關推薦】
1. 什麼是ASP.NET MVC ？總結ASP.NET MVC
2. 詳細介紹ASP.NET MVC--控制器（controller）
3. 深入瞭解ASP.NET MVC與WebForm的區別
4. 詳細介紹ASP.NET MVC--路由
5. 通過asp.net mvc開發自訂菜單編輯工具的程式碼範例
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
