原文連結：http://www.asp.net/learn/mvc/tutorial-04-cs.aspx
這篇教程的目的是為你提供一個對ASP.NET MVC視圖、視圖資料和HTML Helpers的簡短介紹。讀完本文之後，你應該能夠理解如何建立新的視圖、將資料從控制器傳遞給視圖，並且使用HTML Helper在視圖中產生內容。
1. 理解視圖ASP.NET MVC與ASP.NET或者動態伺服器頁（ASP）不同，它並沒有任何直接對應於一個頁面的東西。在ASP.NET MVC應用程式中，磁碟上並沒有一個頁面來對應你在瀏覽器地址欄中輸入的URL路徑。在ASP.NET MVC應用程式中，最接近頁面的東西是稱為視圖（View）的東西。
在ASP.NET MVC應用程式中，即將到達的瀏覽器請求被映射到了控制器動作。一個控制器動作可能會返回一個視圖。然而，一個控制器動作可能執行某種類型的操作，例如將你重新導向到另一個控制器動作。
代碼清單1含有一個簡單的控制器，叫做HomeController。HomeController暴露出了兩個控制器動作，叫做Index()和Details()。
代碼清單1 - HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApp.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Details()
{
return RedirectToAction("Index");
}
}
}
你可以通過在瀏覽器的地址欄輸入下面的URL，調用第一個動作，Index()動作：
/Home/Index
你可以通過在瀏覽器中輸入這個地址，來調用第二個動作，Details()動作：
/Home/Details
Index()動作返回一個視圖。你所建立的大多數動作都將返回一個視圖，然而，動作可以返回任何類型的動作結果。例如，Details()動作返回了一個RedirectToActionResult，它可以將即將到達的請求重新導向到Index()動作。
Index()動作包含了下面一行代碼：
return View();
這行的代碼返回了一個視圖，該視圖在伺服器上的路徑必須和下面的路徑一樣：
"Views"Home"Index.aspx
視圖的路徑由控制器和控制器動作的名稱推斷得出。
如果你願意，可以顯式地指明視圖。下面一行代碼返回了一個視圖，名為“Fred”：
return View("Fred");
當執行這行代碼時，將會從下面的路徑返回一個視圖：
"Views"Home"Fred.aspx
2.建立一個視圖你可以在解決方案瀏覽器中的檔案夾上點擊右鍵，並且選擇功能表項目“Add（添加）”、“New Item（建立項）”（1）。選擇“MVC View Page”模板將標準視圖添加到你的項目中。
圖1 - 添加一個新的視圖到項目中
應該意識到你不能像ASP.NET或者ASP應用程式中那樣，隨意向項目中添加視圖。你必須將視圖添加到檔案夾中，並且該檔案夾的名稱與控制器的名稱相同（不含Controller尾碼）。舉個例子，如果你想建立一個新的、叫做Index的視圖，該視圖可以由名為ProductController的控制器返回，那麼你必須添加這個視圖到項目的如下檔案夾中：
"Views"Product"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" >
<head 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()方法，Microsoft為你提供了一種調用Response.Write()的簡單途徑。代碼清單3中的視圖使用<%=和%>作為調用Response.Write()方法的簡單途徑。
代碼清單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" >
<head runat="server">
<title>Index2</title>
</head>
<body>
<div>
The current date and time is:
<%=DateTime.Now%>
</div>
</body>
</html>
你可以使用任何的.NET語言在視圖中產生動態內容，可以使用Visual Basic.Net或者C#來編寫你的控制器和視圖。
4.使用HTML Helpers來產生視圖內容為了使向視圖中新增內容更加容易一些，你可以利用叫做HTML Helper的東西。HTML Helper是一個產生字串的方法。你可以使用HTML Helpers來產生標準的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>Login Form</title>
</head>
<body>
<div>
<form method="post" action="/Home/Login">
<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" />
</form>
</div>
</body>
</html>
圖2 - 一個標準的登入表單
所有的HTML Helpers方法都在視圖的Html屬性上調用。舉個例子，你可以通過調用Html.TextBox()方法來呈現（render）一個文字框。
注意，當你在調用HTML Helper時，必須使用指令碼分隔字元<%=和%>。HTML Helper僅僅是返回一個字串。你需要調用Response.Write()來將字串呈現到瀏覽器中。
使用HTML Helper方法是可選的。它們通過減少你編寫的HTML和Script數量來使開發更為簡單。代碼清單5中的視圖呈現了與代碼清單4中完全相同的表單，但是沒有使用HTML Helpers。
代碼清單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>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 Helpers。據個例子，你可以建立一個GridView() Helper方法，它自動地在一個HTML表格中顯示一系列的資料庫記錄。我們將在建立自訂HTML Helpers這篇教程中探討這一話題。
5. 使用ViewData屬性將資料傳遞給視圖你可以使用視圖的另一個屬性，ViewData屬性，將資料從控制器傳遞給視圖。例如，代碼清單6中的控制器向ViewData添加了一條訊息。
代碼清單6 - ProductController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApp.Controllers
{
public class ProductController : Controller
{
public ActionResult Details()
{
ViewData["message"] = "Hello World!";
return View();
}
}
}
控制器的ViewData屬性代表著一個成對的名稱和數值的集合。在代碼清單6中，Details()方法向ViewData集合中添加了一個名為message的項，其值為“Hello World！”。當視圖由Details()方法返回時，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" >
<head runat="server">
<title>Product Details</title>
</head>
<body>
<div>
<%=Html.Encode(ViewData["message"])%>
</div>
</body>
</html>
注意到當呈現訊息時，視圖利用了Html.Encode() Helper方法。Html.Encode() HTML Helper方法將例如“<”和“>”這樣的特殊字元編碼為在web頁面中能夠安全顯示的字元。無論何時呈現使用者提交到網站的內容時，你都應該對內容進行編碼，以避免JavaScript注入攻擊。
（因為我們自己在ProductController中建立了訊息，所以並不是真的需要對訊息進行編碼。然而，當在視圖中顯示擷取自ViewData中的內容時，總是調用Html.Encode()是一個很好的習慣。）
在代碼清單7中，我們利用了ViewData來將一個簡單的字串訊息從控制器傳遞到了視圖。你也可以使用ViewData將其他類型的資料從控制器傳遞到視圖，例如一個資料庫記錄集合。舉個例子，如果你想要在視圖中顯示Products資料庫表的內容，那麼你可以將資料庫記錄的集合儲存在ViewData中進行傳遞。
你也可以從控制器向視圖傳遞強型別View Data。我們將在教程“理解強型別View Data和視圖”中探討這個話題。
6. 總結這篇教程提供了對ASP.NET MVC視圖、視圖資料（View Data）和HTML Helpers的一個簡短的介紹。在第一部分，你學習了如何向項目中添加新的視圖。你學習了必須將視圖添加到正確的檔案夾中，以使它能夠被特定的控制器調用。接下來，我們討論了HTML Helpers這一主題。你學習了HTML Helpers是如何輕鬆地產生標準的HTML內容的。最後，你學習了如何利用ViewData將資料從控制器傳遞給視圖 。
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
