詳細介紹ASP.NET MVC--視圖-C#.Net教程-PHP中文網

瞭解視圖

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」範本將標準視圖新增到你的專案中。 01 (1).png

應該要意識到你不能像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>

登入後複製

詳細介紹ASP.NET MVC--視圖

所有的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開發微信自訂選單編輯工具的程式碼範例

以上是詳細介紹ASP.NET MVC--視圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！