Blazor .NET与JS相互调用[实战]

Blazor .NET与JS相互调用

准备工作从 .NET 调用 JavaScript从 JavaScript 调用 .NET

准备工作

如果是Blazor Server 模式,需要将JS方法写入Pages/_Host.cshtml页面中;如果是Blazor Wasm 模式,需要将JS方法写入wwwroot/index.html页面中用<script></script>标签包裹起来

从 .NET 调用 JavaScript

html页面:

<script> function InitialCarousel() { var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' , width: '100%' //设置容器宽度 , height: '300px' , arrow: 'none' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); } </script>

在razor组件页面上方,键入以下代码:

@inject IJSRuntime jsRuntime

razor组件页面,在需要调用的地方执行以下代码(异步):

//InitialCarousel 为JS方法名 await jsRuntime.InvokeAsync<string>("InitialCarousel"); //或者(有返回值) var TValue = await jsRuntime.InvokeAsync<string>("InitialCarousel"); //或者(有参数) var TValue = await jsRuntime.InvokeAsync<string>("InitialCarousel","参数一","参数二"); //若是初始化后加载,建议使用自带的异步方法中: protected override async Task OnAfterRenderAsync(bool firstRender){}

从 JavaScript 调用 .NET

需求环境:被动触发JS执行代码后,手动调用将结果发送回.NET进行处理; html代码:

<script> //设置为全局变量 var TempPersons; //模拟被动触发事件给变量赋值 function btnOnclick() { TempPersons = "123"; } </script> <script> //手动调用此方法将结果传回给.NET 方法 function QueRenDaoRu(objInstance) { objInstance.invokeMethodAsync("SetAddressValue", TempPersons); } </script>

razor代码:

[JSInvokable] public void SetAddressValue(object obj) { //将obj转化为需要的类型进行处理 } //异步调用方法 private async Task QueRen() { //此处将当前页面对象传过去 await jsRuntime.InvokeAsync<string>("QueRenDaoRu", DotNetObjectReference.Create(this)); }

参考: 微软官方:在 ASP.NET Core Blazor 中从 .NET 方法调用 JavaScript 函数 微软官方:从 ASP.NET Core Blazor 中的 JavaScript 函数调用 .NET 方法 Blazor入门笔记（3）-C#与JS交互