在這一章節我們可以修改HelloWorldController類，通過使用視圖模板來封裝處理產生給客戶端的HTML響應。
我們將使用Razor View engine來創建視圖文件。基於Razor的視圖模板有一個.cshtml后綴，並且提供了一個使用Ｃ#代碼創建HTML輸出的優雅的方式。當你編寫視圖模板的時候Razor減少了你所需字符串和點擊鼠標的次數，並且實現了快速，流暢的編碼工作流程。
在這個controller類中，當前的Index方法返回了一個hard-coded形式消息的字符串。修改這個Index方法，使其返回一個View對象。如下代碼所示：
1 public ActionResult Index() 2 { 3 return View(); 4 }
上面的Index方法使用視圖模板產生一個HTML響應返回給瀏覽器。Controller方法（也叫做action 方法），上面的Index方法通常返回一個ActionResult(或者一個派生於ActionResult的類)，而不是一個原始的字符串類型。
１. 添加View
在Views/HelloWorld文件夾上右擊，選擇Add，然后選擇MVC 5 View Page With(Layout Razor).
在Specify Name for Item對話框中，輸入"Index"，然后點擊OK.
在Select a Layout Page對話框中，接收這個默認的_Layout.cshtml，然后點擊OK.
在上面對話框中的左邊面板上，Views/Shared文件夾被選擇了。如果你有一個自定義的布局的話，你也可以選擇你所需的布局。我們將在后面的章節中繼續討論這個布局。
此時MvcMovie\Views\HelloWorld\Index.cshtml被創建了。
在頁面中添加下面的用高亮標示的代碼。
1 @{ 2 ViewBag.Title = "Index"; 3 Layout = "~/Views/Shared/_Layout.cshtml"; 4 } 5 6 <h2>Index</h2> 7 8 <p>Hello from our view Template!</p>
在Index.cshtml文件上右擊，選擇View in Browser.
你也可以在Index.cshtml文件上右擊后選擇View in Page Inspector.關於Page Inspector tutorial更多的信息
兩者擇一，運行這個應用程序並且瀏覽到HelloWorld controller（http://localhost:xxxx/HelloWorld）.在你的controller中的Index方法並沒有作太多工作，它僅僅運行了這個語句return View(),這個方法表明使用視圖模板文件作為響應返回給瀏覽器。因為你並沒有指明你所使用的視圖模板的名字，ASP.NET MVC默認就會使用在\Views\HelloWorld文件夾下的Index.cshtml視圖文件。下面的截圖顯示出了在視圖文件中用hard-coded方法編寫的字符串"Hello from our View Template!"
看起來不錯。熱而，注意這個瀏覽器的標題欄顯示的"Index My ASP.NET Appli"和這個頁面上頂部的大鏈接"Application name".這取決於你的瀏覽器窗口的大小，你也許可以點擊窗口右上方的Home, About, Contact, Register和Log in的圖標菜單。
２.修改視圖和布局頁面
第一、你想改變頁面頂部的"Application name"鏈接。這段文本普遍的呈現在每一個頁面中。盡管這段文本在我們的項目中的每個頁面中都出現，並且它在我們項目中恰恰也是其中一個必須需要修改的地方。跳到Solution Explorer下的／Views/Shared文件夾下，並打開_Layout.cshtml文件。這個文件也叫左布局頁面，存在於shared文件夾下以便所有的頁面都能復用。
布局模板允許在你的網站制定HTML容器布局，然后在你的網站的多個頁面中復用。找到@RenderBody()這行，RenderBody就是一個占位符，包裹在布局頁面中，可以在你所創建的所有指定的頁面中顯示出來。例如：如果你選擇About鏈接，這個Views/Home/About.cshtml頁面中也給予了RenderBody方法。
修改title元素中的內容，將布局模板中的ActionLink由“Application name” 改為"MVC Movie"，並且將controller由Home改為Movies。修改后的布局文件如下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>@ViewBag.Title - Movie App</title> 7 @Styles.Render("~/Content/css") 8 @Scripts.Render("~/bundles/modernizr") 9 10 </head> 11 <body> 12 <div class="navbar navbar-inverse navbar-fixed-top"> 13 <div class="container"> 14 <div class="navbar-header"> 15 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 16 <span class="icon-bar"></span> 17 <span class="icon-bar"></span> 18 <span class="icon-bar"></span> 19 </button> 20 @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" }) 21 </div> 22 <div class="navbar-collapse collapse"> 23 <ul class="nav navbar-nav"> 24 <li>@Html.ActionLink("Home", "Index", "Home")</li> 25 <li>@Html.ActionLink("About", "About", "Home")</li> 26 <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 27 </ul> 28 @Html.Partial("_LoginPartial") 29 </div> 30 </div> 31 </div> 32 <div class="container body-content"> 33 @RenderBody() 34 <hr /> 35 <footer> 36 <p>© @DateTime.Now.Year - My ASP.NET Application</p> 37 </footer> 38 </div> 39 40 @Scripts.Render("~/bundles/jquery") 41 @Scripts.Render("~/bundles/bootstrap") 42 @RenderSection("scripts", required: false) 43 </body> 44 </html>
運行這個應用程序，注意現在變成了"MVC Movie".點擊About鏈接，你也看到該頁面也顯示"MVC Movie"了。在布局模板中我們可以做到修改一次，則在所有引用該布局模板的頁面中同布更新。
當你第一次創建Views\HelloWorld\Index.cshtml文件時，它包含如下代碼：
1 @{ 2 ViewBag.Title = "Index"; 3 Layout = "~/Views/Shared/_Layout.cshtml"; 4 }
上面的Razor代碼指定了所設置的布局頁面。檢查Views\_ViewStart.cshtml文件，它包含了相同的Razor補充部分。因為這個Views\_ViewStart.cshtml文件定義了所有視圖通用的布局，所以你可以把這個文件中的代碼注釋點或者移除掉，結果任然不受影響。
1 @{ 2 ViewBag.Title = "Index"; 3 //Layout = "~/Views/Shared/_Layout.cshtml"; 4 }
你也可以使用布局屬性來設置不同的布局頁，例如：你可以設置為空，這樣該頁面將沒有布局模板中的內容了。
現在，讓我們修改Index頁面中的title.
打開MvcMovie\Views\HelloWorld\Index.cshtml.這里有２個地方需要修改：第一、瀏覽器標題的文本，第二、header元素中內容。你可以讓它們稍微的不同，以便你可以看出這個應用程序中代碼的變化。
1 @{ 2 ViewBag.Title = "Movie List"; 3 } 4 5 <h2>My Movie List</h2> 6 7 <p>Hello from our view Template!</p>
為了顯示HTML title，這段代碼設置了ViewBag對象的Title屬性（在Index.cshtml視圖模板）。注意我們的視圖模板(Views\Shared\_Layout.cshtml)用了<title>元素的值作為我們當前被修改的HTML<head>區域的部分。
1 <head> 2 <meta charset="utf-8" /> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <title>@ViewBag.Title - Movie App</title> 5 @Styles.Render("~/Content/css") 6 @Scripts.Render("~/bundles/modernizr") 7 </head>
使用ViewBag方式，你可以很容易地將其他的參數在視圖模板和布局文件之間進行傳遞。
運行這個應用程序。注意你的瀏覽器的title和heading部分，你們發現它們已經改變了。(如果在你的瀏覽器中並沒有看到這些變化，你也許可以清除視圖中的緩存。按Ctrl+F5，強制瀏覽器從服務器加載響應)。這個瀏覽器的title已經被設置為Index.cshtml視圖模板中的ViewBag.Title的值，即"- Movie App"已經添加到了布局文件中了。
也注意到Index.cshtml視圖模板中的內容也整合到_Layout.cshtml視圖模板中了，並且一個HTML響應發送到了瀏覽器。布局模板能夠將修改的部分統一運用到應用程序中所有引用布局模板的頁面中。
盡管我們少量的數據(消息:"Hello from our View Template!")是hard-coded形式的。至此，這個MVC應用程序已經有了"V"(View)和"C"(Controller)，但是還沒有"M"(Model)。簡而言之，我們將給這個Model創建一個數據庫並且給予它模型數據。
３.從Controller傳遞數據給View
在我們來到數據庫談論Models之前，讓我們先談論一下如何將信息從controller傳遞到view當中。Controller類在響應傳入的URL請求時被觸發。一個controller就是一個C#類，這這個類中你可以處理傳入瀏覽器的請求，從數據庫中檢索數據，並且最終決定什么類型的數據返回給瀏覽器。然后使用視圖模板產生並格式化HTML來響應給瀏覽器。
Controllers負責提供所需的數據或者對象，並把它們作為發送給瀏覽器的響應來傳遞給視圖模板。一個最佳實踐是：一個視圖模板禁止處理業務邏輯或者直接和數據庫交互。取而代之的是一個視圖模板僅僅是用來接收相應controller傳遞過來的數據。記得這個“區分點”能保持你的代碼整潔，可測試和易維護。
當前，在HelloWorldController類中的Welcome方法用了name和 numTimes 2個參數，然后直接將它們的值輸出給瀏覽器。而不是使這個controller用字符串作為響應結果，讓我們用視圖模板來修改這個controller。這個視圖模板將產生一個動態的響應，也就是說為了產生這個響應你需要使用適當的比特位數據從這個controller傳遞到到view中。你可以在controller中使用一個視圖模板能夠接受的動態數據ViewBag對象來實現這一點。
回到這個HelloWorldController.cs文件，在Welcome方法中給ViewBag對象添加Message和NumTimes 2個值。ViewBag是一個動態對象，其事先並沒有定義任何屬性，是根據你定義的屬性來動態決定的，也就是說你可以存放任何你想存放的任何的屬性和值。這個ASP.NET MVC模型綁定系統會根據在地址欄中的查詢字符串中的參數和你方法中命名的參數進行自動匹配。下面是完成后的HelloWorldController.cs文件代碼：
1 using System.Web; 2 using System.Web.Mvc; 3 4 namespace MvcMovie.Controllers 5 { 6 public class HelloWorldController : Controller 7 { 8 // 9 // GET: /HelloWorld/Index 10 public ActionResult Index() 11 { 12 return View(); 13 } 14 15 // 16 // GET: /HelloWorld/Welcome 17 public ActionResult Welcome(string name, int numTimes = 1) 18 { 19 ViewBag.Message = "Hello " + name; 20 ViewBag.NumTimes = numTimes; 21 22 return View(); 23 } 24 } 25 }
現在ViewBag對象包含的數據將自動的傳遞給視圖。接下來，你需要一個Welcome視圖模板！在Build菜單，選擇Build Solution(或者Ctrl+Shift+B)來確保你的項目被編譯了。在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"的循環。完成的Welcome.cshtml文件如下：
1 @{ 2 ViewBag.Title = "Welcome"; 3 Layout = "~/Views/Shared/_Layout.cshtml"; 4 } 5 6 <h2>Welcome</h2> 7 8 <ul> 9 @for (int i = 0; i < ViewBag.NumTimes; i++) 10 { 11 <li>@ViewBag.Message</li> 12 } 13 </ul>
運行這個瀏覽器並定位到下面的URL:
http://localhost:xx/HelloWorld/Welcome?name=zhonghua&numtimes=5
現在URL中的數據通過模型綁定傳遞給了這個controller。這個controller將數據打包成ViewBag對象並傳遞給視圖。這個視圖顯示成HTML數據給用戶。
在上面的例子中，我們用了ViewBag對象將數據從controller傳遞給view。在后面的章節中，我們將用視圖模型將數據從controller傳遞給view.這個視圖模型傳遞數據的方式比使用ViewBag傳遞數據的方式更完美。查看博客獲取更多強類型視圖信息
到此為止，這是一種Model，但不是數據庫的那種。接下來讓我們創建movies的數據庫吧。