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

發行項
07/13/2023

什麼是 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 內容。最後，您已瞭解如何利用檢視資料，將資料從控制器傳遞至檢視。

下一步

共用方式為