將檢視新增至 MVC 應用程式

發行項
07/13/2023

注意

本教學課程的更新版本可在這裡使用最新版本的 Visual Studio。新的教學課程會使用ASP.NET Core MVC，這可針對本教學課程提供許多改善。

本教學課程可讓您了解 ASP.NET Core MVC 與控制器和檢視。 Razor Pages 是 ASP.NET Core 的新替代方案，這是頁面型程式設計模型，可讓建置 Web UI 變得更簡單且更具生產力。建議您在嘗試使用 MVC 版本之前，先試試 Razor 頁面教學課程。 Razor 頁面教學課程：

比較容易學習。
涵蓋更多功能。
這是新應用程式開發的慣用方法。

在本節中， HelloWorldController 您會修改類別，以使用檢視範本檔案，將產生 HTML 回應的程式完全封裝至用戶端。

您將使用 Razor 檢視引擎建立檢視範本檔案。以 Razor 為基礎的檢視範本具有 .cshtml 副檔名，並提供使用 C# 建立 HTML 輸出的簡潔方式。 Razor 可將撰寫檢視範本時所需的字元和擊鍵數目降到最低，並啟用快速流暢的編碼工作流程。

目前，Index 方法會傳回字串，內含在控制器類別中硬式編碼的訊息。 Index變更方法以呼叫控制器View方法，如下列程式碼所示：

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

上述 Index 方法會使用檢視範本來產生瀏覽器的 HTML 回應。控制器方法 (也稱為動作方法) ，例如 Index 上述方法，通常會傳回 ActionResult (或衍生自 ActionResult) 的類別，而不是字串之類的基本類型。

以滑鼠右鍵按一下 Views\HelloWorld 資料夾，然後按一下 [ 新增]，然後按一下 [MVC 5 檢視頁面與版面配置] (Razor) 。

顯示方案總管視窗的螢幕擷取畫面。Hello World以滑鼠右鍵按一下功能表，[新增] 子功能表隨即開啟，並已選取 [M V C 5 檢視頁面與版面配置 Razor]。

在 [ 指定專案的名稱 ] 對話方塊中，輸入 [索引]，然後按一下 [ 確定]。

顯示 [指定專案名稱] 對話方塊的螢幕擷取畫面。索引位於 [專案名稱] 欄位中。

在 [ 選取版面配置頁面 ] 對話方塊中，接受預設 的 _Layout.cshtml ，然後按一下 [ 確定]。

顯示 [選取版面配置頁面] 的螢幕擷取畫面。[共用] 子資料夾已開啟，且已選取 [版面配置] 點 c s h t m l。

在上述對話方塊中，會在左窗格中選取 Views\Shared 資料夾。如果您在另一個資料夾中有自訂版面配置檔案，則可以加以選取。我們稍後會在教學課程中討論版面配置檔案

系統會建立 MvcMovie\Views\HelloWorld\Index.cshtml檔案。

顯示方案總管視窗的螢幕擷取畫面。[檢視] 資料夾和Hello World子資料夾已開啟。

新增下列醒目提示標記。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

以滑鼠右鍵按一下 Index.cshtml 檔案，然後選取 [在瀏覽器中檢視]。

您也可以以滑鼠右鍵按一下Index.cshtml檔案，然後選取[檢視Page Inspector]。如需詳細資訊，請參閱Page Inspector教學課程。

或者，執行應用程式並流覽至 HelloWorld 控制器 (http://localhost:xxxx/HelloWorld) 。控制器 Index 中的方法沒有太多作用;它只會執行語句 return View() ，指定方法應該使用檢視範本檔案來轉譯瀏覽器的回應。由於您未明確指定要使用的檢視範本檔案名，ASP.NET MVC 預設為使用\Views\HelloWorld資料夾中的Index.cshtml檢視檔案。下圖顯示字串「Hello from our View Template！」硬式編碼在檢視中。

顯示 [索引] 頁面和 [檢視範本] 文字 Hello 的螢幕擷取畫面。

看起來不錯。不過，請注意，瀏覽器的標題列會顯示「索引 - 我的 ASP.NET 應用程式」，而頁面頂端的大型連結會顯示「應用程式名稱」。視您建立瀏覽器視窗的大小而定，您可能需要按一下右上方的三個橫條，以查看 [ 首頁]、[ 關於]、[ 連絡人]、[ 註冊 ] 和 [ 登入 ] 連結的。

變更檢視和版面配置頁面

首先，您想要變更頁面頂端的 [應用程式名稱] 連結。該文字是每個頁面通用的。它實際上只會在專案中的一個位置實作，即使它出現在應用程式中的每個頁面上也一樣。移至方案總管中的/Views/Shared資料夾，然後開啟_Layout.cshtml檔案。此檔案稱為版面 配置頁面 ，且位於所有其他頁面使用的共用資料夾中。

_LayoutCshtml

版面配置範本可讓您在某個位置指定網站的 HTML 容器配置，然後將它套用到網站中的多個頁面。找到 @RenderBody() 這行。 RenderBody 是預留位置，其中您建立的所有檢視特定頁面都會顯示在版面配置頁面中「包裝」。例如，如果您選取 [ 關於 ] 連結， Views\Home\About.cshtml 檢視會在方法內 RenderBody 轉譯。

變更標題元素的內容。將版面配置範本中的 ActionLink 從 [應用程式名稱] 變更為「MVC Movie」，並將控制器從變更 Home 為 Movies 。完整的版面配置檔案如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

執行應用程式，並注意它現在會顯示「MVC 電影」。按一下 [ 關於 ] 連結，您也會看到該頁面如何顯示「MVC 電影」。我們可以在版面配置範本中變更一次，並讓網站上的所有頁面反映新的標題。

顯示 [M V C 電影關於] 頁面的螢幕擷取畫面。

當我們第一次建立 Views\HelloWorld\Index.cshtml 檔案時，它包含下列程式碼：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

上述 Razor 程式碼會明確設定版面配置頁面。檢查 Views\_ViewStart.cshtml 檔案，其中包含完全相同的 Razor 標記。 Views\_ViewStart.cshtml檔案會定義所有檢視將使用的通用配置，因此您可以從Views\HelloWorld\Index.cshtml檔案中批註化或移除該程式碼。

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

您可以使用 Layout 屬性來設定不同的版面配置檢視，或將它設定為 null，因此不會使用任何版面配置檔案。

現在，讓我們變更 [索引] 檢視的標題。

開啟 MvcMovie\Views\HelloWorld\Index.cshtml。有兩個位置可進行變更：首先，出現在瀏覽器標題中的文字，然後在次要標頭中 (<h2> 元素) 。您會使這些變更略有不同，因此可看出哪一段程式碼變更了應用程式的哪個部分。

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

為了指出要顯示的 HTML 標題，上述程式碼會設定 Title 物件 (的屬性 ViewBag ，該物件位於 Index.cshtml 檢視範本) 中。請注意， ( Views\Shared\_Layout.cshtml ) 版面配置範本會在元素中使用 <title> 此值作為我們先前修改之 HTML 區段的一部分 <head> 。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

使用此方法 ViewBag ，您可以輕鬆地在檢視範本與版面配置檔案之間傳遞其他參數。

執行應用程式。請注意，瀏覽器標題、主要標題和次要標題已變更 (如果您沒有在瀏覽器中看到變更，您可能會檢視快取的內容。在瀏覽器中按 Ctrl+F5 以強制載入伺服器的回應。) 瀏覽器標題是使用 ViewBag.Title 我們在 Index.cshtml 檢視範本中設定的，以及配置檔案中新增的額外「- Movie App」。

另請注意 Index.cshtml 檢視範本中的內容如何與 _Layout.cshtml 檢視範本合併，並將單一 HTML 回應傳送至瀏覽器。版面配置範本可讓您輕鬆進行會套用到應用程式之所有頁面的變更。

顯示 [M V C 電影我的電影清單] 頁面的螢幕擷取畫面。

不過，我們的一些「資料」 (，在此情況下，「檢視範本中的 Hello」訊息) 是硬式編碼的。 MVC 應用程式具有 "V" (檢視)，並已取得 "C" (控制器)，但還沒有 "M" (模型)。不久後，我們將逐步解說如何建立資料庫，並從中擷取模型資料。

將資料從控制器傳遞至檢視

不過，在移至資料庫並討論模型之前，讓我們先討論如何將資訊從控制器傳遞至檢視。控制器類別會叫用以回應傳入 URL 要求。控制器類別是您撰寫程式碼來處理傳入瀏覽器要求、從資料庫擷取資料，最後決定要傳回給瀏覽器的回應類型。然後，您可以從控制器使用檢視範本來產生 HTML 回應並格式化瀏覽器。

控制器負責提供所需的任何資料或物件，才能讓檢視範本轉譯對瀏覽器的回應。最佳做法： 檢視範本絕對不應該執行商務邏輯或直接與資料庫互動。相反地，檢視範本只能與控制器提供給它的資料搭配使用。維護此「考慮區隔」有助於讓您的程式碼保持簡潔、可測試且更容易維護。

目前， Welcome 類別中的 HelloWorldController 動作方法會採用 name 和 numTimes 參數，然後將值直接輸出至瀏覽器。我們將控制器變更為使用檢視範本，而不是讓控制器將此回應轉譯為字串。檢視範本會產生動態回應，這表示您需要將適當數量的資料從控制器傳遞至檢視，以便產生回應。您可以讓控制器將動態資料放在檢視範本可以存取的物件中 ViewBag) 檢視範本所需的動態資料 (參數來執行此動作。

返回HelloWorldController.cs檔案，並變更 Welcome 方法以將和 NumTimes 值新增 Message 至 ViewBag 物件。 ViewBag 是動態物件，這表示您可以將您想要的任何專案放入其中; ViewBag 除非您將某個專案放在其中，否則物件沒有定義的屬性。 ASP.NET MVC 模型系結系統會自動將具名參數 (name ，並從 numTimes 網址列中的查詢字串) 對應至方法中的參數。完整的 HelloWorldController.cs 檔案如下所示：

using System.Web;
using System.Web.Mvc;

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

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

現在物件 ViewBag 包含會自動傳遞至檢視的資料。接下來，您需要歡迎檢視範本！在 [ 建置] 功能表中，選取 [ 建置方案 ] (或 Ctrl+Shift+B) 以確定專案已編譯。以滑鼠右鍵按一下 Views\HelloWorld 資料夾，然後按一下 [ 新增]，然後按一下 [具有版面配置 (Razor) 的 MVC 5 檢視頁面 。

顯示 [方案總管] 視窗的螢幕擷取畫面。Hello World以滑鼠右鍵按一下功能表並開啟 [新增子功能表]。已選取具有版面配置 Razor 的 M V C 5 檢視頁面。

在 [ 指定專案的名稱 ] 對話方塊中，輸入 [歡迎]，然後按一下 [ 確定]。

在 [ 選取版面配置頁面 ] 對話方塊中，接受預設 的 _Layout.cshtml ，然後按一下 [ 確定]。

顯示 [選取版面配置頁面] 的螢幕擷取畫面。標示為 [共用] 的子資料夾已開啟，並選取 [配置點 c s h t m l]。

系統會建立 MvcMovie\Views\HelloWorld\Welcome.cshtml檔案。

取代 Welcome.cshtml 檔案中的標記。您將建立一個迴圈，指出「Hello」的次數與使用者應該一樣多。完整的 Welcome.cshtml 檔案如下所示。

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

執行應用程式並流覽至下列 URL：

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

現在資料取自 URL，並使用模型系結器傳遞至控制器。控制器會將資料封裝至 ViewBag 物件，並將該物件傳遞至檢視。然後檢視會將資料顯示為 HTML 給使用者。

顯示 M V C 影片歡迎頁面的螢幕擷取畫面。

在上述範例中，我們使用 ViewBag 物件將資料從控制器傳遞至檢視。稍後在教學課程中，我們將使用檢視模型將控制器中的資料傳遞至檢視。傳遞資料的檢視模型方法通常比檢視包方法更慣用。如需詳細資訊，請參閱部落格文章動態 V 強型別檢視。

這是一種代表模型的 "M"，但不是資料庫類型。讓我們運用所學的內容，建立電影的資料庫。

上一個下一個

共用方式為

將檢視新增至 MVC 應用程式

變更檢視和版面配置頁面

將資料從控制器傳遞至檢視

意見反應

意見反應

其他資源