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搭建一个见得网站只需要半天时 ...
随机推荐
- BFS 2025/1/16
BFS Basic 主要特点:空间复杂度较高,基于队列 经常用于求最优解的搜索题 经典模型:连通块,最短迷宫路径,曼哈顿距离 Question 01 [ACP2056 山峰与山谷] 主体是广搜模板 难 ...
- Windows桌面应用自动更新解决方案SharpUpdater5发布
SharpUpdater是什么 SharpUpdater是一套C#桌面应用自动更新解决方案.基本上,所有自动更新程序的原理都一样:生成一份文件清单,将本地清单与云上清单对比后进行全量更新或增量更新.本 ...
- 【虚拟机】VirualBox安装macOS系统
[虚拟机]VirualBox安装macOS系统 零.创建虚拟机 类型选择 Mac OS X 版本选择 macOS 10.13 High Sierra (64-bit) 注意:这边我设置的名称为 Mac ...
- 古老的BAT文件在windows下的编辑
直接上代码 rem echo choice /t 20 /d y /n >nul rem start/d "E:\service\exe" 8091.exe 8091 sta ...
- 康谋分享 | 确保AD/ADAS系统的安全：避免数据泛滥的关键！
为确保AD/ADAS系统的安全性,各大车企通常需要收集.处理和分析来自于摄像头.激光雷达等传感器的数据,以找出提高系统安全性和性能的方法.然而在数据收集过程中,不可避免地会出现大量无价值数据,造成数据 ...
- Golang解决fatal error: all goroutines are asleep - deadlock!
今天进行一个协程操作demo时总是报错 //workerpool.go package main import ( "fmt" "time" ) //工作线程 ...
- PACS千万家，好看耐用第一家---基于JAVA开发的跨平台PACS系统
随着2011年成功上线全院级PACS,期间软件版本不断的更新和优化,也得到了不少HIS厂商及同行友商的支持,目前已有医院客户达到了300多家遍布全国各个省份,随着时间的推移,PACS老客户的数据量在不 ...
- SSM整合3
目录 数据库 父工程 父工程目录结构 父工程pom.xml dao层 dao层目录结构 pom.xml domain dao 配置文件 mapper配置文件 applicationContext-da ...
- 代码随想录第四天 | Leecode 24. 两两交换链表、19.删除链表的倒数第N个节点、 面试题 02.07. 链表相交、 142.环形链表II
Leecode 24 两两交换链表 题目描述 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点.你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交换). 示例 1: 输入:h ...
- 提高Flutter应用性能的最佳实践
@charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...