[C#] ASP.NET Core 6.0 - 簡單實作 Razor 元件( Razor Component )

2022-12-13

之前大部分都在寫 WebForm 有一段 ASP.NET MVC 我沒有在專案上面使用

現在轉到 .NET CORE 下看到有一個東西叫做 Razor 元件 ,今天大概來測試一下關於 Razor Compoent  的東西



1. 我在 Pages  下建立一個 Components 的檔案夾並且加入 Razor 元件 User1Component.razor



之後下面有一個  @code{} 你可以直接在裡面撰寫 C# Code 但是我看到網路上有另一個做法

在同一個檔案夾下面建立一個同名的 User1Component.razor.cs 

這樣在 Visual Studio 中就會如圖合併起來



2.在來就是 Source Code 的部分

User1Component.razor


User1Component.razor.cs


這裡面就是讓主要控制流程的 Page 可以將 UserData 放入後在這  Razor Component 中進行呈現


3. 在主畫面中放入此 Razor 元件

ViewComponentTest.cshtml


ViewComponentTest.cshtml.cs


Result:



大概就寫到這,基本上看起來還有很多東西可以玩,之後有機會碰到在繼續寫


reference:

https://ml-software.ch/posts/using-razor-components-in-razor-pages-or-mv-views

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-6.0

https://ithelp.ithome.com.tw/articles/10293309?sc=iThelpR





當麻許的超技八 2014 | Donma Hsu Design.