LearnMVC5-AddAView
原創文章，轉載必需註明出:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learnmvc5-addaview/css
添加視圖
在本章節中、我將帶領大家修改HelloWorldController類。使用視圖模板文件簡單便捷的封裝生成HTML響應的過程。html
你將使用Razor View Engine 建立一個視圖模板文件。基於Razor的視圖模板包含一個以.cshtml爲後綴的文件，而且使用C#以一種優雅的方式穿件HTML顯示頁面。Razor在你建立一個視圖模板時可使你的編碼量最小，實現快速流暢的編碼工做流。jquery
當前你控制器中的Index方法返回一個硬編碼字符串做爲消息。修改Index方法，返回一個View對象，具體代碼以下：數據庫
public ActionResult Index() { return View(); }
右鍵View\HelloWorld文件夾，點擊Add、點擊MVC 5 View Page with（Layout Razor）。上面的Index方法經過返回一個View模板來生成一個HTML響應給瀏覽器。如上面的Index方法的控制器方法（或者Action方法）一般返回一個ActionResult（或一個繼承自ActionResult的類）而不是如string通常的原始類型。bootstrap
在Spacify Name for Item彈出框中輸入index而後點擊Ok瀏覽器
在Select a Layout Page彈出框中，選擇默認的_Layout.cshtml並點擊OK緩存
上面顯示的彈出框中，左側邊欄中自動勾選上Views\Shared文件。若是你有自定義的佈局文件，你也能夠選擇使用。稍後我將會講解佈局文件。mvc
通過上面的步驟，MvcMovie\Views\HelloWorld\Index.cshtml文件已經建立成功。函數
用下面代碼覆蓋已有代碼佈局
@{ Layout = "~/Views/Shared/_Layout.cshtml"; } @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p>Hello from our View Template!</p>
右鍵Index.cshtml文件，並選擇在瀏覽器中查看，或者選擇在Page Inspector中查看
此外，運行應用程序並進入HelloWorld控制器（http://localhost:xxxx/HelloWorld）。控制器中的Index函數只是簡單的返回View()，這個方法只是使用一個視圖模板文件展現給瀏覽器。由於你沒有指定展現哪個視圖模板文件，因此ASP.NET MVC默認使用你View\HelloWorld文件夾下的index.cshtml文件。下面的圖片顯示index.cshtml文件中的硬編碼字符串「Hello from our View Template!」
看起來很好。然而，注意看的話，能夠發如今瀏覽器的標題欄顯示着"Index My ASP.NET Appli".在頁面的頂部也顯示的"Application name."
修改視圖和佈局頁
首先你要修改頁面頂部的"Application name"連接。這個文本是全部頁面共有的。實際上，文本內容在整個項目中只實如今一個地方即便他在每一個頁面都顯示。打開/Views/Shared文件夾下的_Layout.cshtml文件。這種文件叫作佈局頁，而且它是在共享文件夾中供全部頁面使用。
佈局模板容許你在網站的某一個地方指定網站的HTML容器佈局，而後將它應用在網站的更多頁面上。找到@RenderBody()這一行。RenderBody是你建立的視圖頁面顯示的一個佔位符。例如你選擇了About連接，Views\Home\About.cshtml視圖將會呈如今RenderBody函數中
修改Title元素的內容。將ActionLink中的字符串「Application name」修改成「MVC Movie」，並將表明控制器的參數修改成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> @Html.Partial("_LoginPartial") </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>© @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 Movie」。點擊About連接，你明顯能夠看到頁面顯示MVC Movies。咱們只須要在佈局模板中修改一次，網站中全部頁面都會顯示更新後的內容。
在咱們建立Views\HelloWorld\Index.cshtml 文件的時候，文件裏自動包含了下面的代碼：
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
Views\_ViewStart.cshtml 文件定義了全部文件都會使用的經常使用佈局，所以你能夠屏蔽或者移除Views\HelloWorld\Index.cshtml中的代碼。上面的Razor代碼用來設置佈局頁。查看Views\_ViewStart.cshtml 文件，發現它也包含相似的Razor代碼。
@*@{ Layout = "~/Views/Shared/_Layout.cshtml"; }*@ @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p>Hello from our View Template!</p>
你可使用Layout屬性來設置不一樣的佈局視圖，或者設置null。
如今咱們來修改Index視圖的標題
打開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屬性賦值。須要注意的是佈局模板（Views\Shared\_Layout.cshtml）在<title>標籤中使用了上邊的ViewBag.Title變量
<!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>
運行應用，能夠看見瀏覽器標題、主標題和二級標題已經改變了。（若是你沒有看見變化，那麼顯示的多是緩存過的界面。在瀏覽器中按Ctrl+F5便可）。咱們在Index.cshtml視圖模板中經過ViewBag.Title設置的的標題在瀏覽器中顯示成功。經過ViewBag你能夠輕鬆的在你的視圖模板和佈局文件中傳遞其餘參數。
須要注意的是，這裏的Index.cshtml視圖模板時圖和與_Layout.cshtml視圖模板合併，並生成一個HTML響應發送到瀏覽器的。佈局模板使你應用程序中改變全部界面變得簡單。
本文中咱們的數據都是使用硬編碼(如：「Hello from our View Template!」)。咱們已經介紹了MVC中的V(View)和C(Controller)，可是尚未M(Model)。不久,咱們將介紹如何建立一個數據庫和檢索模型數據。
從Controller到View傳遞數據
在咱們使用數據庫講解Model前，讓咱們先講解下從控制器到視圖傳遞值。控制器類被用來響應傳入的URL響應。控制器類是你編寫的代碼處理傳入的瀏覽器請求,從數據庫中檢索數據,並最終決定什麼類型的響應發送回瀏覽器。視圖模板能夠用於從一個控制器來產生和格式化HTML響應到瀏覽器。控制器負責提供視圖模板將呈現到瀏覽器所須要的任何數據或對象。一個最佳的實踐方法即:一個視圖模板不該該執行業務邏輯或直接與數據庫交互。反而言之，視圖模板則僅僅用來操做控制器提供的數據。這就是所謂的「關注點分離」，這使得代碼保持乾淨，可測試，切易於維護。
目前HellowWorldController類中的Welcome方法須要name和numTImes兩個參數，而後返回到瀏覽器中。而不是控制器呈現這個響應到字符串，湯咱們使用一個視圖模板來改變控制器。視圖模板將會使用你從控制器傳遞的到視圖的參數倆生成一個動態響應。你能夠經過控制器使用ViewBag動態傳遞參數。
讓咱們打開HelloWorld文件，修改Welcom函數，添加一個NumTImes變量到ViewBag。ViewBag是動態對象，你能夠將任何你想放入的變量放到ViewBag中。在你沒有放入任何變量前ViewBag沒有任何屬性。ASP.Net模型綁定系統動態從url中的查詢字符串中映射變量到你函數的參數中。全部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包含了將動態傳遞到View中的數據。下面，你須要一個Welcome視圖模板文件。先生成一遍應用程序，而後右鍵Views\HelloWorld文件。點擊Add而後點擊MVC 5 View Page with (Layout Razor).
在Specify Name for Item彈出框中輸入Welcome而後點擊OK。在Select a Layout Page 彈出框中選擇_Layout.cshtml而後點擊OK。
MvcMovie\Views\HelloWorld\Welcome.cshtml文件建立成功。
使用下面的代碼替換Welcome.cshtml文件內容，代碼將會循環打印你輸入的次數個「Hello」。
@{ ViewBag.Title = "Welcome"; } <h2>Welcome</h2> <ul> @for (int i = 0; i < ViewBag.NumTimes; i++) { <li>@ViewBag.Message</li> } </ul>
如今URL中的數據經過模型綁定傳遞到控制中。而後控制器將數據放到ViewBag中，經過ViewBag傳遞到視圖中。最後視圖顯示數據到HTML中。運行應用程序，輸入下面URL：http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
上面的例子中咱們使用ViewBag對象從控制器傳遞數據到視圖中。在下一篇文章中，咱們將會使用視圖模型從控制器傳遞數據到視圖中。
-
每一个你不满意的现在，都有一个你没有努力的曾经。