iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0

在第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)

上一篇
第13天:深入模型綁定
系列文
30天-從新開始學C#+包含建出一個CRUD產品14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言