ASP.NET MVC 檢視概觀 (C#)

作者:Stephen Walther

什麼是 ASP.NET MVC 檢視,以及它與 HTML 頁面有何不同? 在本教學課程中,Stephen Walther 將介紹檢視,並示範如何利用檢視內檢視資料和 HTML 協助程式。

本教學課程的目的是提供您 ASP.NET MVC 檢視、檢視資料和 HTML 協助程式的簡短簡介。 在本教學課程結束時,您應該瞭解如何建立新的檢視、將資料從控制器傳遞至檢視,以及使用 HTML 協助程式在檢視中產生內容。

了解檢視

對於 ASP.NET 或 Active Server Pages,ASP.NET MVC 不包含直接對應至頁面的任何專案。 在 ASP.NET MVC 應用程式中,磁片上沒有對應至您輸入瀏覽器網址列中之 URL 路徑的頁面。 與 ASP.NET MVC 應用程式中頁面最接近的是稱為 檢視的內容。

在 ASP.NET MVC 應用程式中,傳入的瀏覽器要求會對應至控制器動作。 控制器動作可能會傳回檢視。 不過,控制器動作可能會執行一些其他類型的動作,例如將您重新導向至另一個控制器動作。

清單 1 包含名為 HomeController 的簡單控制器。 HomeController 會公開名為 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,叫用第一個動作 Index () 巨集指令:

/Home/Index

您可以在瀏覽器中輸入此位址,以叫用第二個動作 Details () 巨集指令:

/Home/Details

Index () 巨集指令會傳回檢視。 您建立的大部分動作都會傳回檢視。 不過,動作可以傳回其他類型的動作結果。 例如,Details () 巨集指令會傳回 RedirectToActionResult,以將傳入要求重新導向至 Index () 動作。

Index () 巨集指令包含下列單行程式碼:

View () ;

這行程式碼會傳回必須位於網頁伺服器上的下列路徑的檢視:

\Views\Home\Index.aspx

檢視的路徑會從控制器的名稱和控制器動作的名稱推斷。

如果您想要的話,可以明確說明檢視。 下列程式程式碼會傳回名為 Fred 的檢視:

檢視 ( Fred ) ;

執行這一行程式碼時,會從下列路徑傳回檢視:

\Views\Home\Fred.aspx

注意

如果您打算為 ASP.NET MVC 應用程式建立單元測試,最好明確說明檢視名稱。 如此一來,您可以建立單元測試,以確認控制器動作已傳回預期的檢視。

將內容新增至檢視

檢視是可以包含腳本的標準 (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 頁面的本文包含下列腳本:

<% Response.Write (DateTime.Now) ;%>

您可以使用腳本分隔符號 < % 和 % > 來標記腳本的開頭和結尾。 此腳本是以 C# 撰寫。 它會呼叫 Response.Write () 方法來將內容轉譯至瀏覽器,以顯示目前的日期和時間。 腳本分隔符號 < % 和 % > 可用來執行一或多個語句。

由於您經常呼叫 Response.Write () ,因此 Microsoft 會提供呼叫 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 協助程式產生檢視內容

若要更輕鬆地將內容新增至檢視,您可以利用稱為 HTML 協助程式的內容。 HTML 協助程式通常是產生字串的方法。 您可以使用 HTML 協助程式來產生標準 HTML 元素,例如文字方塊、連結、下拉式清單和清單方塊。

例如,清單 4 中的檢視利用三個 HTML 協助程式 -- BeginForm () 、TextBox () 和 Password () 協助程式 -- 產生登入表單 (請參閱圖 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>

[New Project] \(新增專案\) 對話方塊

圖 01:標準登入表單 (按一下以檢視完整大小的影像)

所有 HTML 協助程式方法都會在檢視的 Html 屬性上呼叫。 例如,您可以呼叫 Html.TextBox () 方法來轉譯 TextBox。

請注意,呼叫 Html.TextBox () 和 Html.Password () 協助程式時,您會使用腳本分隔符號 < %= 和 % > 。 這些協助程式只會傳回字串。 您必須呼叫 Response.Write () ,才能將字串轉譯至瀏覽器。

使用 HTML 協助程式方法是選擇性的。 它們可藉由減少您需要撰寫的 HTML 和腳本數量,讓您的生活更容易。 清單 5 中的檢視會呈現與清單 4 中檢視完全相同的表單,而不使用 HTML 協助程式。

清單 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 協助程式。 例如,您可以建立 GridView () 協助程式方法,自動在 HTML 資料表中顯示一組資料庫記錄。 我們會在 建立自訂 HTML 協助程式教學課程中探索本主題。

使用檢視資料將資料傳遞至檢視

您可以使用檢視資料,將資料從控制器傳遞至檢視。 請將檢視資料視為您透過郵件傳送的套件。 從控制器傳遞至檢視的所有資料都必須使用此套件傳送。 例如,清單 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 () 方法會將專案新增至檢視資料收集的具名訊息,值為 Hello World!。 當 Index () 方法傳回檢視時,檢視資料會自動傳遞至檢視。

清單 7 中的檢視會從檢視資料擷取訊息,並將訊息轉譯至瀏覽器。

清單 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>

請注意,檢視會在轉譯訊息時利用 Html.Encode () HTML 協助程式方法。 Html.Encode () HTML 協助程式會將特殊字元編碼,例如 < 和 > 編碼為安全顯示在網頁中的字元。 每當轉譯使用者提交至網站的內容時,您應該編碼內容以防止 JavaScript 插入式攻擊。

(因為我們是在 ProductController 中自行建立訊息,所以我們不需要編碼訊息。 不過,在檢視內檢視資料中顯示從檢視資料擷取的內容時,一律呼叫 Html.Encode () 方法是很好的習慣。)

在清單 7 中,我們利用檢視資料,將簡單的字串訊息從控制器傳遞至檢視。 您也可以使用檢視資料,將其他類型的資料從控制器傳遞至檢視,例如資料庫記錄的集合。 例如,如果您想要在檢視中顯示 Products 資料庫資料表的內容,則您會在檢視資料中傳遞資料庫記錄的集合。

您也可以選擇將強型別檢視資料從控制器傳遞至檢視。 我們會在 瞭解強型別檢視資料和檢視教學課程中探索本主題。

總結

本教學課程提供 ASP.NET MVC 檢視、檢視資料和 HTML 協助程式簡介。 在第一節中,您已瞭解如何將新檢視新增至專案。 您已瞭解您必須將檢視新增至右側資料夾,才能從特定控制器呼叫它。 接下來,我們已討論 HTML 協助程式的主題。 您已瞭解 HTML 協助程式如何讓您輕鬆地產生標準 HTML 內容。 最後,您已瞭解如何利用檢視資料,將資料從控制器傳遞至檢視。