3.6 添加一個視圖
本節您將繼續修改HelloWorldController類，使用視圖模板去封裝簡潔的HTML響應給用戶端。
您將使用ASP.NET MVC 3引入的Razor視圖引擎去建立一個視圖模板。基於Razor視圖引擎的模板以.cshtml為副檔名，它提供一種非常優雅的方式使用C#去產生HTML輸出。當您編寫視圖模板時，Razor把您敲擊鍵盤的次數降低到了最小，coding起來非常快捷、流暢。
我們從控制器HelloWorldController類中的Index方法開始使用視圖模板。現在Index方法只返回了一個硬式編碼字串訊息。改變一下Index方法，讓它返回一個
View對象，代碼如下：
public ActionResult Index(){ return View();}
這些代碼使用視圖模板去產生HTML響應給用戶端瀏覽器。在這個項目裡，您可以給Index方法添加一個視圖模板。這樣來做，右鍵Index方法選擇添加視圖。
添加視圖的對話方塊彈出來了。保留預設選項並單擊添加。
在檔案夾MvcMovie\Views\HelloWorld下檔案
MvcMovie\Views\HelloWorld\Index.cshtml被建立了。您可以在方案總管中看到。下面展示了Index.cshtml檔案被建立：
在標籤<h2>裡添加一些HTML，被修改後的MvcMovie\Views\HelloWorld\Index.cshtml檔案如下所示：
@{ ViewBag.Title = "Index";}<h2> Index</h2><p> Hello from our View Template!</p>
運行程式並瀏覽HelloWorld控制器（http://localhost:xxxx/HelloWorld）。
Index方法並沒有太多的工作，它僅僅運行了一個運算式return View()，運算式指明了這個方法將使用視圖模板去呈送響應給瀏覽器。
因為您沒有特別指明使用哪個視圖模板，ASP.NET MVC預設使用\Views\HelloWorld檔案夾下的Index.cshtml視圖。展示了視圖中的寫入程式碼。
這看起來非常棒！然而，瀏覽器的標題列顯示的是Index,大號的標題顯示的是"My MVC Application."，讓我們改變它們!
首先，您希望改變頁面上最上邊的標題"My MVC Application"。這些文字對每個頁面來說是相同的。事實上，它在項目只被實現了一次，儘管它出現在每個頁面上。
在方案總管中定位到/Views/Shared下的_Layout.cshtml檔案。這個檔案被稱作為布局頁，它被共用為所有頁面的“外殼”。(類似webform中的Masterpage)。
布局模板允許您指明網站的HTML容器並應用到網址所有的頁面中。注意檔案底部的@RenderBody()行。RenderBody是一個所有視圖頁的預留位置，包裹在布局頁中。把布局頁中的標題"My MVC Application"改為"MVC Movie App".
<div id="title"> <h1> MVC Movie App</h1></div>
運行程式，注意它現在顯示的是"MVC Movie App".單擊About連結，您可以看到頁面仍然顯示"MVC Movie App".我們在布局頁中改變一次之後在所有頁面中都輸出了新的標題。
模板頁完整的代碼如下：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script></head><body> <div class="page"> <header> <div id="title"> <h1>MVC Movie App</h1> </div> <div id="logindisplay"> @Html.Partial("_LogOnPartial") </div> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> </nav> </header> <section id="main"> @RenderBody() </section> <footer> </footer> </div></body></html>
現在，讓我們改變視圖Index頁的標題。
開啟檔案MvcMovie\Views\HelloWorld\Index.cshtml.有兩個地方需要修改：首先，修改瀏覽器標題列出現的文字，然後再修改標籤<h2>元素。您將對代碼稍作調整,可以看到程式中的部分代碼發生了小的改變。
@{ ViewBag.Title = "Movie List";}<h2> My Movie List</h2><p> Hello from our View Template!</p>
為了指明HTML的顯示標題，上邊的代碼設定了視圖模板Index.cshtml中ViewBag的Title屬性.如果您回頭看看布局模板的原始碼，您將發現模板 使用<title>元素作為<head>節的一部分（紅色部分）。使用 這種方法，您可以很容易的在視圖模板和布局檔案間來傳遞其他參數。
運行程式並瀏覽http://localhost:xx/HelloWorld.注意到瀏覽器的標題，主要的標題，次要的標題已經發生了 變化（如果您沒有看到變化，您可能在查看瀏覽器在您機器本地的緩衝內容。按Ctrl+F5強制重新整理，強制從伺服器載入響應）。
還注意到視圖模板Index.cshtml 的內容被合并到布局檔案，一個HTML響應被發送到瀏覽器。布局模板確保非常容易應用所有的變化到所有的頁面中。
雖說，我們的一點點“資料”（"Hello from our View Template!"訊息）是硬式編碼。MVC應用程式已經有視圖"V"和控制器"C"了，但是仍然還沒有模型"M"。
下一節我們繼續。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
