在第14天的學習中,我們將重點了解ASP.NET MVC中的Razor布局。Razor是ASP.NET的一個模板語法,用於動態生成HTML。它允許你使用C#或VB.NET與HTML代碼進行交織,使得模板更加動態和可維護。
學習目標
瞭解什麼是Razor布局
如何創建和應用Razor布局
使用_Layout.cshtml來定義共用佈局
學習RenderBody、RenderSection的用法
瞭解什麼是Razor布局
在ASP.NET MVC中,Razor布局提供一種方式來建立一個共用的網站模板。這樣,你不需要在每一個視圖中重複相同的HTML結構。通過布局,你可以將共用的元素(如導航欄、頁腳等)抽取出來,放在一個中心的地方進行管理。
如何創建和應用Razor布局
創建一個名為_Layout.cshtml的新Razor視圉文件
在Views/Shared目錄中,創建一個新的Razor視圖,通常命名為_Layout.cshtml。
添加共用的HTML結構到_Layout.cshtml
在這個文件中,你可以添加共用的HTML元素,如、、等。
使用@RenderBody和@RenderSection
@RenderBody()用於輸出具體視圖的內容。
@RenderSection("SectionName", required: false)用於定義可選的區塊,如腳本或樣式。
應用布局到視圖
在具體的視圖(如Index.cshtml)中,使用Layout屬性來指定要使用的布局。
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
範例:_Layout.cshtml
<nav>
<!-- Navigation content -->
</nav>
<main>
@RenderBody()
</main>
<footer>
<!-- Footer content -->
</footer>
@RenderSection("Scripts", required: false)