[C#] .NET8 - Razor Pages 中的 Partial Layout：如何分離佈局並載入動態資料
2024-08-14
最近在做一些專案轉移，遇到以前的 .NET Framework 的 WebForm 轉到新的 .NET 8 上面
在 .NET Razor Pages 中，Partial Layout 是一種可以分離頁面佈局和邏輯的方法，
允將重複的 Layout 部分抽取到一個單獨的文件中，並根據需要載入不同的資料。這種方式不僅提升了代碼的重用性和可維護性，還使得頁面更加模組化和靈活。
有點類似以前 Web Component 的作法，但是不會有 Postback 的麻煩問題，筆記一下
1. 首先我在 Shared 下開一個 LayoutTest1.cshtml 內容如下
程式碼如下:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @model List<string> | |
| <ul> | |
| @foreach (var item in Model) | |
| { | |
| <li>@item</li> | |
| } | |
| </ul> | |
2. 在 Page 中引入的部份
.cshtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @page | |
| @model ProjectName.Pages.cp.labModel | |
| @{ | |
| Layout = null; | |
| } | |
| <partial name="~/Pages/Shared/LayoutTest1.cshtml" model="Model.Cates" /> | |
.cshtml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using Microsoft.AspNetCore.Mvc; | |
| using Microsoft.AspNetCore.Mvc.RazorPages; | |
| namespace ProjectName.Pages.cp | |
| { | |
| public class labModel : PageModel | |
| { | |
| public List<string> Cates { get; set; } | |
| public void OnGet() | |
| { | |
| Cates = new List<string>(); | |
| Cates.Add("分類1"); | |
| Cates.Add("分類2"); | |
| Cates.Add("分類3"); | |
| } | |
| } | |
| } | |
基本上，頗簡單的為何會特別寫一篇，之前發現竟然有朋友不知道有這東西，重複貼上一樣的東西
所以乾脆寫一篇，如果不需要動態放入資料期時該 Partial Layout 也可以直接去 render 一個 static 的 List 也行
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @using System.Globalization | |
| <div class="sidebar"> | |
| <h3>Recent Posts</h3> | |
| <div class="boder-bar"></div> | |
| <ul class="recent-post"> | |
| @foreach(var c in StaticCache.Top3Articles) | |
| { | |
| <li> | |
| <img alt="recent-posts-img" src="@c.P2"> | |
| <div> | |
| <span>@Html.Raw(c.Stamp.ToString("MMMM dd,yyyy", CultureInfo.GetCultureInfo("en-US")))</span> | |
| <a href="/Post?id=@c.Id">@c.Display</a> | |
| </div> | |
| </li> | |
| } | |
| </ul> | |
| </div> | |
筆記先到這裡..
reference:
https://learn.microsoft.com/zh-tw/aspnet/core/mvc/views/partial?view=aspnetcore-8.0