之前大部分都在寫 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
<![CDATA[
@page "/Components/User1Component"
<ul>
<li>
Id:@UserData.Id
</li>
<li>
Name:@UserData.Name
</li>
<li>
Age:@UserData.Age
</li>
</ul>
@code {
}
]]>
User1Component.razor.cs
<![CDATA[
namespace Core6Tutorial.Pages.Components
{
public partial class User1Component: Microsoft.AspNetCore.Components.ComponentBase
{
[Microsoft.AspNetCore.Components.Parameter]
public Models.User UserData { get; set; }
}
}
]]>
這裡面就是讓主要控制流程的 Page 可以將 UserData 放入後在這 Razor Component 中進行呈現
3. 在主畫面中放入此 Razor 元件
ViewComponentTest.cshtml
<![CDATA[
@page
@model Core6Tutorial.Pages.ViewComponentTestModel
@{
}
<component type="typeof(Components.User1Component)" render-mode="Static" param-UserData=@Model.UserInMainPage />
]]>
ViewComponentTest.cshtml.cs
<![CDATA[
using Core6Tutorial.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Core6Tutorial.Pages
{
public class ViewComponentTestModel : PageModel
{
public User UserInMainPage;
public void OnGet()
{
UserInMainPage = new User { Name = "許當麻測試From Main Page", Id = "TESTID", Age = 12 };
}
}
}
]]>
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
