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

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

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

html页面:

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

@inject IJSRuntime jsRuntime

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

//InitialCarousel 为JS方法名
await jsRuntime.InvokeAsync("InitialCarousel");
//或者(有返回值)
var TValue = await jsRuntime.InvokeAsync("InitialCarousel");
//或者(有参数)
var TValue = await jsRuntime.InvokeAsync("InitialCarousel","参数一","参数二");

//若是初始化后加载,建议使用自带的异步方法中:
protected override async Task OnAfterRenderAsync(bool firstRender){}

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

razor代码:

[JSInvokable]
public void SetAddressValue(object obj)
{
	//将obj转化为需要的类型进行处理
}

//异步调用方法
private async Task QueRen()
{
	//此处将当前页面对象传过去
    await jsRuntime.InvokeAsync("QueRenDaoRu", DotNetObjectReference.Create(this));
}

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