分类:
ASP.NET
1、创建Components文件夹，在文件夹下创建_Imports.razor全局组件相当于视图组件_ViewImports.cshtml和显示组件MyComponent.razor
2、在全局组件中引入库管理包不然在MyComponent使用不了
@using System.Net.Http
@using WebApplication1
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components
3、在MyComponent使用简单的c#代码便于测试
@page "/MyComponent"
<h3>Counter</h3>
<label>Counter:@Counter</label>
<button @onclick="Increase">Increase</button>
@code {
[Parameter]
public int Counter { get; set; }
void Increase()
{
Counter++;
}
}
4、在首页视图你自定义的视图中通过component TagHelper来调用Razor Component
<component type="typeof(MyComponent)" param-Counter="0" render-mode="ServerPrerendered"></component>
5、在视图中中引入在 _Layout.cshtml引入@RenderSection
@section Scripts {
<script src="_framework/blazor.Server.js"></script>
}
@RenderSection("Scripts", required: false)
也可以直接在_Layout.cshtml引入做全局处理
<script src="_framework/blazor.server.js"></script>
6、在中间件启用服务
services.AddRazorPages();
services.AddServerSideBlazor();//启用服务端blazor支持
endpoints.MapRazorPages();
endpoints.MapBlazorHub();// js,singalr
处理好之后进行测试
评价
