ASP.NET Core 中文文檔 第二章 指南（4.3）添加 View

来源:http://www.cnblogs.com/dotNETCoreSG/archive/2016/06/15/aspnetcore-2_4_3-adding-view.html
-Advertisement-
Play Games

五月中旬 .NET Core RC2 如期發佈，我們遂決定翻譯 ASP.NET Core 文檔。我們在何鎮汐先生、悲夢先生、張仁建先生和雷歐納德先生的群中發佈了翻譯計劃招募信息，並召集到一群小伙伴。我們從六月開始翻譯文檔，目前已完成前兩章，並將按計劃以連載的方式逐篇公佈。當翻譯計劃完成後，所有文檔將... ...


原文：Adding a view
作者：Rick Anderson
翻譯：魏美娟(初見)
校對：趙亮(悲夢)、高嵩(Jack)、婁宇(Lyrics)、許登洋(Seay)、姚阿勇（Dr.Yao）

本節將修改 HelloWorldController 類，把使用 Razor 視圖模板文件為客戶端生成 HTML 響應的過程乾凈利落地封裝起來。

您可以使用 Razor 視圖引擎創建一個視圖模板。基於 Razor 的視圖模板的文件使用 .cshtml 作為其擴展名，並用 C# 優雅地輸出 HTML。用 Razor 編寫視圖模板能減少字元的個數和敲擊鍵盤的次數，並使工作流程快速靈活。

目前，控制器類中的 Index 方法返回的是一串硬編碼的字元串。按下麵的代碼所示，修改 Index 方法使其返回視圖對象：

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

上例中 Index 方法用一個視圖模板生成 HTML 響應給瀏覽器。控制器方法（也稱為 action 方法)，比如上面的 Index 方法，通常返回 IActionResult （或者派生自 ActionResult 的類），而不是字元串那樣的基元類型。

  • 右擊 Views （視圖）文件夾，選擇 Add > New Folder （添加 > 新建文件夾），然後將文件夾命名為 HelloWorld.

  • 右鍵點擊 Views/HelloWorld （視圖/Helloworld）文件夾，選擇 Add > New Item (添加->新建項)

  • 在 Add New Item - MvcMovie （添加新建項 - MvcMovie）對話框中：

  • 在右上方的搜索框中輸入關鍵詞 view

  • 點擊 MVC View Page （MVC 視圖頁）

  • 在 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 navigation button才能看到 Home、 About、 Contact、 Register 和 Log in 這些鏈接。

改變視圖和佈局頁

點擊菜單鏈接（MvcMovie、Home 和 About）。每個頁面都顯示相同的菜單佈局。菜單佈局在 Views/Shared/_Layout.cshtml 文件中實現。打開 Views/Shared/_Layout.cshtml 文件。

Layout 模板允許你在一處指定網站的 HTML 容器佈局，然後在網站下的多個頁面中使用。找到 @RenderBody() 那行。 RenderBody 是一個占位符，是你所有指定視圖的顯示位置，“包裹在”佈局頁內。例如，點擊 About 鏈接， Views/Home/About.cshtml 視圖就會在 RenderBody 方法內渲染。

改變標題元素的內容。在佈局模板中將錨（即 A 標簽，譯者註）文本改成“MVC Movie”，控制器將 Home 改成 Movies ，如下列高亮顯示的：

<!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.6/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>
</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="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-controller="Movies" asp-action="Index" class="navbar-brand">Mvc Movie</a>  <!--手動高亮-->
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-controller="Home" asp-action="About">About</a></li>
                    <li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
                @await Html.PartialAsync("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2016 - 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">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/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">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

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

警告
我們尚未實現 Movies 控制器，故若你點擊該鏈接，將會得到 404 錯誤（文件未找到）。

保存，點擊 About 鏈接。註意每個頁面怎樣顯示 Mvc Movie 鏈接。只在佈局模板中改變一次，網站中的所有頁面都顯示新的鏈接和新的標題。

查看一下 Views/_ViewStart.cshtml 文件：

@{
    Layout = "_Layout";
}

Views/_ViewStart.cshtml 文件將 Views/Shared/_Layout.cshtml 文件引入每個視圖中。可以利用 Layout 屬性設置不同的佈局視圖，或者將其設置成 null 這樣就不會使用佈局視圖了。

現在，讓我們改變 Index 視圖的標題。

打開 Views/HelloWorld/Index.cshtml 。這裡有2個地方需要改變：

  • 出現在瀏覽器上的標題文本
  • 二級標題 (<h2> 元素).

你可以一點點改，這樣就可以看到哪些代碼改變了應用程式的哪些地方。

@{
    ViewData["Title"] = "Movie List";  //手動高亮
}

<h2>My Movie List</h2>  <!--手動高亮-->

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

在以上代碼中 ViewData["Title"] = "Movie List"; 將 ViewDataDictionary 的 Title 屬性設置為 "Movie List"。Title 屬性被用在佈局頁的 <title> Html元素中：

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

保存並刷新頁面。註意瀏覽器標題、主標題和副標題都變化了（如果你沒看到變化，可能因為緩存的緣故，在瀏覽器中按下 Ctrl+F5 強制刷新）。瀏覽器標題由我們設置在 Index.cshtml 視圖模板中的 ViewData["Title"] 以及位於佈局頁的 "- Movie App" 組合構成。

同時註意，Index.cshtml 視圖模板的內容是怎樣和 Views/Shared/_Layout.cshtml 視圖模板合併的，和一個HTML響應是怎樣被髮送到瀏覽器的。佈局模板非常易於進行作用於應用程式中所有頁面的修改。瞭解更多請參考 : Layout。

不過，我們的這點“數據”（本例中的消息 "Hello from our View Template!"）還是硬編碼的。MVC 應用程式里已經有了個“V”（View），我們也已經創建了一個“C”（Controller），但現在還沒有“M”（Model）。接下來我們將快速展示如何創建資料庫並從中搜索模型數據。

從控制器傳遞數據到視圖

在談到資料庫和模型之前，讓我們先討論從控制器傳遞信息到視圖。控制器類在響應傳入的 URL 請求時被調用。控制器類是編寫代碼處理傳入的瀏覽器請求，從資料庫中檢索數據，並最終決定發送什麼類型的響應返回給瀏覽器的地方。然後可以在控制器中使用視圖模板生成和格式化 HTML 來響應給瀏覽器。

控制器負責提供所需要的任何數據或者對象，以便視圖模板向瀏覽器呈現響應。最佳實踐：視圖模板不應該執行業務邏輯或者直接與資料庫進行交互，而應該只使用控制器提供給它的數據。保持這種 “關註點分離” 有助於保持你的代碼整潔，可測試以及更易於維護。

目前，HelloWorldController 類中的 Welcome 方法接受一個 name 和一個 ID 參數，然後直接將值輸出到瀏覽器。讓我們更改控制器來使用視圖模板，而不是讓控制器使用字元串呈現這個響應。視圖模板將生成一個動態響應，這就意味著需要通過控制器傳遞恰當的數據給視圖以生成響應。要做到這一點，可以讓控制器將視圖模板所需的動態數據（參數）放在視圖模版隨後可以訪問的 ViewData 字典中。

回到 HelloWorldController.cs 文件，在 Welcome 方法中添加一個 Message 和 NumTimes 的值到 ViewData 字典中。 ViewData 字典是個動態對象，這意味著可以把任何你想要的數據添加進去。在你往裡面添加東西之前，ViewData 對象沒有已定義的屬性。MVC 模型綁定系統自動映射地址欄中查詢字元串的命名參數（name 和 numTimes）到你的方法參數中。完整的 HelloWorldController.cs 文件看起來是這樣的：

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

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

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

ViewData 字典對象包含將要傳遞給視圖的數據。下一步，需要一個 Welcome 的視圖模板。

  • 右鍵點擊 Views/HelloWorld 文件夾，點擊 Add > New Item （添加 > 新建項）。

  • 在 Add New Item - MvcMovie （添加新項 - MvcMovie）對話框中

  • 在右上角的搜索框中輸入關鍵詞 view

  • 點擊 MVC View Page （MVC 視圖頁）

  • 在 Name （名稱）框中，輸入 Welcome.cshtml

  • 點擊 Add （添加）

在 Welcome.cshtml 視圖模板中創建一個迴圈來顯示 "Hello" NumTimes。用以下代碼完全替換 Views/HelloWorld/Welcome.cshtml 中的內容：

@{
    ViewData["Title"] = "About";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

保存修改並打開瀏覽器，訪問這個地址：

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

數據從 URL 中獲取並用模型綁定器將數據傳遞給控制器。控制器將數據封裝到 ViewData 字典中，並將對象傳遞到視圖裡。然後，視圖將數據以 HTML 的形式渲染到瀏覽器中。

在上面的例子中，我們用 ViewData 字典將數據從控制器傳遞到視圖中。在後面的教程中，我們將使用視圖模型（View Model）將數據從控制器傳遞到視圖中。用視圖模型傳遞數據的方法通常比 ViewData 字典的方式更受歡迎。查看 Dynamic V Strongly Typed Views 瞭解更多信息。

好吧，這也算是一種 Model 中的“M”吧，但無論如何都不是資料庫模型。讓我們用學到的東西創建一個電影資料庫吧。

返回目錄


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ODBC驅動程式丟失解決方法
    今天運行SqlDbx連接資料庫的時候報錯，提示沒有找到相應的ODBC driver，打開ODBC管理面板一看，發現裡面的驅動程式都不見了。這時想起今天卸載了一個成本核算軟體後成這樣的，網上搜索一下只需要用odbcconf.exe來重新註冊一下ODBC Driver就可以了。註冊方法：在%system ...
  • ubuntu Chromium 安裝 pepperflashplugin
    sudo apt-get update sudo apt-get install chromium-browser sudo apt-get install pepperflashplugin-nonfree sudo update-pepperflashplugin-nonfree --insta ...
  • who命令
    who——查看登錄用戶信息 命令所在路徑：/usr/bin/who 示例1： # who 顯示所有登錄的用戶，依次會顯示登錄用戶名、登錄類型、登錄時間，客戶端ip（如果是遠程登錄） tty —— 本地登錄 pts —— 遠程登錄 ...
  • useradd命令
    linux系統中root用戶可以通過useradd命令添加新用戶，添加的用戶還需要使用passwd設置密碼 ...
  • C#複習①
    C#複習① 2016年6月15日 08:19 Main Introduction of C# 簡單介紹C# 1. C# is very similar to Java (70% Java, 10% C++, 5% Visual Basic, 15% new) C#與Java好比失散多年的姐妹，長得像 ...
  • C#中字元串的記憶體分配與駐留池
    剛開始學習C#的時候，就聽說CLR對於String類有一種特別的記憶體管理機制：有時候，明明聲明瞭兩個String類的對象，但是他們偏偏卻指向同一個實例。如下： String s1 = "Hello";String s2 = "Hello"; //s2和s1的實際值都是“Hello”bool same ...
  • 關於Json的那點事
    說明: 說明一點JS是直接支持Json的 所以可以直接如下寫: var a={"Age":28,"LastLoginTime":"2011-01-09 01:00:56","Name":"張三"}; 直接是json對象 而不必 寫成: var a=’{"Age":28,"LastLoginTime" ...
  • 【C#】第2章學習要點
    分類：C#、VS2015 創建日期：2016-06-15 教材：（十二五國家級規劃教材）《C#程式設計及應用教程》（第3版） 一、本章要點 C#數據類型分兩大類：值類型、引用類型。 值類型：棧（Stack）中保存的就是數據的值。 引用類型：棧中保存的是堆（Heap）中對象的引用地址。 棧（Stack... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類