標籤：home body 控制 asp.net 注釋 允許 輸入 vc6 查詢
在本節中，你要去修改HelloWorldController類，使用視圖模板檔案，在乾淨利索地封裝的過程中：用戶端瀏覽器產生HTML。
您將建立一個視圖模板檔案，其中使用了ASP.NET MVC 3所引入的Razor視圖引擎（Razor view engine）。Razor視圖模板檔案使用.cshtml副檔名，並提供了一個優雅的方式來使用C＃語言建立所要輸出的HTML。用Razor編寫一個視圖模板檔案時，將所需的字元和鍵盤敲擊數量降到了最低，並實現了快速，流暢的編碼工作流程。
當前在控制器類中的Index方法返回了一個硬式編碼字串。更改Index方法返回一個View對象，如下面的範例程式碼：
public ActionResult Index(){return View();}
上面的Index方法使用一個視圖模板來產生一個HTML返回給瀏覽器。控制器的方法（也被稱為action method(操作方法) ），如上面的Index方法，一般返回一個ActionResult（或從ActionResult所繼承的類型），而不是原始的類型，如字串。
在該項目中，您可以使用的Index方法來添加一個視圖模板。要做到這一點，在Views\HelloWorld 檔案夾上，單擊滑鼠右鍵，然後單擊“ 添加“，選擇“MVC 5 View Page with (Layout Razor) “。
在”指定項名稱(Specify Name for Item)“對話方塊，輸入“Index “，然後單擊“確定”。
在“選擇布局頁(Select a Layout Page)”對話方塊中，接受預設“_Layout.cshtml”，並單擊”確定“。
在上面的對話方塊中，左窗格中選擇的是“ Views\Shared”共用資料夾布局。如果你在另一個檔案夾中有一個自訂布局，你也可以選擇它。稍後在本教程中，我們會談論的布局檔案。
您可以在方案總管中看到MvcMovie\HelloWorld檔案夾和已被建立的MvcMovie\View\HelloWorld\Index.cshtml檔案：
添加下面的高亮標記代碼。
@{Layout = "~/Views/Shared/_Layout.cshtml";}@{ViewBag.Title = "Index";}<h2>Index</h2><p>Hello from our View Template!</p>
在方案總管，找到Index.cshtml檔案，按右鍵並選擇“在瀏覽器中查看”。
頁面檢查器教程中會有更多的資訊介紹這個工具。
同時，運行應用程式並在瀏覽器中瀏覽：HelloWorld控制器（http://localhost:xxxx/HelloWorld“）。在您控制器的Index方法中並沒有做太多的工作，它只是執行了return View()，這個方法指定使用一個視圖模板檔案來Render返回給瀏覽器的HTML。因為您沒有明確指定使用那個視圖模板檔案，ASP.NET MVC會預設使用\Views\HelloWorld檔案夾下的Index.cshtml視圖檔案。顯示了在視圖檔案中硬式編碼字串 "Hello from our View Template!"
看起來很不錯吧。但是，請注意，瀏覽器的標題列會顯示為"Index- My ASP.NET Appli" 並且在頁面頂部的大連結會顯示為 "Application name.”。 取決於瀏覽器視窗的大小，您可能需要在右上方，單擊“三條杠”，首頁（Home），簡介（About）聯絡（Contact）, 註冊（Register）和登入（Log in）的連結。
修改視圖和布局頁首先，您想要修改在頁面頂部的連結 "Application name"。這段文字是每個頁面的公用文字，即使這段文字出現在每個頁面上，但是實際上它僅儲存在工程裡的一個地方。在方案總管裡找到/Views/Shared檔案夾，開啟_Layout.cshtml檔案。此檔案被稱為布局頁面（Layout page），並且其它所有的子頁面，都共用使用這個布局頁面。
布局模版允許您在一個位置放置佔位所需的 HTML 容器，然後將其應用到您網站中所有的網頁布局。 尋找 @RenderBody(). 您所建立的所有視圖頁面都被"封裝" 在布局頁面中來顯示，RenderBody只是個預留位置。例如，如果您點擊“關於(About)”連結，Views\Home\About.cshtml 視圖會在RenderBody方法內進行Render。
在布局模板頁面內修改ActionLink內容, 把網站標題從 " Application name " 修改為 "MVC Movie”，並修改控制器參數從Home為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 Movie "。 我們可以在布局模版裡再修改一次，使得網站裡所有網頁的標題都同時被修改掉。
開啟建立的 Views\HelloWorld\Index.cshtml檔案，可以找到如下代碼:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
上面的 Razor 代碼，顯示的設定了布局頁面。開啟 Views\_ViewStart.cshtml 檔案, 它也有同樣的Razor 標記代碼。Views\_ViewStart.cshtml 檔案定義我們使用到的所有視圖的通用布局，故你也可在Views\HelloWorld\Index.cshtml檔案裡面，注釋或刪除這些代碼。
@*@{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屬性。如果您回去看看布局模板的原始碼，您會發現該模板會輸出此值倒<title>元素中，從而作為我們之前修改過的 HTML <head>裡的一部分。
<!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>
使用此ViewBag方法，您可以輕鬆地從視圖模板傳遞其它參數給布局模板頁面。
運行應用程式，瀏覽http://localhost:xx/HelloWorld。 瀏覽器的標題、 主標題和二級標題都已經被修改了。（如果您在瀏覽器中看不到修改，有可能是頁面被緩衝了。按 Ctrl + F5 強制瀏覽器重新請求並載入伺服器返回的HTML） 在Index.cshtml視圖模版中設定的ViewBag.Title 輸出了瀏覽器的標題，附加的"- Movie App"是在布局模板檔案中添加的。
此外還要注意Index.cshtml視圖模板中的內容是如何合并到_Layout.cshtml模板，從而形成一個完整的HTML返回到用戶端瀏覽器的。使用布局模板頁面，可以很容易進行一個修改並應用到所有頁面。
我們這一點（在本例中的"Hello from our View Template!"字串） 的"資料" 只是一段寫入程式碼。這個MVC 應用程式有了一個"V"（視圖），也有了一個"C"（控制器），但還沒有"M"(模型)。不過稍後，我們將介紹如何建立一個資料庫並檢索資料模型。
視圖是資料的展示方式，掌握這部分知識才能更好的用於MVC的開發。同時，還可以藉助一些開發工具來協助開發過程。ComponentOne Studio ASP.NET MVC 這款輕量級控制項能與Visual Studio無縫整合，完全與MVC6和ASP.NET 5.0相容，將大幅提高開發效率。
-----------------------------------------------------------------------------------------
《ASP.NET MVC 5 入門指南》12篇文章匯總如下：
1. ASP.NET MVC 5 - 開始MVC 5之旅
2. ASP.NET MVC 5 - 控制器
3. ASP.NET MVC 5 - 視圖
4. ASP.NET MVC 5 - 將資料從控制器傳遞給視圖
5. ASP.NET MVC 5 - 添加一個模型
6. ASP.NET MVC 5 - 建立連接字串(Connection String)並使用SQL Server LocalDB
7. ASP.NET MVC 5 - 從控制器訪問資料模型
8. ASP.NET MVC 5 - 驗證編輯方法(Edit method)和編輯檢視(Edit view)
9. ASP.NET MVC 5 - 給電影表和模型添加新欄位
10. ASP.NET MVC 5 - 給資料模型添加校正器
11. ASP.NET MVC 5 - 查詢Details和Delete方法
12. ASP.NET MVC 5 - 使用Wijmo MVC 5模板1分鐘建立應用
希望這些文章對感興趣的朋友有所協助，另附上PDF版的匯總文檔：
《ASP.NET MVC 5 入門指南》PDF版
[轉]ASP.NET MVC 5 - 視圖
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
