在本節中，您需要修改HelloWorldController類，從而使用視圖模板檔案，乾淨優雅的封裝產生返回到用戶端瀏覽器HTML的過程。
您將建立一個視圖模板檔案，其中使用了ASP.NET MVC 3所引入的Razor視圖引擎。Razor視圖模板檔案使用.cshtml副檔名，並提供了一個優雅的方式來使用C＃語言建立所要輸出的HTML。用Razor編寫一個視圖模板檔案時，將所需的字元和鍵盤敲擊數量降到了最低，並實現了快速，流暢的編碼工作流程。
當前在控制器類中的Index方法返回了一個硬式編碼字串。更改Index方法返回一個View對象，如下面的範例程式碼：
public ActionResult Index() { return View(); }
上面的Index方法使用一個視圖模板來產生一個HTML返回給瀏覽器。控制器的方法（也被稱為action method(操作方法) ），如上面的Index方法，一般返回一個ActionResult（或從ActionResult所繼承的類型），而不是原始的類型，如字串。
在該項目中，您可以使用的Index方法來添加一個視圖模板。要做到這一點，在Index方法中單擊滑鼠右鍵，然後單擊“ 添加視圖“。
出現添加視圖對話方塊。保留預設值，並單擊添加按鈕
您可以在方案總管中看到MvcMovie\Views\HelloWorld 檔案夾和已被建立的MvcMovie\View\HelloWorld\Index.cshtml檔案：
顯示了已被建立的Index.cshtml檔案：
@{ ViewBag.Title = "Index";}<h2>Index</h2>
在<h2>標籤後面添加以下HTML:<p>從我們的視圖模板裡返回!</p>
完整的MvcMovie\HelloWorld\Index.cshtml檔案如下所示。
@{ ViewBag.Title = "Index"; } <h2>Index</h2> <p>從我們的視圖模板裡返回!</p>
運行程式，訪問HellWorld控制器http://localhost:5279/HelloWorld/。控制器裡的Index方法並沒有做很多工作，僅僅是執行 return View()語句，指定使用模板檔案來響應瀏覽器請求。因為你沒有指定使用的模板檔案名稱，ASP.NET MVC預設使用\Views\HelloWorld目錄下的Index.cshtml視圖檔案。
看上去很不錯。然而，注意瀏覽器標題列“Index- 我的 ASP.NET MVC 應用程式”，以及頁面頂部一個大號的連結“將你的徽標放置在此處”。連結下方是註冊和登入連結，再往下是首頁、關於和連絡方式的頁面連結。讓我們來修改這些。
修改視圖頁和布局頁
首先，你想修改頁面頂部的標題“將你的徽標放置在此處”。該文本在每個頁面中通用。雖然出現在應用的每一個頁面，實際上在項目中只定義了一次，。在方案總管中定位到/Views/Shared目錄下，開啟 _Layout.cshtml檔案。該檔案稱為布局頁，共用為外殼，被所有其他頁面使用。
布局模板使你指定特定的HTML容器來布局整個網站，在一處定義，在網站多個頁面應用。找到@RenderBody()行。RenderBody是一個你建立的視圖頁面中的預留位置，在布局頁面中斷行。例如，如果你選擇“關於”連結，\Home\About.cshtml 視圖在RenderBody方法中呈現。
在布局模板中修改網站標題列，由“將你的徽標放置在此處”改為“MVC 電影”。
<divclass="float-left"><pclass="site-title">@Html.ActionLink("MVC 電影", "Index", "Home")</p></div>
使用以下標記替換標題內容：
<title>@ViewBag.Title - 電影應用程式</title>
運行程式，並注意現在顯示是“MVC 電影”。點擊“關於”連結，你會發現該頁面同樣顯示“MVC 電影”。我們在布局模板中改變一次，網站中所有頁面都會變更為新的標題。
現在，讓我們來修改Index視圖的標題。
開啟MvcMovie\Views\HelloWorld\Index.cshtml檔案。裡面有兩處地方需要修改：首先，在瀏覽器標題列顯示的文本，其次是在二級標題（<H2>元素）處。你可以將兩處修改稍微不同，以便能區分出哪個地方分別對應應用程式的哪個部分。
@{ ViewBag.Title = "首頁";}<h2>我的首頁</h2>
代碼通過設定ViewBag的Title屬性來指明HTML標題的顯示內容。如果你查看布局模板的源碼，你會注意到模板在<title>元素中使用該值作為 <head>的一部分。使用ViewBag，你可以容易地在視圖模板和布局檔案間傳遞其他參數。
運行程式，瀏覽 http://localhost:xx/HelloWorld。你會發現瀏覽頁面的標題、一級標題、二級標題已經發生改變（如果在瀏覽器中看不到改變，那麼可能你看到的是緩衝內容，使用Ctrl+F5強制瀏覽器從伺服器載入資料到用戶端）。瀏覽器標題由兩部分組成，首先是我們在Index.cshtml視圖模板裡設定的ViewBag.Title，然後是在布局檔案中設定的“-電影應用程式”。
同時注意Index.cshtml視圖模板檔案內容是如何與 _Layout.cshtml視圖模板合并，形成單一的HTML響應返回給瀏覽器。布局模板使修改應用到你的應用程式所有頁面變得容易。
上面例子中我們很少一點資料是寫入程式碼。此MVC應用程式有視圖，並且你已經建立了控制器，但是還沒有模型。很快，我們將涉及如何建立資料庫並從中取得模型資料。
從控制器傳遞資料到視圖
在我們建立資料庫並談論模型之前，讓我們先談論下從控制器傳遞資訊到視圖。控制器類被調用來響應輸入網址請求。在控制器類中編寫代碼，處理瀏覽器輸入請求，從資料庫擷取資料，並且決定什麼類型的響應被發回瀏覽請求。來自控制器的視圖模板被用於產生和格式化HTML響應給瀏覽器。
控制器負責提供需要的任何資料或對象給視圖模板來產生響應給瀏覽器。最佳實務是：視圖模板不應該處理商務邏輯或者直接與資料庫發生互動。視圖模板應該僅僅處理控制器提供給它的資料。保持關係的隔離，有助於使你的代碼乾淨、可測試和易於維護。
目前，HelloWorldController類中的Welcome方法是用name和num參數，直接輸出值到瀏覽器。讓我們改變控制器，使用視圖模板來替代控制器使用字串響應請求。視圖模板將生產一個動態響應，意味著你需要傳遞一個視圖模板可訪問的ViewBag對象。
返回到 the HelloWorldController.cs檔案，修改Welcome方法，為ViewBag對象增加Message和Num值。ViewBag是一個動態對象，意味著你可以放任何你想放的東西進去；該對象在你放什麼進去之前，沒有定義的屬性。ASP.NET MVC 模型繫結機制自動將地址欄查詢字串中的具名引數映射到你的方法中的參數。完整的HelloWorldController.cs如所示：
public ActionResult Welcome(string message, int num = 1) { ViewBag.Message = message; ViewBag.Num = num; return View(); }
現在包含資料的ViewBag對象將被自動傳遞到視圖。
接下來，你需要一個Welcome視圖模板。在產生菜單中，選擇產生MVCMovie來確保該工程被編譯。
然後在Welcome方法中按右鍵，選擇添加視圖，保持預設，添加。
將Welcome.cshtml檔案中的<h2>Welcome</h2>替換為以下內容
<ul>@for (int i = 0; i < ViewBag.Num; i++){ <li>@ViewBag.Message</li>}</ul>
運行查看效果。
現在資料通過模型繫結從地址欄傳遞給控制器。控制器將資料打包放進ViewBag對象，並將該對象傳遞給視圖。視圖將資料顯示為HTML給使用者。
在上面這個例子中，我們使用ViewBag對象從控制器傳遞資料到視圖。稍後的學習中，我們將使用視圖模型來傳遞資料。相對於ViewBag方式，視圖模型方式傳遞資料更加優秀
這是一種方式的模型，但不是資料庫方式。讓我們來學習和建立電影的資料庫。
本教程所有文章導航
本系列共10篇文章，翻譯自Asp.Net MVC4 官方教程，由於本系列文章言簡意賅，篇幅適中，從一個樣本開始講解，全文最終完成了一個管理影片的小系統，非常適合新手入門Asp.Net MVC4，並由此開始開發工作。
原文供9篇文章，譯者將其中第6篇拆成了2篇
1. Asp.Net MVC4 入門介紹
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/03/2800210.html
2. 添加一個控制器
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-controller
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/04/2801949.html
3. 添加一個視圖
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/04/2801988.html
4. 添加一個模型
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-model
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/05/2803012.html
5. 從控制器訪問資料模型
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/accessing-your-models-data-from-a-controller
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/05/2803429.html
6. 查看Edit方法和Edit視圖
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-methods-and-edit-view
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/05/2804100.html
http://www.cnblogs.com/seawaving/archive/2012/12/06/2804590.html
7. 為Movie模型和庫表添加欄位
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-new-field-to-the-movie-model-and-table
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/06/2805401.html
8. 為模型添加驗證
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/06/2806322.html
9. 查看Detail和Delete方法
· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-details-and-delete-methods
· 譯文地址：http://www.cnblogs.com/seawaving/archive/2012/12/10/2811064.html
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
