將檢視新增至 MVC 應用程式

作者: Rick Anderson

注意

本教學課程的更新版本 可在這裡 使用最新版本的 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 檔案,然後選取 [在瀏覽器中檢視]。

Pi

您也可以以滑鼠右鍵按一下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」,並將控制器從 變更 HomeMovies 。 完整的版面配置檔案如下所示:

<!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 動作方法會採用 namenumTimes 參數,然後將值直接輸出至瀏覽器。 我們將控制器變更為使用檢視範本,而不是讓控制器將此回應轉譯為字串。 檢視範本會產生動態回應,這表示您需要將適當數量的資料從控制器傳遞至檢視,以便產生回應。 您可以讓控制器將動態資料放在檢視範本可以存取的物件中 ViewBag) 檢視範本所需的動態資料 (參數來執行此動作。

返回HelloWorldController.cs檔案,並變更 Welcome 方法以將 和 NumTimes 值新增 MessageViewBag 物件。 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",但不是資料庫類型。 讓我們運用所學的內容,建立電影的資料庫。