新增檢視 - 如何使用檢視範本檔案乾淨地封裝產生傳回給用戶端的 HTML 回應

發行項
09/30/2024

這是一個初學者教學課程，介紹 ASP.NET MVC 的基礎知識。您將建立一個從資料庫讀取和寫入的簡單 Web 應用程式。造訪 ASP.NET MVC 學習中心以尋找其他 ASP.NET MVC 教學課程和範例。

在本節中，我們將了解如何讓 HelloWorldController 類別使用檢視範本檔案來乾淨地封裝產生傳回給用戶端的 HTML 回應。

讓我們先使用具有 Index 方法的檢視範本。我們的方法稱為 Index，它位於 HelloWorldController 中。目前，我們的 Index() 方法傳回一個字串，其中包含在 Controller 類別中硬編碼的訊息。

public string Index()
{
    return "<html><body>This is my default action...</body></html>";
}

現在讓我們將 Index 方法更改為如下所示：

public ActionResult Index()
{
   return View(); 
}

現在讓我們在專案中新增一個可用於 Index() 方法的檢視範本。為此，請用滑鼠右鍵點擊 Index 方法中間的某處，然後按一下「新增檢視…」

這將開啟「新增檢視」對話框，它為我們提供了一些選項，用於幫助我們建立可供我們的 Index 方法使用的檢視範本。現在，不要更改任何內容，只需點擊「新增」按鈕即可。

點擊「新增」後，解決方案資料夾中將出現一個新資料夾和一個新文件，如下所示。我現在在 Views 下有一個 HelloWorld 資料夾，並在該資料夾內有一個 Index.aspx 檔案。

新的索引檔案也已開啟並可供編輯。在第一個 <h2>Index</h2> 下方加入一些文本，例如「Hello World」。

<h2>Index</h2>
Hello world!

運行您的應用程式並在瀏覽器中再次訪問 http://localhost:xx/HelloWorld。本例中控制器中的 Index 方法沒有執行任何操作，但呼叫了「return View()」，這表示我們想要使用檢視範本檔案將回應呈現給用戶端。由於我們沒有明確指定要使用的檢視範本檔案的名稱，因此 ASP.NET MVC 預設使用 \Views\HelloWorld 資料夾中的 Index.aspx 檢視檔案。現在我們看到我們在檢視中硬編碼的字串。

看起來不錯。但是，請注意瀏覽器的標題為「Index」，頁面上的大標題為「My MVC Application」。讓我們改變那些。

變更檢視和母版頁

首先，讓我們更改文字「My MVC Application」。該文字被共享並出現在每個頁面上。它實際上只出現在我們程式碼中的一個位置，即使它出現在我們應用程式的每個頁面上。前往解決方案資源管理器中的 /Views/Shared 資料夾並開啟 Site.Master 檔案。該文件稱為母版頁，它是我們所有其他頁面使用的共享「外殼」。

請注意此文件中的一些文字顯示 ContentPlaceholder「MainContent」。

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

此佔位符是您建立的所有頁面將顯示的位置，「包裝」在母版頁中。嘗試更改標題，然後運行您的應用程式並訪問多個頁面。您會注意到您的一項變更出現在多個頁面上。

<div id="title">
    <h1>My MVC Movie Application</h1>
</div>

現在，每個頁面都將具有「我的 MVC 電影應用程式」的主標題 - 即 H1。它處理頂部的白色文本，該文本在所有頁面之間共用。

這是 Site.Master 的完整內容，標題已更改：

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Movie Application</h1>
            </div>
             
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
           
            <div id="menucontainer">
           
                <ul id="menu">             
                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%: Html.ActionLink("About", "About", "Home")%></li>
                </ul>
           
            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

現在，讓我們更改索引頁面的標題。

開啟/HelloWorld/Index.aspx。有兩個地方要改。首先是出現在瀏覽器標題中的標題，然後是輔助標頭 (即 H2)。我將使它們略有不同，以便您可以看到哪個程式碼更改了應用程式的哪一部分。

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Movie List
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>My Movie List</h2>
    Hello World!

</asp:Content>

運行您的應用程式並訪問 /Movies。請注意，瀏覽器標題、主標題和次標題已變更。只需對檢視進行微小更改，即可輕鬆對應用程式進行重大更改。

不過，我們的一點「資料」(在本例中為「Hello World！」訊息) 是硬編碼的。我們已經有了 V (檢視) 和 C (控制器)，但還沒有 M (模型)。我們很快就會介紹如何建立資料庫並從中檢索模型資料。

傳遞檢視模型

不過，在我們討論資料庫並討論模型之前，我們先討論一下「ViewModel」。這些物件表示檢視範本將 HTML 回應呈現回用戶端所需的內容。它們通常由控制器類別建立並傳遞給檢視範本，並且應該只包含檢視範本所需的資料，僅此而已。

在先前的 HelloWorld 範例中，Welcome() 操作方法會採用名稱和 numTimes 參數並將其輸出到瀏覽器。我們不讓控制器繼續直接渲染此回應，而是建立一個小類別來保存該資料，然後將其傳遞給檢視範本以使用它渲染回 HTML 回應。這樣，控制器專注於一件事，而檢視範本關注另一件事——使我們能夠在應用程式中保持乾淨的「關注點分離」。

返回 HelloWorldController.cs 檔案並新增新的“WelcomeViewModel”類別並更改控制器內的 Welcome 方法。這是完整的 HelloWorldController.cs，新類別位於相同檔案中。

using System.Web.Mvc;

namespace Movies.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            var viewModel = new WelcomeViewModel
            {
                Message = "Hello " + name,
                NumTimes = numTimes
            };

            return View(viewModel);
        }

        public class WelcomeViewModel
        {
            public string Message { get; set; }
            public int NumTimes { get; set; }
        }
    }
}

儘管它有多行，但我們的 Welcome 方法實際上只有兩個程式碼語句。第一條語句將我們的兩個參數打包到 ViewModel 物件中，第二個語句將結果物件傳遞到檢視上。

現在我們需要一個歡迎檢視範本！右鍵點擊歡迎方法並選擇新增檢視。這次，我們將選取「建立強類型檢視」並從下拉清單中選擇我們的 WelcomeViewModel 類別。這個新檢視將只知道 WelcomeViewModels，而不知道其他類型的物件。

注意：新增 WelcomeViewModel 後，您需要編譯一次才能顯示在下拉清單中。

您的「新增檢視」對話方塊應如下所示。按一下 [新增] 按鈕。新增檢視圈出

將此程式碼加入新的 Welcome.aspx 中的 <h2> 下。我們將進行一個循環，並根據用戶的要求多次說 Hello！

<% for(int i=0;i<Model.NumTimes;i++) { %>
       <%h3><%: Model.Message %></h3>
<% } %>

另外，請注意，當您輸入時，因為我們告訴此檢視有關WelcomeViewModel (他們已經結婚了，還記得嗎？)，每次我們引用模型物件時，我們都會得到有用的智慧感知，如下面的螢幕擷取畫面所示：

運行您的應用程式並再次訪問 http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4。現在我們從 URL 獲取資料，它會自動傳遞到我們的控制器中，我們的控制器將資料打包到 ViewModel 中，並將該物件傳遞到我們的檢視中。檢視會將資料以 HTML 形式顯示給使用者。

嗯，這是一種「M」，代表模型，但不是資料庫類型。讓我們利用所學來建立一個 Movies 資料庫。

上一個下一個

共用方式為

新增檢視 - 如何使用檢視範本檔案乾淨地封裝產生傳回給用戶端的 HTML 回應

變更檢視和母版頁

傳遞檢視模型

意見反應

其他資源