ASP.NET MVC 5 - 視圖
在本節中，你要去修改HelloWorldController類，使用視圖模板文件，在乾淨利索地封裝的過程當中：客戶端瀏覽器生成HTML。css
您將建立一個視圖模板文件，其中使用了ASP.NET MVC 3所引入的Razor視圖引擎（Razor view engine）。Razor視圖模板文件使用.cshtml文件擴展名，並提供了一個優雅的方式來使用C＃語言建立所要輸出的HTML。用Razor編寫一個視圖模板文件時，將所需的字符和鍵盤敲擊數量降到了最低，並實現了快速，流暢的編碼工做流程。html
當前在控制器類中的Index方法返回了一個硬編碼的字符串。更改Index方法返回一個View對象，以下面的示例代碼：jquery
public ActionResult Index()
{
return View();
}
上面的Index方法使用一個視圖模板來生成一個HTML返回給瀏覽器。控制器的方法（也被稱爲action method(操做方法) ），如上面的Index方法，通常返回一個ActionResult（或從ActionResult所繼承的類型），而不是原始的類型，如字符串。web
在該項目中，您可使用的Index方法來添加一個視圖模板。要作到這一點，在Views\HelloWorld 文件夾上，單擊鼠標右鍵，而後單擊「 添加「，選擇「MVC 5 View Page with (Layout Razor)「。數據庫
在」指定項名稱(Specify Name for Item)「對話框，輸入「Index 「，而後單擊「肯定」。bootstrap
在「選擇佈局頁(Select a Layout Page)」對話框中，接受缺省「_Layout.cshtml」，並單擊」肯定「。瀏覽器
在上面的對話框中，左窗格中選擇的是「 Views\Shared」共享文件夾佈局。若是你在另外一個文件夾中有一個自定義佈局，你也能夠選擇它。稍後在本教程中，咱們會談論的佈局文件。緩存
您能夠在解決方案資源管理器中看到MvcMovie\HelloWorld文件夾和已被建立的MvcMovie\View\HelloWorld\Index.cshtml文件：服務器
添加下面的高亮標記代碼。mvc
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
Hello from our View Template!
在解決方案資源管理器，找到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=" 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>
© @DateTime.Now.Year - My ASP.NET Application
</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>
Hello from our View Template!
你可使用Layout屬性設置一個不一樣的佈局頁面，或者設置爲null指明不使用佈局文件
如今，讓咱們來修改Index視圖：
打開MvcMovie\Views\HelloWorld\Index.cshtml文件，有兩個地方須要進行修改：
・ 瀏覽器上的標題文字
・ 其次，二級標題文字 (<h2>元素)。
讓它們稍有不一樣，這樣就能夠看出到底程序裏那部分的代碼被修改了。
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
Hello from our View Template!
若是要指定HTML的title元素，上面的代碼設置了ViewBag對象 （在Index.cshtml視圖模板中） 的Title屬性。若是您回去看看佈局模板的源代碼，您會發現該模板會輸出此值倒<title>元素中，從而做爲咱們以前修改過的 HTML <head>裏的一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content=" 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兼容，將大幅提升開發效率。
- 1. ASP.NET MVC 5 - 視圖
- 2. ASP.NET MVC - 視圖
- 3. ASP.NET MVC- 視圖
- 4. ASP.NET MVC 視圖(四)
- 5. ASP.NET MVC 視圖(三)
- 6. ASP.NET MVC 視圖(一)
- 7. ASP.NET MVC 視圖(五)
- 8. ASP.NET MVC 視圖(二)
- 9. 【ASP.NET MVC系列】淺談ASP.NET MVC 視圖
- 10. ASP.NET Core MVC 視圖
- 更多相關文章...
- • ASP.NET MVC - 視圖 - ASP.NET 教程
- • SQLite 視圖（View） - SQLite教程
- • JDK13 GA發佈：5大特性解讀
- • Git可視化極簡易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。