Blazor学习之旅(12) JavaScript与Blazor的互操作
大家好，我是Edison。
在上一篇我们学习了Blazor+SignalR开发简单的实时应用程序，这一篇我们了解下Blazor和JavaScript的互操作性。
有了Blazor还需要JavaScript？
我们都知道，在Blazor中我们可以轻松地使用C#组件而不是JavaScript来创建Web应用程序，但是，这并不代表我们不能继续使用JavaScript提供的便利。很
多时候，我们可能希望继续使用JavaScript提供的函数来实现某些功能，这时，我们可以用Blazor和JavaScript的互操作性（也称为JS互操作）来调用Blazor应用中的JavaScript库，并从C#代码直接调用JavaScript函数。当然，也可以使用JS互操作性从JavaScript函数调用C#方法。
这种场景经常发生在：有时候需要使用现有的JavaScript库，例如一些开源JavaScript库以专门的方式呈现组件和处理用户界面元素，又或者你可能拥有一些开源JavaScript库的开发调试经验，是个JavaScript库的老鸟了，你希望重用该JavaScript代码而不是将其转换为C#。那么，这个时候，你可能就需要用上JS互操作性了。
接下来，我们就来看看如何在Blazor应用中加载JavaScript代码，又如何在JavaScript中调用.NET代码。
在Blazor中调用JavaScript代码
加载方式
将JavaScript添加到Blazor应用的方式与添加到标准HTML Web应用一样，都是使用HTML的<script>元素。我们可以在 Pages/_Layout.cshtml 文件或 wwwroot/index.html文件中的现有 <script src="_framework/blazor.*.js"></script> 标记后添加 <script> 标记即可。
NOTE：最好不要将JavaScript脚本放在页面的<head>元素中。
将JavaScript库或脚本添加之后，我们就可以在C#代码中通过使用 IJSRuntime 接口调用JavaScript函数了。不过，你需要提前将 IJSRuntime 实例注入Blazor页面中。
IJSRuntime 接口用于调用JavaScript代码的 InvokeAsync（有返回值） 和 InvokeVoidAsync（无返回值） 两个方法。顾名思义，这两个方法都是异步的，因此你需要在使用时标注await来获取结果。
InvokeAsync 或 InvokeVoidAsync 方法的接收参数，第一个是要调用的JavaScript函数的名称，比如 confirm 这个方法名。第二个则是这个函数所需的任何参数。
需要注意的是：
JavaScript函数必须属于 window 作用域 或 window 子作用域；
传入的参数必须是可序列化为JSON的；
DEMO
假设我们已经有了一个Blazor Server应用程序，你可以从这里获取Code：https://github.com/Coder-EdisonZhou/BlazorSamples。
这里我们改写一下经典的Counter页面，将原来的按钮直接加一改为调用JavaScript的confirm函数弹出一个确认框，确认后再加一。
为了实现这个功能，我们需要改写如下：
Step1. 注入IJSRuntime抽象实例
[Inject]
public IJSRuntime JavaScript { get; set; }
Step2. 改写原来的button按钮调用IncrementCountConfirmation方法
@* <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> *@
<button class="btn btn-primary" @onclick="@(async() => await IncrementCountConfirmation())">Click me</button>
Step3. 实现IncrementCountConfirmation方法
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
[Inject]
public IJSRuntime JavaScript { get; set; }
private void IncrementCount()
{
currentCount += IncrementAmount;
}
private async Task IncrementCountConfirmation()
{
if (await JavaScript.InvokeAsync<bool>(
"confirm",
"Do you want to increment the count?"))
{
currentCount += IncrementAmount;
}
}
}
最终的效果如下图：
那么，如果想要使用第三方JavaScript库的函数该如何做呢？
<script src="_framework/blazor.*.js"></script> 标记后添加你需要引入的JavaScript库即可。在JavaScript中调用C#代码
加载方式
在JavaScript中若想调用C#代码可以使用 DotNet实用工具类（JS互操作的一部分）来运行Blazor代码中定义的.NET方法。在这个工具类中提供了 invokeMethod 和 invokeMethodAsync 两个函数，顾名思义，一个是同步的，另一个是异步的。
invokeMethodAsync方法返回 JavaScript Promise。
需要注意的是：
要调用的.NET方法需要使用 JSInvokableAttribute 标记
且该方法必须是 public的
且该方法任何参数都必须可序列化为JSON
DEMO
这里我们还是改写一下刚刚的Counter页面，增加一个button用于在JavaScript中调用.NET静态方法。
Step1. 添加HTML与JavaScript
<h1>Call .NET Example From JavaScript</h1> <p>
<button onclick="returnArrayAsync()">
Trigger .NET static method
</button>
</p> <script>
window.returnArrayAsync = () => {
DotNet.invokeMethodAsync('EDT.BlazorServer.App', 'ReturnArrayAsync')
.then(data => {
console.log(data);
});
};
</script>
Step2. 添加.NET方法并标注 JSInvokable
[JSInvokable]
public static Task<int[]> ReturnArrayAsync()
{
return Task.FromResult(new int[] { 1, 2, 3 });
}
效果演示：
那么，如果是.NET实例方法，该如何调用呢？这个就稍微复杂一丢丢了。
还是来个Demo吧：
Step1. 添加HTML和JavaScript示例：
<h1>Call .NET Example From JavaScript - Sample 2</h1> <p>
<label>
Name: <input @bind="name" />
</label>
</p> <p>
<button @onclick="TriggerDotNetInstanceMethod">
Trigger .NET instance method
</button>
</p> <p>
@result
</p> <script>
window.sayHello = (dotNetHelper) => {
return dotNetHelper.invokeMethodAsync('GetHelloMessage');
};
</script>
Step2. 添加.NET方法并标注 JSInvokable，还需要声明一个 DotNetObjectReference对象便于进行资源释放，以免引起内存泄露的问题；
@code {
[Inject]
public IJSRuntime JavaScript { get; set; }
private string? name;
private string? result;
private DotNetObjectReference<Counter>? objRef;
protected override void OnInitialized()
{
objRef = DotNetObjectReference.Create(this);
}
public async Task TriggerDotNetInstanceMethod()
{
result = await JavaScript.InvokeAsync<string>("sayHello", objRef);
}
[JSInvokable]
public string GetHelloMessage() => $"Hello, {name}!";
public void Dispose()
{
objRef?.Dispose();
}
}
效果演示：
小结
本篇，我们了解了什么是Blazor中的JS互操作，并通过两个DEMO了解了如何在Blazor中加载JavaScript代码 以及 如何在JavaScript中调用.NET代码，相信对你会有所帮助。
参考代码
GitHub：https://github.com/EdisonChou/BlazorSamples/tree/main
Blazor学习之旅(12) JavaScript与Blazor的互操作的更多相关文章
- python学习之旅1-2（基础知识）
三,python基础初识. 1.运行python代码. 在d盘下创建一个t1.py文件内容是: print('hello world') 打开windows命令行输入cmd,确定后 写入代码pytho ...
- 笔记-JavaWeb学习之旅12
会话技术 Cookie:客户端会话技术,将数据保存到客户端 package com.data.Cookie; import javax.servlet.ServletException; import ...
- 学习MASA第一天：MASA Blazor TEST项目创建
个人博客地址: https://note.raokun.top 拥抱ChatGPT,国内访问网站:https://www.playchat.top 学习MASA第一天:MASA Blazor TEST ...
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- [推荐]大量 Blazor 学习资源（二）
继上一篇<[推荐]大量 Blazor 学习资源(一)>之后,社区反应不错,但因个人原因导致这篇文章姗姗来迟,不过最终还是来了!这篇文章主要收集一些常用组件.书籍和电子书. 资料来源:htt ...
- WCF学习之旅—实现支持REST客户端应用（二十四）
WCF学习之旅—实现REST服务(二十二) WCF学习之旅—实现支持REST服务端应用(二十三) 在上二篇文章中简单介绍了一下RestFul与WCF支持RestFul所提供的方法,及创建一个支持RES ...
- WCF学习之旅—WCF服务的Windows 服务程序寄宿（十一）
上接 WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) 七 WCF服务的Windows 服务程序寄宿 这种方式的服务寄宿,和IIS一样有一个一样 ...
- WCF学习之旅—WCF第二个示例（五）
二.WCF服务端应用程序 第一步,创建WCF服务应用程序项目 打开Visual Studio 2015,在菜单上点击文件—>新建—>项目—>WCF服务应用程序.在弹出界面的“名称”对 ...
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- 180分钟的python学习之旅
最近在很多地方都可以看到Python的身影,尤其在人工智能等科学领域,其丰富的科学计算等方面类库无比强大.很多身边的哥们也提到Python非常的简洁方便,比如用Django搭建一个见得网站只需要半天时 ...
随机推荐
- Supergateway：MCP服务器的远程调试与集成工具
Supergateway 是一款专为 MCP(Model Context Protocol)服务器设计的远程调试与集成工具,通过 SSE(Server-Sent Events)或 WebSocket( ...
- 用正则表达式做爬取--java进阶day06
1.String类中与正则有关的方法 replaceAll方法中要填入两个正则表达式,第一个是我们要修改的字符串,第二个则是我们要改成以后的字符串 如下图,出师表中存在很多数字,我们要删去这些数字,就 ...
- 【QT】解决生成的exe文件出现“无法定位程序入口”或“找不到xxx.dll”的问题
[QT]解决生成的exe文件出现"无法定位程序入口"或"找不到xxx.dll"的问题 零.问题 使用QT编译好项目后,想直接在文件资源管理器中运行exe程序或想 ...
- halcon 深度学习教程（三） 目标检测之水果分类
原文作者:aircraft 原文链接:halcon 深度学习教程(三) 目标检测之水果分类 - aircraft - 博客园 深度学习教程目录如下,还在继续更新完善中 深度学习系列教程目录 有兴趣可以 ...
- datasnap的监督功能【2】-管理Session
1.服务端的Session是有TDSSession定义的.TDSSession提供了许多有用的方法和特性,再开发室取得服务or重要信息. 如Session状态.安排Session独享定时or自动执行工 ...
- 团队项目：杰杰Bond团队成员介绍
项目 内容 这个作业属于哪个课程 2025年春季软件工程(罗杰.任健) 这个作业的要求在哪里 [T.1] 团队项目:团队成员介绍 我在这个课程的目标是 学习软件工程相关知识,培养编程和团队协作能力,做 ...
- iOS自动化测试环境搭建总结
1.关于iOS真机和模拟器自动化环境搭建 参考博文: Appium+Python3+iOS真机环境搭建 iOS自动化测试:mac下iOS10 appium测试环境的搭建 IOS + Appium自动化 ...
- 为什么 G1 垃圾收集器不维护年轻代到老年代的记忆集？
为什么 G1 垃圾收集器不维护年轻代到老年代的记忆集? 在 G1 垃圾收集器中,不维护年轻代到老年代的记忆集(Remembered Set, RSet)是因为其设计特点和优化策略使得这种记忆集的维护既 ...
- Git错误，fatal: The current branch master has no upstream branch. To push the current branch and set the remote as upstream
问题:当我执行git push命令的时候,报错如下: fatal: The current branch master has no upstream branch. To push the curr ...
- ZBrush2025.1.3 中文版【ZBrush2025版下载】附安装教程
通过网盘分享的文件:Zbrush软件安装包下载链接: https://pan.baidu.com/s/1BXzRmKUuO1ABpxA124u3mg?pwd=6666 提取码: 6666 ZBrush ...