【譯】ASP.NET MVC 5 教程 - 3：添加視圖

在本節内容中，我們将修改HelloWorldController類，使用視圖模闆來幹淨利索的封裝生成HTML響應用戶端的過程。

目前的 <code>Index </code>方法傳回一條消息，是在控制器類中直接寫入的字元串。更改 <code>Index </code>方法使其傳回一個<code>View</code>對象，如以下代碼所示：

首先，對 HelloWorld 控制器建立一個視圖檔案夾。右鍵單擊“View”，單擊添加，然後單擊建立檔案夾。

右鍵單擊HelloWorld檔案夾并單擊添加，然後單擊支架。

添加支架對話框中，單擊5 視圖 MVC-空無模型。然後單擊添加。

在添加視圖對話框中，命名視圖Index和保留的其他設定的預設值，然後單擊添加。

建立的MvcMovie\Views\HelloWorld\Index.cshtml檔案。

下面顯示所建立的 Index.cshtml 檔案：

添加下面的 html 代碼<code>&lt;h2&gt;</code>标記下。

<code>&lt;p&gt;Hello from our View Template!&lt;/p&gt;</code>

下面是一個完整的MvcMovie\Views\HelloWorld\Index.cshtml檔案。

右鍵單擊Index.cshtml檔案，然後選擇 View in Page Inspector.

另外，運作程式，浏覽到HelloWorld控制器（http://localhost:xxxx/HelloWorld）。控制器中的Index方法并沒有做太多工作，它隻是簡單的運作了語句 <code>return View()</code>，指定Index方法應該使用一個視圖模闆檔案呈現到浏覽器的響應。因為你沒有明确指定要使用的視圖模闆檔案的名稱，ASP.NET MVC 預設使用\Views\HelloWorld 檔案夾下的Index.cshtml檔案。下面圖檔中顯示的“Hello from our View Template!”寫死在視圖中。

看起來還不錯。但是，注意浏覽器标題欄顯示的“Index - My ASP.NET Ap”和在頁面頂部的大個兒的“Application name”連結。根據你視窗大小不同，你可能會看到右上角的三條杠，點選後會看到 Home、About、Contact、Register和Log in 連結。

更改視圖和布局頁面

首先，你希望改變頁面頂部的“Application name”連結，這段文字在每個頁面都有，是公用的。盡管它出現在程式中的每個頁面，但實際上它隻寫在一個地方。在解決方案資料總管中找到 /Views/Shared 檔案夾，打開_Layout.cshtml 檔案。這個頁面叫做布局頁，放在所有頁面都能用的共享檔案夾中。

布局模闆允許你在頁面的某個地方指定HTML容器，然後在網站多個頁面中應用。找到<code>@RenderBody()</code> 行，RenderBody 是一個占位符，所有你使用了_layout.cshtml檔案的視圖頁面會被顯示在這個地方，“包裝”在布局頁中。例如，如果你選擇About連結，視圖Views\Home\About.cshtml 将被繪制在 <code>RenderBody</code>  方法中。

修改布局模闆中的ActionLink，将"Application name"改為"MVC Movie"。

用下面的标簽替換title元素的内容：

運作應用程式，現在已将變成“MVC Movie”了。單擊About連結，你會看到這個頁面也顯示“MVC Movie”。我們僅僅修改了布局模闆，就為網站中的所有頁面換上了新的标題。

現在讓我們來改變Index視圖中的title吧。

打開MvcMovie\Views\HelloWorld\Index.cshtml 。有兩個地方需要我們修改：浏覽器标題欄中的文本，然後是次要的标題（&lt;h2&gt;元素）。你可以稍微修改一下代碼，這樣就可以看到哪些代碼影響了哪些部分。

為了指明HTML顯示的标題，上面的代碼中設定了ViewBag對象（在Index.cshtml視圖模闆中）的Title屬性。在布局模闆中（Views\Shared\_Layout.cshtml ）的<code>&lt;head&gt;</code>節點的<code>&lt;title&gt;</code>标簽使用了這個值。

使用此<code>ViewBag</code>的方法，你可以輕松地其他參數之間傳遞您的視圖模闆和布局檔案。

運作應用程式并浏覽到http://localhost:xx/HelloWorld。注意這個頁面發生的變化：浏覽器标題、主标題、此标題都發生了改變（如果你沒有看到這些變化，可能是浏覽器緩存了之前的内容，在浏覽器中按CTRL+F5強制從重新整理頁面）。浏覽器标題使我們在Index.cshtml中傳遞給布局頁的參數，布局頁又加上了“- Movie App”部分。通過這個例子你會看到，布局模闆提供了一種簡單的修改應用程式中全部頁面的方式。

到目前為止，我們用到的少量資料（像上面例子中的“Hello from our View Template!”）都是寫死的。我們用到了MVC中的“V”（View）和“C”（Controller），但還沒用到過“M”（Model）。接下來我們就演練一下如何建立資料庫，并通過模型來擷取資料。

在讨論資料庫和模型之前,讓我們先說說容控制器傳遞資料給視圖。控制器類在響應傳入的請求時被調用，控制器類是你寫代碼處理浏覽器請求、從資料庫中檢索資料、并最終決定發送什麼類型的響應給浏覽器。視圖模闆被控制器用來生成和格式化HTML響應給浏覽器。

控制器的責任是為視圖模闆提供必須的資料或對象，用來繪制HTML響應浏覽器。一個最佳實踐是：視圖模闆從來不參與業務邏輯，或直接與資料庫互動。相反的，視圖模闆僅與控制器提供的資料一起工作。保持這種“關注點分離（separation of concerns）”有助于保持代碼的整潔，可測試性和更容易維護。

目前，HelloWorldController 類中的 Welcome 方法需要兩個參數：name 和 numTimes，然後直接與将值輸出給浏覽器。讓我們修改控制器，使用視圖來替換直接相應string字元串。視圖模闆會生成一個動态響應，這意味着你需要通過控制器傳遞一些資料用來生成響應。要做到這些，你需要通過在控制器中将資料（參數）放到ViewBag對象中，視圖可以通路ViewBag對象。

回到 HelloWorldController.cs  檔案中，修改Welcome方法，在ViewBag對象中添加一個Message和NumTimes值。ViewBag是dynamic 類型的對象，你可以為它添加任何你想要的資料，ViewBag對象在你添加資料之前，不具有任何屬性。ASP.NET MVC 模型綁定系統從位址參數中自動映射命名的參數（name 和 numTimes）到方法中。完整的HelloWorldController.cs檔案如下：

現在ViewBag對象已經包含了資料，它會被自動傳遞給視圖。

接下來，你需要一個Welcome視圖模闆。在生成菜單中，選擇生成解決方案（或使用快捷鍵 CTRL+SHIFT+B）确定項目已經編譯了。

在Views\HelloWorld 檔案夾右鍵，選擇“添加”&gt;“支架”：

在添加支架對話框中，選擇“MVC 5 View - Empty without model”。

在Add View對話框中，将視圖命名為Welcome

檔案MvcMovie\Views\HelloWorld\Welcome.cshtml  已經建立好了。

在檔案Welcome.cshtml  的<code>&lt;h2&gt;</code>元素下添加如下的代碼，完整的代碼如下：

運作應用程式，在浏覽器中檢視如下位址：

http://localhost:xx/HelloWorld/Welcome?name=Scott&amp;numtimes=4

現在資料從URL取出來，通過模型綁定傳遞給控制器，控制器将資料封裝在ViewBag對象中，傳遞給視圖，然後視圖将資料以HTML的方式呈現給使用者。

在上面的例子中，我們使用ViewBag對象将資料從控制器傳遞給視圖。在家下來的章節中，我們會使用視圖模型來傳遞資料。使用視圖模型傳遞資料比用ViewBag要好得多。

這也是模型“M”的一種，但并沒有使用資料庫。我們接下來要學習的是建立一個資料庫，建立一個真正意義的視圖模型。