ASP.NET MVC 5 - 視圖

發(fā)布時(shí)間：2020-09-23 10:46:30 來(lái)源：網(wǎng)絡(luò) 閱讀：588 作者：powertoolsteam 欄目：編程語(yǔ)言

在本節(jié)中，你要去修改HelloWorldController類，使用視圖模板文件，在干凈利索地封裝的過(guò)程中：客戶端瀏覽器生成HTML。

您將創(chuàng)建一個(gè)視圖模板文件，其中使用了ASP.NET MVC 3所引入的Razor視圖引擎（Razor view engine）。Razor視圖模板文件使用.cshtml文件擴(kuò)展名，并提供了一個(gè)優(yōu)雅的方式來(lái)使用C＃語(yǔ)言創(chuàng)建所要輸出的HTML。用Razor編寫一個(gè)視圖模板文件時(shí)，將所需的字符和鍵盤敲擊數(shù)量降到了最低，并實(shí)現(xiàn)了快速，流暢的編碼工作流程。

當(dāng)前在控制器類中的Index方法返回了一個(gè)硬編碼的字符串。更改Index方法返回一個(gè)View對(duì)象，如下面的示例代碼：

public ActionResult Index()
{
return View();
}

上面的Index方法使用一個(gè)視圖模板來(lái)生成一個(gè)HTML返回給瀏覽器。控制器的方法（也被稱為action method(操作方法) ），如上面的Index方法，一般返回一個(gè)ActionResult（或從ActionResult所繼承的類型），而不是原始的類型，如字符串。

在該項(xiàng)目中，您可以使用的Index方法來(lái)添加一個(gè)視圖模板。要做到這一點(diǎn)，在Views\HelloWorld 文件夾上，單擊鼠標(biāo)右鍵，然后單擊“ 添加“，選擇“MVC 5 View Page with (Layout Razor)“。

ASP.NET MVC 5 - 視圖

在”指定項(xiàng)名稱(Specify Name for Item)“對(duì)話框，輸入“Index “，然后單擊“確定”。

ASP.NET MVC 5 - 視圖

在“選擇布局頁(yè)(Select a Layout Page)”對(duì)話框中，接受缺省“_Layout.cshtml”，并單擊”確定“。

ASP.NET MVC 5 - 視圖

在上面的對(duì)話框中，左窗格中選擇的是“ Views\Shared”共享文件夾布局。如果你在另一個(gè)文件夾中有一個(gè)自定義布局，你也可以選擇它。稍后在本教程中，我們會(huì)談?wù)摰牟季治募?/p>

您可以在解決方案資源管理器中看到MvcMovie\HelloWorld文件夾和已被創(chuàng)建的MvcMovie\View\HelloWorld\Index.cshtml文件：

ASP.NET MVC 5 - 視圖

添加下面的高亮標(biāo)記代碼。

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
ViewBag.Title = "Index";
}
<h3>Index</h3>
Hello from our View Template!

在解決方案資源管理器，找到Index.cshtml文件，右鍵單擊并選擇“在瀏覽器中查看”。

頁(yè)面檢查器教程中會(huì)有更多的信息介紹這個(gè)工具。

ASP.NET MVC 5 - 視圖

同時(shí)，運(yùn)行應(yīng)用程序并在瀏覽器中瀏覽：HelloWorld控制器（http://localhost:xxxx/HelloWorld“）。在您控制器的Index方法中并沒有做太多的工作，它只是執(zhí)行了return View()，這個(gè)方法指定使用一個(gè)視圖模板文件來(lái)Render返回給瀏覽器的HTML。因?yàn)槟鷽]有明確指定使用那個(gè)視圖模板文件，ASP.NET MVC會(huì)默認(rèn)使用\Views\HelloWorld文件夾下的Index.cshtml視圖文件。下圖顯示了在視圖文件中硬編碼的字符串 "Hello from our View Template!"

ASP.NET MVC 5 - 視圖

看起來(lái)很不錯(cuò)吧。但是，請(qǐng)注意，瀏覽器的標(biāo)題欄會(huì)顯示為"Index- My ASP.NET Appli" 并且在頁(yè)面頂部的大鏈接會(huì)顯示為 "Application name.”。取決于瀏覽器窗口的大小，您可能需要在右上角，單擊“三條杠”，首頁(yè)（Home），簡(jiǎn)介（About）聯(lián)系（Contact）, 注冊(cè)（Register）和登錄（Log in）的鏈接。

修改視圖和布局頁(yè)

首先，您想要修改在頁(yè)面頂部的鏈接 "Application name"。這段文字是每個(gè)頁(yè)面的公用文字，即使這段文字出現(xiàn)在每個(gè)頁(yè)面上，但是實(shí)際上它僅保存在工程里的一個(gè)地方。在解決方案資源管理器里找到/Views/Shared文件夾，打開_Layout.cshtml文件。此文件被稱為布局頁(yè)面（Layout page），并且其它所有的子頁(yè)面，都共享使用這個(gè)布局頁(yè)面。

ASP.NET MVC 5 - 視圖

布局模版允許您在一個(gè)位置放置占位所需的 HTML 容器，然后將其應(yīng)用到您網(wǎng)站中所有的網(wǎng)頁(yè)布局。查找 @RenderBody(). 您所創(chuàng)建的所有視圖頁(yè)面都被"包裝" 在布局頁(yè)面中來(lái)顯示，RenderBody只是個(gè)占位符。例如，如果您點(diǎn)擊“關(guān)于(About)”鏈接，Views\Home\About.cshtml 視圖會(huì)在RenderBody方法內(nèi)進(jìn)行Render。

在布局模板頁(yè)面內(nèi)修改ActionLink內(nèi)容, 把網(wǎng)站標(biāo)題從 " Application name " 修改為 "MVC Movie”，并修改控制器參數(shù)從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>
&copy; @DateTime.Now.Year - My ASP.NET Application
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

運(yùn)行應(yīng)用程序，您會(huì)看到 "MVC Movie "。單擊“ 關(guān)于(About)“鏈接，您可以看到該頁(yè)面也會(huì)顯示為"MVC Movie "。我們可以在布局模版里再修改一次，使得網(wǎng)站里所有網(wǎng)頁(yè)的標(biāo)題都同時(shí)被修改掉。

ASP.NET MVC 5 - 視圖

打開創(chuàng)建的 Views\HelloWorld\Index.cshtml文件，可以找到如下代碼:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

上面的 Razor 代碼，顯示的設(shè)置了布局頁(yè)面。打開 Views\_ViewStart.cshtml 文件, 它也有同樣的Razor 標(biāo)記代碼。Views\_ViewStart.cshtml 文件定義我們使用到的所有視圖的通用布局，故你也可在Views\HelloWorld\Index.cshtml文件里面，注釋或刪除這些代碼。

@*@{
Layout = "~/Views/Shared/_Layout.cshtml";
}*@
@{
ViewBag.Title = "Index";
}
<h3>Index</h3>
Hello from our View Template!

你可以使用Layout屬性設(shè)置一個(gè)不同的布局頁(yè)面，或者設(shè)置為null指明不使用布局文件

現(xiàn)在，讓我們來(lái)修改Index視圖：

打開MvcMovie\Views\HelloWorld\Index.cshtml文件，有兩個(gè)地方需要進(jìn)行修改：

· 瀏覽器上的標(biāo)題文字

· 其次，二級(jí)標(biāo)題文字 (<h3>元素)。

讓它們稍有不同，這樣就可以看出到底程序里那部分的代碼被修改了。

@{
ViewBag.Title = "Movie List";
}
<h3>My Movie List</h3>
Hello from our View Template!

如果要指定HTML的title元素，上面的代碼設(shè)置了ViewBag對(duì)象（在Index.cshtml視圖模板中）的Title屬性。如果您回去看看布局模板的源代碼，您會(huì)發(fā)現(xiàn)該模板會(huì)輸出此值倒<title>元素中，從而作為我們之前修改過(guò)的 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方法，您可以輕松地從視圖模板傳遞其它參數(shù)給布局模板頁(yè)面。

運(yùn)行應(yīng)用程序，瀏覽http://localhost:xx/HelloWorld。瀏覽器的標(biāo)題、主標(biāo)題和二級(jí)標(biāo)題都已經(jīng)被修改了。（如果您在瀏覽器中看不到修改，有可能是頁(yè)面被緩存了。按 Ctrl + F5 強(qiáng)制瀏覽器重新請(qǐng)求并加載服務(wù)器返回的HTML）在Index.cshtml視圖模版中設(shè)置的ViewBag.Title 輸出了瀏覽器的標(biāo)題，附加的"- Movie App"是在布局模板文件中添加的。

此外還要注意Index.cshtml視圖模板中的內(nèi)容是如何合并到_Layout.cshtml模板，從而形成一個(gè)完整的HTML返回到客戶端瀏覽器的。使用布局模板頁(yè)面，可以很容易進(jìn)行一個(gè)修改并應(yīng)用到所有頁(yè)面。

ASP.NET MVC 5 - 視圖

我們這一點(diǎn)（在本例中的"Hello from our View Template!"字符串）的"數(shù)據(jù)" 只是一段硬編碼。這個(gè)MVC 應(yīng)用程序有了一個(gè)"V"（視圖），也有了一個(gè)"C"（控制器），但還沒有"M"(模型)。不過(guò)稍后，我們將介紹如何創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)并檢索數(shù)據(jù)模型。

向AI問(wèn)一下細(xì)節(jié)

ASP.NET MVC 5 - 視圖

修改視圖和布局頁(yè)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽