幽梦紫曦

在CoreWeb(视图模型控制器)中调用Blazor组件

电脑版发表于:2022/1/2 10:48
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 
处理好之后进行测试



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢