ASP.NET MVC4 新手入門教程之三 ---3.添加視圖

時間 2019-11-20

標籤 asp.net asp mvc4 mvc 新手入門教程之三添加視圖欄目 ASP 简体版

原文原文鏈接

在這一節你要修改HelloWorldController類要使用的視圖模板文件來乾淨封裝生成 HTML 響應到客戶端的過程。html

您將建立一個使用Razor 視圖引擎介紹 ASP.NET MVC 3 的視圖模板文件。剃刀基於視圖模板具備.cshtml文件擴展名，並提供優雅的方式來建立 HTML 輸出使用 C#。剃刀將字符和擊鍵時編寫一個視圖模板所需的數量降至最低，並使快速流暢的編碼工做流。jquery

目前Index方法返回一條消息，是在控制器類中硬編碼的字符串。更改Index方法，以返回View對象，以下面的代碼所示：web

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

上面的Index方法使用一個視圖模板來生成到瀏覽器的 HTML 響應。控制器方法（也稱爲操做方法），如上述，Index方法一般返回一個（或從一個派生的類），喜歡不原始類型的字符串。ajax

在項目中，添加一個視圖模板，您可使用與該Index方法。要作到這一點，Index法內單擊鼠標右鍵並單擊添加視圖.數據庫

出現添加視圖對話框。保留默認值並單擊添加按鈕的方式：編程

建立的MvcMovie\Views\HelloWorld文件夾和MvcMovie\Views\HelloWorld\Index.cshtml文件。你能夠看到他們在解決方案資源管理器:canvas

下面顯示了建立的Index.cshtml文件：api

添加<h2>標記下下面的 html 代碼。瀏覽器

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

下面顯示了完整的MvcMovie\Views\HelloWorld\Index.cshtml文件。緩存

@{ ViewBag.Title = "Index"; } <h2>Index</h2> <p>Hello from our View Template!</p>

若是使用的 Visual Studio 2012，在解決方案資源管理器中，右鍵單擊Index.cshtml文件，並選擇在 Page Inspector 視圖.

Page Inspector 教程有有關這個新工具的詳細信息。

或者，運行應用程序，瀏覽到HelloWorld控制器（http://localhost:xxxx/HelloWorld）。Index法在您的控制器沒有作不少工做；它只是跑了語句return View()，它指定該方法應使用一個視圖模板文件來呈現到瀏覽器的響應。由於你沒有顯式指定要使用的視圖模板文件的名稱，ASP.NET MVC 默認設置爲\Views\HelloWorld文件夾中使用Index.cshtml視圖文件。下面的圖像顯示的字符串"Hello 從咱們的視圖模板!"在視圖中硬編碼。

看上去很不錯。可是，注意到瀏覽器的標題欄顯示"索引個人 ASP.NET 第一"和大的連接頁面頂部說，"您的徽標在這裏"。如下連接"你標誌在這裏"。是註冊和登陸的連接，連接到首頁，上下約和聯繫頁面。讓咱們改變其中的一些。

更改視圖和佈局頁

首先，你想要改變"你標誌在這裏"。在頁面的頂部的標題。該文本是常見的每一頁。它實際上實現只在一個地方在項目中，即便它出如今應用程序中的每一頁上。轉到/Views/Shared文件夾中的解決方案資源管理器中，並打開_Layout.cshtml文件。此文件被稱爲佈局頁面，它是全部其餘頁面使用共享"殼"。

佈局模板容許您指定您的網站的 HTML 容器佈局在同一個地方，而後將其應用跨多個頁面在您的網站。發現@RenderBody()線。 RenderBody是一個佔位符，您建立的全部視圖特定頁都現身在哪裏，在佈局頁的"包裝"。例如，若是您選擇關於連接，在RenderBody方法內部呈現Views\Home\About.cshtml視圖。

更改網站標題標題在佈局模板從"您的徽標在這裏"到"MVC 電影"。

<div class="float-left"> <p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p> </div>

標題元素的內容替換爲如下標記：

<title>@ViewBag.Title - Movie App</title>

運行該應用程序，並注意它如今說"MVC 電影"。關於連接，點擊，你看到如何該頁面顯示的"MVC 電影"，太。咱們可以在佈局模板一次更改，在該網站上的全部頁面有都反映新的標題。

如今，讓咱們改變索引視圖的標題。

打開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視圖模板中）。若是你回望佈局模板的源代碼，你會注意到該模板使用此值在<title>元素中做爲咱們之前修改過的 HTML <head>節的一部分。使用此ViewBag方法，能夠容易地傳遞您的視圖模板與您的佈局文件之間其餘參數。

運行該應用程序，而後瀏覽到http://localhost:xx/HelloWorld。瀏覽器標題、主標題和二級標題已更改的通知。（若是你看不到更改瀏覽器中的，您可能正在查看緩存的內容。按 Ctrl + F5 在您的瀏覽器，迫使來自服務器要加載的響應）。瀏覽器的標題建立的ViewBag.Title咱們在Index.cshtml視圖模板和附加設置"-電影應用程序"在佈局文件中添加。

此外注意到Index.cshtml視圖模板中的內容如何與_Layout.cshtml視圖模板合併和單個 HTML 響應被髮送到瀏覽器。佈局模板使它真的很容易進行更改以應用在全部您的應用程序中的頁面。

咱們的"數據"（在本例中的"從咱們的視圖模板 Hello!"消息）的一點是硬編碼的雖然。MVC 應用程序中有一個"V"（視圖），你得"C"（控制器），但無"M"（模型）還沒有。不久，咱們會穿越如何建立數據庫並從中檢索模型數據。

將數據從控制器傳遞到視圖

咱們轉到一個數據庫，談論模型以前，雖然，先來談談將信息從控制器傳遞到視圖。控制器類調用傳入的 URL 請求的響應。控制器類是響應的你在哪裏寫處理傳入的瀏覽器的代碼請求，從數據庫中檢索數據和最終決定哪一種類型發送回瀏覽器。視圖模板能夠而後使用從控制器生成並設置其格式到瀏覽器的 HTML 響應。

控制器是負責提供任何數據或對象必需的一個視圖模板，呈現到瀏覽器的響應。最佳實踐：視圖模板應該永遠不會執行的業務邏輯，或與數據庫直接交互。相反，一個視圖模板應工做只能處理由控制器提供給它的數據。維持這個"關注點分離"有助於保持您的代碼，清潔、可檢驗性和更容易維護。

目前， HelloWorldController類中的Welcome的行動方法須要一個name和一個numTimes參數，而後輸出直接到瀏覽器中的值。而不是有控制器呈現爲一個字符串，此響應，讓咱們改變控制器，而是使用一個視圖模板。視圖模板將生成的動態響應，這意味着你須要經過適當的字節數據從控制器到視圖才能生成響應。你能夠經過把視圖模板須要的動態數據（參數）放在視圖模板而後能夠訪問一個ViewBag對象的控制器。

返回到HelloWorldController.cs文件並更改的 Welcome的方法，將一個Message和NumTimes的值添加到 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對象包含將自動傳遞給視圖的數據。

接下來，您須要一個受歡迎的視圖模板！在生成菜單中，選擇生成 MvcMovie以確保編譯項目。

在Welcome的方法內部右鍵單擊，而後單擊添加視圖.

這裏是添加視圖對話框中看起來像：

單擊添加，而後在新的Welcome.cshtml文件中添加下面的代碼在 <h2>元素之下。您將建立一個循環來多少倍，用戶說它應該說"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，歡迎光臨嗎？名稱 = Scott & numtimes = 4

如今數據被從 URL 並傳遞給控制器使用的模型聯編程序。控制器的數據打包成一個ViewBag對象，並將該對象傳遞給視圖。視圖而後是向用戶顯示爲 html 格式的數據。

在上面的示例中，咱們使用一個ViewBag對象將數據從控制器傳遞到視圖。後者在本教程中，咱們將使用一個視圖模型將數據從控制器傳遞到視圖。視圖模型方法來傳遞數據優於通常多視圖包方法。請參閱博客動態 V 強類型化的視圖的詳細信息。

好吧，那是一種"M"的模型，而不是數據庫的那種。讓咱們學會的並建立一個數據庫，電影。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。