此教程向你提供 ASP.NET MVC 視圖簡介, 視圖資料, 和 HTML Helpers。教程最後，你應該會理解如何建立新視圖，從控制器傳遞資料到視圖，和使用 use HTML Helpers 在視圖中產生內容。
理解視圖不像 ASP.NET 或者ASP, ASP.NET MVC 並不包括任何直接對應頁面的東西。 在 ASP.NET MVC 應用程式中，硬碟上並不存在與你輸入瀏覽器地址欄中的URL對應的頁面。在ASP.NET MVC應用程式中與頁面最接近的東西是稱為視圖的東西。
ASP.NET MVC 應用程式, 傳入的瀏覽器請求被映射到控制器 actions。控制器 action 可能返回一個視圖。然而，控制器可能執行其他類型的action，比如將你重新導向到另一個控制器 action。
代碼1 包含一個簡單的名為 HomeController的控制器。 HomeController 暴露了2個控制器 actions 名為 Index() 和 Details()。
代碼1 – HomeController.cs
using System.Web.Mvc;namespace MvcApplication1.Controllers{ [HandleError] public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Details() { return RedirectToAction("Index"); } }}
你可以在瀏覽器地址欄中輸入以下URL來調用第一個action, Index() action：
/Home/Index
你可以在瀏覽器地址欄輸入這個來調用第二個action, Details() action：
/Home/Details
Index() action 返回一個視圖。大多數你建立的action都是返回視圖的。然而，一個action可以返回其他類型的 action result。例如， Details() action 返回一個 RedirectToActionResult ，它將傳入的請求重新導向到 Index() action。
Index() action 只有簡單的一行代碼：
View();
這行代碼返回一個必須位於你的web伺服器以下路徑的視圖：
/Views/Home/Index.aspx
該路徑的視圖由控制器名稱和控制器action名稱來推斷。
如果你願意，你可以顯式指定視圖名稱。下面這行代碼返回一個名為"Fred"的視圖：
View(“Fred”);
當這行代碼被執行時，視圖從以下路徑返回：
/Views/Home/Fred.aspx
如果你要為你的ASP.NET MVC程式建立單元測試那麼顯式指定視圖名稱是一個好主意。那樣，你可以建立單元測試來驗證預期的視圖是否由一個控制器action返回。
向視圖新增內容視圖是一個可以包含指令碼的標準的 (X)HTML 文檔。使用指令碼來向視圖添加動態內容。
例如，代碼2的視圖顯示了當前日期與時間。
代碼 2 – /Views/Home/Index.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!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 id="Head1" runat="server"> <title>Index</title></head><body> <div> The current date and time is <% Response.Write(DateTime.Now);%> </div></body></html>
注意代碼2 中的HTML頁面的body包含了以下指令碼：
<% Response.Write(DateTime.Now);%>
使用指令碼限定符 <% 和 %> 來標示指令碼的開始與結束。這個指令碼是用C#寫的。通過調用Response.Write()方法顯示當前日期與時間在瀏覽器上。 指令碼限定符 <% 和 %> 可以用來執行一到多個語句。
既然使用 Response.Write() 如此頻繁, 微軟提供一個調用Response.Write()方法的捷徑。代碼 3 中的視圖使用限定符 <%= 和 %> 作為調用Response.Write()的捷徑。
代碼 3 – Views/Home/Index2.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!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 id="Head1" runat="server"> <title>Index</title></head><body> <div> The current date and time is <%=DateTime.Now %> </div></body></html>
你可以使用任何 .NET 語言在視圖中產生動態內容。通常，使用 Visual Basic .NET 或者 C# 來寫你的控制器和視圖。
使用 HTML Helpers 來產生視圖內容要更簡單地為視圖新增內容，可以利用稱為 HTML Helper 的東西。 HTML Helper, 通常是一個產生字串的方法。可以使用 HTML Helper 產生標準 HTML 元素諸如輸入框，超連結，下拉框和列表框。
例如，代碼4中的視圖利用了3個 HTML Helper -- BeginForm(), TextBox() 和Password() helper -- 來產生一個登入表單 (見圖1).
代碼4 -- /Views/Home/Login.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!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 id="Head1" runat="server"> <title>Login Form</title></head><body> <div> <% using (Html.BeginForm()) { %> <label for="UserName">User Name:</label> <br /> <%= Html.TextBox("UserName") %> <br /><br /> <label for="Password">Password:</label> <br /> <%= Html.Password("Password") %> <br /><br /> <input type="submit" value="Log in" /> <% } %> </div></body></html>
圖01: 一個標準的登入表單(點擊查看完整大小)
所有的 HTML Helper 方法都是由視圖的Html屬性來調用的。例如，調用Html.TextBox()方法呈現一個TextBox。
注意當調用 Html.TextBox() 和 Html.Password() helper時要使用指令碼限定符 <%= 和 %> 。這些 helper 僅僅返回一個字串。你需要調用 Response.Write() 以呈現字串到瀏覽器。
使用 HTML Helper 方法是可選的。它們使你的生活更簡單，因為減少了你需要寫的HTML和指令碼數量。代碼5中的視圖呈現了與代碼4中一樣的表單，但是沒有使用 HTML Helper。
代碼5 -- /Views/Home/Login.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 id="Head1" runat="server"> <title>Login Form without Help</title></head><body> <div> <form method="post" action="/Home/Login"> <label for="userName">User Name:</label> <br /> <input name="userName" /> <br /><br /> <label for="password">Password:</label> <br /> <input name="password" type="password" /> <br /><br /> <input type="submit" value="Log In" /> </form> </div></body></html>
你還可以建立自己的 HTML Helper。例如，你可以建立一個 GridView() helper 方法在一個HTML 表格裡自動顯示一組資料庫記錄。我將在教程《建立自訂 HTML Helpers》中探討這個話題。
使用視圖資料向視圖傳送資料使用視圖資料從控制器傳送資料到視圖。將視圖資料想象成通過郵件發送的包。所有從控制器傳送到視圖的資料必須使用這個包來發送。例如，代碼6中的控制器向視圖資料添加一個資訊。
代碼6 – ProductController.cs
using System.Web.Mvc;namespace MvcApplication1.Controllers{ public class ProductController : Controller { public ActionResult Index() { ViewData["message"] = "Hello World!"; return View(); } }}
控制器的 ViewData 屬性工作表示一個索引值對集合。在代碼 6, Index() 方法向視圖資料集合添加一個名為message的項，值為 “Hello World!”。當視圖由Index()方法返回時，視圖資料自動傳送到視圖中。
代碼7中的視圖從視圖資料中取得message並將message呈現到瀏覽器。
代碼7 -- /Views/Product/Index.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %><!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 id="Head1" runat="server"> <title>Product Index</title></head><body> <div> <%= Html.Encode(ViewData["message"]) %> </div></body></html>
注意當呈現message時，視圖利用了HTML Helper 方法 。 Html.Encode() 將特殊字元例如 < 和 > 編碼為可以在網頁安全顯示的字元。當你要呈現使用者提交到網站的內容時，應該將內容進行編碼以防止 JavaScript 注入攻擊。
(由於我們自己在ProductController裡建立了資訊，我們不必對資訊進行編碼。然而，在從視圖資料中取得顯示內容時，經常調用Html.Encode()方法是一個好的習慣。)
在代碼 7中, 我們利用了視圖資料來從控制器傳遞一個簡單的字串資訊到視圖。你還可以使用視圖資料來傳送其他類型的資料，諸如一個從控制器到視圖的資料庫記錄集合。例如，如果你要在視圖中顯示Products資料庫表中的內容，那麼你可以在視圖資料中傳遞這個資料庫記錄集合。
你還可以從控制器傳遞強型別的視圖資料到視圖。我們將在《理解強型別視圖資料和視圖》教程中探討這個話題。
總結這篇教程提供了ASP.NET MVC 視圖，視圖資料和 HTML Helper的簡介。在第一節，你學到了如何添加一個新的視圖到你的工程中。你學到了必須在正確的檔案夾下添加視圖以從特定控制器中調用。接下來，我們討論了HTML Helper的話題。你學到了HTML Helper如何讓你簡單地產生標準HTML內容。 最後，你學到了如何利用視圖資料來從控制器傳遞資料到視圖中。
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
