tnblog
首页
视频
资源
登录

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

5870人阅读 2022/1/2 10:48 总访问:408922 评论:0 收藏:0 手机
分类: 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 
处理好之后进行测试



评价
当你知道迷惑时,并不可怜,当你不知道迷惑时,才是最可怜的。
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术