ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視

阿新 • • 發佈：2019-01-13

ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視

本節將修改HelloWorldController類，從而使用Razor檢視模板來乾淨利索地封裝產生一個HTML迴應給客戶端的過程。

我們將使用Razor建立一個檢視模板,基於Razor的檢視模板有一個.cshtml副檔名，並能使用C#提供優美簡練的方式建立HTML輸出。

當前，控制器類中的Index方法返回一個硬編輯的訊息字串，在HelloWorldController類，用以下程式碼代替Index方法。

public IActionResult Index()

{

return View();

}

如上的Index方法返回一個View物件，它使用檢視模板生成HTML迴應給瀏覽器，控制器方法（或如所知的行為方法），諸如上面的Index方法，通常返回一個IActionResult（或一個繼承於IActionResult的類）物件，而非單純的像字串的文字。

右擊Views資料夾，然後是Add > New Folder，命名這個資料夾為HelloWorld。

右擊 Views/HelloWorld 資料夾,然後是 Add > New Item。

在 Add New Item - MvcMovie 對話方塊內

在右上角的搜尋框內，輸入view

點選 MVC View Page

在 Name

框內，如有必要，改變其命名為Index.cshtml.

點選 Add

將Razor檢視檔案Views/HelloWorld/Index.cshtml的內容替換為以下程式碼：

@{

ViewData["Title"] ="Index";

}

<h2>Index</h2>

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

導航到http://localhost:xxxx/HelloWorld，HelloWorldController中的Index方法沒有做太多的工作，它只是簡單的運行了return View()語句，該語句說明了該方法應使用一個檢視模板給瀏覽器渲染一個迴應。由於沒有顯示地指定要使用的檢視模板的名稱，MVC預設地使用/Views/HelloWorld 資料夾內的Index.cshtml檢視檔案，下圖顯示了在檢視中被硬編碼的字串“Hello from our View Template!”。

如果你的瀏覽器視窗較小（比如在移動裝置上），你可能需要切換（點選）右上方的Bootstrap導航鈕來才能看到Home, About, 和Contact 連結。

1 改變檢視和佈局頁

點選菜單鏈接（MvcMovie, Home,About），每個頁面都顯示同樣的選單佈局，該選單佈局是在Views/Shared/_Layout.cshtml檔案中實現的，開啟Views/Shared
/_Layout.cshtml檔案。

佈局模板允許在一個地方指定網站的HTML容器佈局並可跨多網頁在網站中應用它。在Views/Shared/_Layout.cshtml檔案中找到@RenderBody()行，RenderBody是一個佔位符，所有你建立的且包含在佈局頁面之內的具體檢視都顯示在該佔位符所在的位置，比如，如果你選擇About連結，則Views/Home/About.cshtml檢視的內容被被渲染在RenderBody方法內。

2 在佈局檔案中改變標題和菜單鏈接。

改變標題元素的內容，在Views/Shared/_Layout.cshtml檔案中,改變第七行,將錨文字修改為“Movie App”，再改變第三十一行,將控制器由Home改為Movies,存檔,修改後的程式碼如下所示：

@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
    @Html.Raw(JavaScriptSnippet.FullScript)
</head>
<body>
    <nav 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="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Movies" asp-action="Index" class="navbar-brand">MvcMovie</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - MvcMovie</p>
        </footer>
    </div>

    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)
</body>
</html>

注意

我們還沒有實現Movies控制器，所以如果單擊該連結，將會得到一個404（未發現)錯誤。

儲存改變並點選About連結，注意瀏覽器標籤上的顯示的標題如何由About - Mvc Movie變為About - Movie App，點選Contact連結，可發現標題仍顯示為Movie App。我們一旦在佈局模板中作了改變，這個網站的所有頁都對映新的連結文字和新的標題。

檢查Views/_ViewStart.cshtml 檔案:

@{

Layout = "_Layout";

}

Views/_ViewStart.cshtml 檔案將Views/Shared/_Layout.cshtml 檔案的內容引入到每個檢視中。你可使用該佈局屬性來設定一個不同的佈局檢視，或將它設為空值而不使用佈局檔案。

3 改變Index檢視的標題

開啟Views/HelloWorld/Index.cshtml檔案，對兩個地方進行修改：

出現在瀏覽器的標題的文字

二級標頭（<h2>元素）

對它們作一些少量的修改，這樣你能理解改變的是應用的哪個部分哪些程式碼。

@{

ViewData["Title"] = "Movie List";

}

<h2>MyMovie List</h2>

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

上面程式碼中的ViewData["Title"]= "Movie List"; 將ViewData字典的標題屬性設定為"Movie List"。該標題屬性在佈局頁中用於<title> HTML元素:

<title>@ViewData["Title"] - Movie App</title>

存檔並導航到http://localhost:xxxx/HelloWorld.注意瀏覽器標題、一級標頭、二級標頭已經變了。（如果在瀏覽器中沒有看到改變，可能你看到的是快取中的內容，在你的瀏覽器中按Ctrl+F5以強制來自伺服器的迴應被載入。）瀏覽器標題的由我們在Index.cshtml檢視模板中設定的ViewData["Title"]和在佈局檔案中增加的附加內容"-Movie App"組合而成。

同時注意Index.cshtml 檢視模板中的內容如何與Views/Shared/_Layout.cshtml 檢視模板合併，單一的HTML 迴應如何傳送給瀏覽器。佈局模板使在應用中所有頁面上施加改變變得非常簡單。更多見Layout.

我們僅有的一點“資料”（本例中的“Hello from our View Template!”訊息）是硬編碼的，儘管這個MVC應用有了一個“V”（檢視）和一個“C”（控制），但仍然還沒有“M”（模型）。

4 從控制器傳遞資料到檢視

在迴應輸入的URL請求中，控制器行為被呼叫，控制器類是編寫處理進來的瀏覽器請求的程式碼的地方，控制器從資料來源取回資料並決定向瀏覽器發回什麼型別的迴應，檢視模板可被從控制器使用以生成和格式化HTML迴應給瀏覽器。

控制器負責為檢視模板渲染迴應提供需要的資料。最好的做法是，檢視模板不去執行業務邏輯，並且不直接讀寫資料庫，相反，檢視模板應該只與被控制器提供給它的資料一起工作，保持這種“關係分離”可使程式碼更乾淨且易於測試、易於維護。

現在，HelloWorldController 類中的Welcome 方法獲取了name和ID引數並直接輸出其值給瀏覽器。與其讓控制器以字串渲染迴應，不如改變控制器，用一個檢視模板代替字串，檢視模板將產生動態的迴應，這意味著為了產生迴應，需要從控制器傳遞適當的資料位元給檢視，這可以通過讓控制將檢視模板需要的動態資料（引數）放在檢視模板可以訪問的ViewData字典中來實現。

回到HelloWorldController.cs檔案，改變Welcome方法，給ViewData字典增加Message和NumTimes值，ViewData字典是一個動態的物件，你可以將任何你想放入的東西放入其中。在ViewData物件中放東西之前，ViewData物件中沒有任何定義好的屬性，MVC模型繫結系統自動將被命名的引數從位址列中的查詢字串對映到方法的引數中，完成的HelloWorldController.cs看起來像這樣：

using Microsoft.AspNetCore.Mvc;

using System.Text.Encodings.Web;

namespaceMvcMovie.Controllers

{

public classHelloWorldController :Controller

{

public IActionResult Index()

{

return View();

}

public IActionResult Welcome(string name, int numTimes = 1)

{

ViewData["Message"] = "Hello " + name;

ViewData["NumTimes"] = numTimes;

return View();

}

ViewData字典物件包含了可被傳遞給檢視的資料。

建立一個命名為Views/HelloWorld/Welcome.cshtml. 的檢視模板。

你將在Welcome.cshtml中建立一個顯示“Hello” NumTimes的迴圈，用下面的內容替換Views/HelloWorld/Welcome.cshtml檔案的內容：

@{

ViewData["Title"] ="Welcome";

}

<h2>Welcome</h2>

<ul>

@for (int i = 0; i < (int)ViewData["NumTimes"]; i++)

{

<li>@ViewData["Message"]</li>

}

</ul>

儲存改變並瀏覽下面的URL：

http://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4

MVC模型繫結系統從URL中取得資料並傳遞給控制器，控制器將資料打包到ViewData字典中並其傳遞給檢視，檢視接著以HTML方式渲染資料到瀏覽器。

在上面的這個範例中，我們使用了ViewData

從控制器傳遞資料給檢視，後面的教程中，我們將使用檢視模型從控制器中傳遞資料到檢視中，使用檢視模型的方法的傳遞資料通常比使用ViewData字典的方法更值得優先選擇。

原文連結

ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視

ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視

1 改變檢視和佈局頁

2 在佈局檔案中改變標題和菜單鏈接。

3 改變Index檢視的標題

4 從控制器傳遞資料到檢視

ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視

ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視

ASP.NET Core MVC 和 Visual Studio入門（四）新增模型

ASP.NET Core MVC 和 Visual Studio入門（五）使用 SQL Server LocalDB

ASP.NETCore MVC 和 Visual Studio入門（二）新增控制器

ASP.NET Core 中文文件第二章指南（4.1）ASP.NET Core MVC 與 Visual Studio 入門

.NET Core Mvc和MySql初接觸（三）log4Net全域性異常日誌

使用 ASP.NET Core MVC 創建 Web API（三）

asp.net core mcroservices 架構之分散式日誌（三）：整合kafka

用ASP.NET Core MVC 和 EF Core 構建Web應用（二）

用ASP.NET Core MVC 和 EF Core 構建Web應用（九）

用ASP.NET Core MVC 和 EF Core 構建Web應用（十）

ASP.NET Core MVC 和 Entity Framework Core 連線mysql （二）

ASP.NET Core MVC 和 Entity Framework Core 連線mysql（一）

ASP.NET Core 入門教程 7、ASP.NET Core MVC 分部視圖入門

ASP.NET Core 一步步搭建個人網站（7）_Linux系統移植

Asp.Net Core 2.0 項目實戰（6）Redis配置、封裝幫助類RedisHelper及使用實例

Asp.Net Core 2.0 項目實戰（2）NCMVC一個基於Net Core2.0搭建的角色權限管理開發框架

ASP.NET Core 應用程式Startup類介紹（轉載）

asp.net core mcroservices 機構之分散式日誌（一）

ASP.NET Core MVC 和 Visual Studio入門（三） 新增檢視

ASP.NET Core MVC 和 Visual Studio入門（三） 新增檢視

1 改變檢視和佈局頁

2 在佈局檔案中改變標題和菜單鏈接。

3 改變Index檢視的標題

4 從控制器傳遞資料到檢視

相關推薦

ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視

ASP.NET Core MVC 和 Visual Studio入門（三）新增檢視