文章
(14/30)大家一起学Blazor:JavaScript interop(互操作)
虽然Blazor 不需要用到JavaScript,但某些已有的js库 还是很方便,不能因为不想用JavaScript 就全部舍弃,Blazor 就提供了调用JavaScript 的方法,这种情况称为JavaScript interoperability(简称JavaScript interop)。这篇就来实现Delete 按钮的提醒窗口,因为删除是很重要的功能,不能让使用者轻轻一按就轻易删除。
Day 07 有说过,Blazor 有内置的JavaScript Service,所以我们不用去Program.cs 依赖注入,在想使用的页面注入即可。如果想在razor组件注入,只要输入@inject IJSRuntime js
即可。
接着将原本的ReturnPostId()
改名为DeletePost()
,类型改为Task
,里面的逻辑稍作修改,可以看到JavaScript
也是用EventCallback
的方式,除了会回传值的InvokeAsync
,还有不回传值的InvokeVoidAsync
可以用。第一个参数放的是JS方法
的名字,如果该JS方法
有要求参数,就依序放在后面即可。
那如果想要自己写C# 类把这段程序封装起来,好享受强类型的优势呢?Blazor 也提供了做法。首先在Shared
文件夹新增JsInteropClasses.cs
,里面只有做三件事,依赖注入、原本的confirm 方法以及Dispose
。
接着在PostBase.razor.cs
一开始将JS 注入进JsInteropClasses
且继承IDisposable
。
然后将原本的方法改成刚刚封装好的_jsClass.Confirm()
方法,最后再重写Dispose
方法。
可以看到跟原本直接在PostBase.razor.cs
调用JS 的confirm
是一样的结果,差点忘了在Post.razor
里修改Delete按钮的点击事件回调方法为DeletePost
。
在Blazor 有4个地方可以载入JS文件,分别为:<head>
、<body>
、外部JS script
以及在Blazor 启动后载入,都是将需要的<script>
置于_Layout.cshtml
(Blazor Server)或是index.html
(Blazor WebAssembly),比较特别的是最后一种,所以这边说明一下。
我们在_Layout.cshtml
原本的_framework/blazor.server.js
底下加入自己的script,里面做的事情很简单只有console.log
文字,要特别注意的是原本的script 要加入一个attribute autostart="false"
,这是告诉Blazor 不要自动启动程序,如果不加这个attribute,就会得到这样的错误讯息。
不过目前的删除窗口太难看了,我们来换个套件,笔者看许多人使用了SweetAlert2
,所以也来试试看。
首先去SweetAlert2 官网下载文件,接着将sweetalert.js
放在<head>
,然后把原本的第4种Blazor.start()
移除,记得_framework/blazor.server.js
的autostart="false"
也要移除;或是直接写在Blazor.start()里面也可以。
再加入自己的<script>
,这边比较特别的是用了Promise
,Promise 是用来让异步更好用的语法,resolve
的意思是执行成功后会回传的内容(这边执行成功的意思是没有异常,也就是不论按下确定还是取消都会回传)。
Confirm
方法则改成调用刚定义好的SweetConfirm()
。
点击Delete 按钮,按下确定,willDelete
为true,于是resolve
就将willDelete
传回去,JsInteropClasses
的Confirm
成功收到了true
(这里有点小问题,点击确定后,先弹出了删除成功,JsInteropClasses
才收到的true
,后面有机会站长再优化)。
如果点击取消,willDelete
是null。
Promise 是前端避不掉的语法,有兴趣的人可以看笔者附上的链接,笔者原本打算用Observable 跟subscribe 语法,不过SweetAlert2 尚未实现。
另外SweetAlert2 目前也有Blazor版本可以使用,方法大同小异,如果真的不想碰JS 的人可以试试看。
最后来个本文效果动图,结束本文:
引用:
- Blazor JavaScript interoperability (JS interop)
- Call JavaScript functions from .NET methods in ASP.NET Core Blazor
- HANDLING BUTTONS (CONFIRM, DENY, CANCEL)
- Day 20:Javascript interop
- JavaScript Promise 全介绍
- Support ObservableLike #1982
- Blazor - Making a Promise in JS - SweetAlert2 Confirmation Dialog
- SweetAlert - upgrading-from-1x
注:本文代码通过 .NET 6 + Visual Studio 2022重构,SweetAlert使用的2.0版本,和原文出入较大,可点击原文链接与重构后代码比较学习,谢谢阅读。
- 本文Markdown:点击浏览
相关文章
- (9/30)大家一起学Blazor:Parameters
- 搞了个Blazor工具站,域名一次性买了10年!
- (23/30)大家一起学Blazor:ASP.NET Core Identity(3)
- Blazor开发小游戏?趁热打铁上!!!
- (3/30)大家一起学Blazor:Blazor Server和Blazor WebAssembly的差异
- (4/30)大家一起学Blazor:Component及路由介绍
- (28/30)大家一起学Blazor:Policy-based authorization
- 完美:C# Blazor中显示Markdown并添加代码高亮
- (29/30)大家一起学Blazor:Blazor单元测试
- Blazor Server 和 WebAssembly 应用程序入门指南