|
起飛網(wǎng) ASP.NET MVC 5 學(xué)習(xí)教程目錄：
首先,，你希望改變頁(yè)面頂部的“Application name”鏈接，這段文字在每個(gè)頁(yè)面都有,，是公用的,。盡管它出現(xiàn)在程序中的每個(gè)頁(yè)面，但實(shí)際上它只寫(xiě)在一個(gè)地方,。在解決方案資源管理器中找到 /Views/Shared 文件夾,，打開(kāi)_Layout.cshtml 文件。這個(gè)頁(yè)面叫做布局頁(yè),，放在所有頁(yè)面都能用的共享文件夾中,。 圖1：_Layout.cshtml文件的位置
布局模板允許你在頁(yè)面的某個(gè)地方指定HTML容器，然后在網(wǎng)站多個(gè)頁(yè)面中應(yīng)用,。找到 修改布局模板中的ActionLink，將"Application name"改為"MVC Movie",。 代碼清單1：修改后的ActionLink <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> @Html.ActionLink("MVC Movie", "Index", "Home", null, new { @class = "brand" }) <div class="nav-collapse collapse"> <ul class="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> 用下面的標(biāo)簽替換title元素的內(nèi)容： 代碼清單2：修改后的title標(biāo)簽 <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> 運(yùn)行應(yīng)用程序,，現(xiàn)在已將變成“MVC Movie”了。單擊About鏈接,，你會(huì)看到這個(gè)頁(yè)面也顯示“MVC Movie”,。我們僅僅修改了布局模板,，就為網(wǎng)站中的所有頁(yè)面換上了新的標(biāo)題。 圖2：About頁(yè)面
現(xiàn)在讓我們來(lái)改變Index視圖中的title吧,。 打開(kāi)MvcMovie\Views\HelloWorld\Index.cshtml ,。有兩個(gè)地方需要我們修改：瀏覽器標(biāo)題欄中的文本，然后是次要的標(biāo)題（<h2>元素）,。你可以稍微修改一下代碼,，這樣就可以看到哪些代碼影響了哪些部分。 代碼清單3：Index.cshtml @{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
為了指明HTML顯示的標(biāo)題,，上面的代碼中設(shè)置了ViewBag對(duì)象（在Index.cshtml視圖模板中）的Title屬性,。在布局模板中（Views\Shared\_Layout.cshtml ）的 代碼清單4：在布局頁(yè)總使用Title的值 <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的方式,，你可以很容易的在視圖模板和布局頁(yè)中之間傳遞參數(shù),。 運(yùn)行應(yīng)用程序，瀏覽http://localhost:xx/HelloWorld ,。 圖3：在瀏覽器中查看修改后的HelloWorld頁(yè)面
注意這個(gè)頁(yè)面發(fā)生的變化： 瀏覽器標(biāo)題,、主標(biāo)題、此標(biāo)題都發(fā)生了改變（如果你沒(méi)有看到這些變化,，可能是瀏覽器緩存了之前的內(nèi)容,，在瀏覽器中按CTRL+F5強(qiáng)制從刷新頁(yè)面）。瀏覽器標(biāo)題使我們?cè)?em>Index.cshtml中傳遞給布局頁(yè)的參數(shù),，布局頁(yè)又加上了“- Movie App”部分,。 通過(guò)這個(gè)例子你會(huì)看到，布局模板提供了一種簡(jiǎn)單的修改應(yīng)用程序中全部頁(yè)面的方式,。 到目前為止,，我們用到的少量數(shù)據(jù)（像上面例子中的“Hello from our View Template!”）都是硬編碼的。我們用到了MVC中的“V”（View）和“C”（Controller）,，但還沒(méi)用到過(guò)“M”（Model）,。接下來(lái)我們就演練一下如何創(chuàng)建數(shù)據(jù)庫(kù)，并通過(guò)模型來(lái)獲取數(shù)據(jù),。 本文轉(zhuǎn)自起飛網(wǎng),，原文地址：http://www./mvc/mvc-5-changing-views-and-layout-pages |
|
|
來(lái)自： 廈港小鎮(zhèn) > 《待分類》
