ASP.NET MVC 檢視概觀 (VB)

發行項
09/27/2024

什麼是 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.vb

<HandleError()> _
Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index()
        Return View()
    End Function

    Function Details()
        Return RedirectToAction("Index")
    End Function
End Class

您可以在瀏覽器網址列中輸入下列 URL，以叫用第一個動作，也就是 Index() 動作：

/Home/Index

您可以在瀏覽器中輸入此位址，以叫用第二個動作，也就是 Details() 動作：

/Home/Details

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

Index() 動作包含下列單行程式碼：

View()

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

\Views\Home\Index.aspx

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

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

View( Fred )

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

\Views\Home\Fred.aspx

注意

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

將內容新增至檢視

檢視是可能包含指令碼的標準 (X)HTML 文件。您可以使用指令碼將動態內容新增至檢視。

例如，清單 2 中的檢視會顯示目前的日期和時間。

清單 2 - \Views\Home\Index.aspx

<%@ Page Language="VB" 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)%>

您可以使用指令碼分隔符 <% 和 %> 來標記指令碼的開頭和結尾。此指令碼是以 Visual Basic 撰寫。此指令碼會呼叫 Response.Write() 方法來將內容轉譯至瀏覽器，以顯示目前的日期和時間。指令碼分隔符 <% 和 %> 可用來執行一或多個陳述式。

由於您經常呼叫 Response.Write()，因此 Microsoft 提供呼叫 Response.Write() 方法的捷徑。清單 3 中的檢視會使用分隔符 <%= 和 %> 做為呼叫 Response.Write() 的捷徑。

清單 3 - Views\Home\Index2.aspx

<%@ Page Language="VB" 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="VB" 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" />        
    
    <% End Using%>

    </div>
</body>
</html>

$[New Project] $新增專案$ 對話方塊$

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

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

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

您可以選擇是否使用 HTML 協助程式方法。如此可減少您需要撰寫的 HTML 和指令碼量，讓您工作時更加輕鬆。清單 5 中的檢視不使用 HTML 協助程式，就會呈現與清單 4 中檢視完全相同的表單。

清單 5 -- \Views\Home\Login.aspx

<%@ Page Language="VB" 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>
        
    <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.vb

Public Class ProductController
    Inherits System.Web.Mvc.Controller

    Function Index()
        ViewData("message") = "Hello World!"
        Return View()
    End Function

End Class

控制器 ViewData 屬性代表名稱/值組的集合。在清單 6 中，Index() 方法會將項目新增至具有 Hello World 值的檢視資料收集具名訊息。當 Index() 方法傳回檢視時，檢視資料會自動傳遞至檢視。

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

清單 7 -- \Views\Product\Index.aspx

<%@ Page Language="VB" 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 中，我們利用檢視資料，將簡單的字串訊息從控制器傳遞至檢視。您也可以使用檢視資料，將資料庫記錄集合等其他類型的資料從控制器傳遞至檢視。例如，如果您想要在檢視中顯示產品資料庫表格的內容，則會在檢視資料中傳遞資料庫記錄的集合。

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

摘要

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

上一個下一個

共用方式為

ASP.NET MVC 檢視概觀 (VB)

瞭解檢視

將內容新增至檢視

使用 HTML 協助程式產生檢視內容

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

摘要

意見反應

其他資源