添加第一個(gè)頁(yè)面在本節(jié)中，你將添加一個(gè) About頁(yè)面，并使用 tag helper 提供從主頁(yè)頁(yè)指向它的鏈接。你將使用 ASP.NET Core 腳手架系統(tǒng)來(lái)創(chuàng)建這個(gè)頁(yè)面，該頁(yè)面由 VS Code 調(diào)用終端執(zhí)行命令進(jìn)行創(chuàng)建。 如果應(yīng)用程序從上一節(jié)一直運(yùn)行，你可以打開(kāi)另一個(gè)終端(Ctrl Shift ')，或者你也可以按 Ctrl C 關(guān)閉 Web 服務(wù)器。完成這個(gè)操作后，執(zhí)行以下的命令： dotnet new page --name About --namespace Bakery.Pages --output Pages
這個(gè)命令將生成帶有 PageModel 文件的 Razor Page。你需要指定名字空間，否則使用默認(rèn)值:MyApp.Namespace。 同樣的，如果你沒(méi)有將 Pages 指定為輸出目錄，則在命令執(zhí)行的的目錄生成頁(yè)面。 確認(rèn)頁(yè)面已經(jīng)創(chuàng)建成功，打開(kāi) About.cshtml 文件(頁(yè)面內(nèi)容)，修改其內(nèi)容如以下所示： @page
@model Bakery.Pages.AboutModel
@{
ViewData["Title"] = "About Us";
}
<section id="main">
<h1>A little bit about Fourth Coffee</h1>
<p>
Fourth Coffee was founded in 2010 and delivers coffee and fresh baked goods right to your door.
In another life, Bill Baker was a developer by day and pastry chef by night.
But soon Bill's innate skills with all things involving butter, flour and sugar put him
even more in demand than his programming talents and what started out as a way to satisfy
his own sweet tooth became all-consuming. Fourth Coffee is not only a candy-coated wonderland
of coffee, pastries, cookies and cakes, it also honors his tech background by employing a state
of the art online ordering system that makes it easy for anybody with internet access to
order his all natural, locally-sourced confections and have them delivered to their
door within 24 hours.
</p>
</section>
這是 Web Pages 模板的原始內(nèi)容。唯一的區(qū)別是文件頂部的 @page 指令, 表明這是一個(gè) Razor Page，@ model 聲明，以及使用 ViewData 屬性來(lái)保存頁(yè)面的標(biāo)題。 在 Web Pages 中，這是由 PageData 屬性處理的，該屬性具有基于動(dòng)態(tài)類(lèi)型的版本。 Razor Pages 背后的團(tuán)隊(duì)已經(jīng)遠(yuǎn)離使用動(dòng)態(tài)類(lèi)型。 添加導(dǎo)航主站點(diǎn)導(dǎo)航位于 Layout 頁(yè)面中，它作為所有引用它的其他頁(yè)面的模板，想要修改的話(huà)，打開(kāi)位于 Pages/Shared 文件夾中的 _Layout.cshtml 文件， 找到如下所示的代碼行： <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Page1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Page2</a>
</li>
它們從第30行開(kāi)始，修改為如以下所示的樣子： <li class="nav-item">
<a class="nav-link text-dark" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-page="/About">About</a>
</li>
運(yùn)行應(yīng)用程序(dotnet run)并導(dǎo)航到 https://localhost:5001。然后點(diǎn)擊 About 鏈接以確保導(dǎo)航正常工作。應(yīng)該可以到達(dá)剛才所創(chuàng)建的頁(yè)面：
 鏈接由 tag helper 生成。 這些組件旨在針對(duì) HTML 中的特定標(biāo)記。 錨 tag helper 以 HTML a 元素為目標(biāo)。 您不是提供指向內(nèi)部頁(yè)面的 href 屬性， 而是提供一個(gè)asp-page屬性， 該屬性采用頁(yè)面的路徑 ，相對(duì)于根頁(yè)面文件夾。 框架為結(jié)果超鏈接構(gòu)造正確的URL。 原始標(biāo)記助手中的 asp-area 屬性被分配一個(gè)空字符串。 您未使用此示例中的區(qū)域，因此已刪除該屬性以減少混亂。 完成最后，在本節(jié)中，您將稍微調(diào)整布局頁(yè)面以包含品牌形象并添加一些樣式。 您可以從我在GitHub上托管的 original bakery template 中獲取圖像文件。 在wwwroot文件夾中創(chuàng)建名為images的文件夾。 在其中， 創(chuàng)建另一個(gè)名為products的文件夾， 并在其中創(chuàng)建另一個(gè)名為thumbnails的文件夾。 然后將圖像復(fù)制到正確的文件夾。 最終的文件夾結(jié)構(gòu)應(yīng)如下所示：
 使用 navbar-brand CSS類(lèi)更改錨標(biāo)記以包含突出顯示部分中顯示的圖像： <body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-page="/Index">
<img class="img-fluid" src="/images/brand.png" alt="Fourth Coffee" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
最后，添加以下樣式的 site.css 文件，可在 wwwroot/css 中找到： .navbar-nav {
justify-content: flex-end;
}
Bootstrap 4 使用 CSS Flexible Box Layout（也稱(chēng)為 FlexBox）來(lái)控制布局， 而不是以前版本的Bootstrap中使用的CSS浮動(dòng)。
現(xiàn)在， 在瀏覽器中刷新頁(yè)面，使用 Ctrl R 清除樣式表的任何緩存版本。 它應(yīng)該如下所示：
摘要在本節(jié)中，您已經(jīng)了解了如何使用 scaffolding 命令添加 Razor Pages。 您還使用了錨標(biāo)記幫助程序來(lái)調(diào)整網(wǎng)站的導(dǎo)航， 并為樣式表添加了一些樣式。 在下一節(jié)中，您將通過(guò)為應(yīng)用程序創(chuàng)建 Model 并添加 Entity Framework Core 來(lái)開(kāi)始處理數(shù)據(jù)。
|
