(14/30)Blazor系列:JavaScript interop(互操作)

2021-12-22 Dotnet9

雖然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[1] 官網下載文件，接著將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版本[2]可以使用，方法大同小異，如果真的不想碰JS 的人可以試試看。

最後來個本文效果動圖，結束本文：

引用：

Blazor JavaScript interoperability (JS interop)[3]Call JavaScript functions from .NET methods in ASP.NET Core Blazor[4]HANDLING BUTTONS (CONFIRM, DENY, CANCEL)[5]Day 20：Javascript interop[6]JavaScript Promise 全介紹[7]Support ObservableLike #1982[8]Blazor - Making a Promise in JS - SweetAlert2 Confirmation Dialog[9]SweetAlert - upgrading-from-1x[10]

出處：iT邦幫忙

作者：StrayaWorker

原文連結：https://ithelp.ithome.com.tw/articles/10263798

編輯：沙漠盡頭的狼

註：本文代碼通過 .NET 6 + Visual Studio 2022重構，SweetAlert使用的2.0版本，和原文出入較大，可點擊上面的原文連結與重構後代碼比較學習，謝謝閱讀。

參考資料[1]

SweetAlert2: https://sweetalert.js.org

[2]

Blazor版本: https://github.com/Basaingeal/Razor.SweetAlert2

[3]

Blazor JavaScript interoperability (JS interop): https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-5.0

[4]

Call JavaScript functions from .NET methods in ASP.NET Core Blazor: https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-5.0

[5]

HANDLING BUTTONS (CONFIRM, DENY, CANCEL): https://sweetalert2.github.io/#handling-buttons

[6]

Day 20：Javascript interop: https://ithelp.ithome.com.tw/articles/10249044

[7]

JavaScript Promise 全介紹: https://wcc723.github.io/development/2020/02/16/all-new-promise/

[8]

Support ObservableLike #1982: https://github.com/sweetalert2/sweetalert2/issues/1982

[9]

Blazor - Making a Promise in JS - SweetAlert2 Confirmation Dialog: https://www.youtube.com/watch?v=P1nMiVpptGk

[10]

SweetAlert - upgrading-from-1x: https://sweetalert.js.org/guides/#upgrading-from-1x

相關焦點

  • NCC BootstrapBlazor 6.1.0 發布通告
    MenuItem 參數 Component 改為 Template 與其他組件保持一致，數據類型由 BootstrapDynamicComponent 改為 RenderFragment 與微軟保持一致feat(#I4KNKK): 原 BlazorLogger 更改為 ErrorLogger由 NET5.0 升級到 NET6.0 集成全局異常捕獲與錯誤日誌處理為一體參考示例：https://www.blazor.zone
  • 第一篇:JavaScript基本語法
    <script>標籤的type屬性表示腳本語言是javascript。<script>標籤可放置在HTML 頁面的<body>或者<head>標籤內。例如：document對象就是瀏覽器提供的對象，它可以讓開發人員通過JS腳本，操作 HTML 頁面中的所有元素。
  • JavaScript:學會toString()字符串
    javascript中的toString()方法，主要用於Array、Boolean、Date、Error、Function
  • python測試開發django-120.bootstrap-table表格添加操作按鈕(查看/修改/刪除)
    /p/15242055.html在columns最後添加一個操作項,formatter屬性可以幫助我們更加靈活的顯示表格中的內容# 作者-上海悠悠 QQ交流群:717225969# blog地址 https://www.cnblogs.com/yoyoketang/var columns = [ {
  • 初見成效,使用Js操作DOM對象
    二、JavaScript操作DOM對象1、什麼是DOMDOM：Document Object Model 文檔對象模型要實現頁面的動態交互效果，BOM操作遠遠不夠，需要操作如何操作 html，就是 DOM。簡單的說，DOM提供了用程序動態控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。DOM處於javascript 的核心地位上。
  • 20個常用的JavaScript簡寫技巧
    箭頭函數 參考:JavaScript Arrow function https://jscurious.com/javascript-arrow-function/ 8. 模板字符串 我們一般使用 + 運算符來連接字符串變量。
  • 精讀《高性能 javascript》
    前言本期我來給大家推薦的書是《高性能JavaScript》，在這本書中我們能夠了解 javascript 開發過程中的性能瓶頸，如何提升各方面的性能
  • JavaScript代理Proxy的驚人力量
    Proxy對象可以讓你為另一個對象創建一個代理，它可以攔截和重新定義該對象的基本操作。在解釋什麼是Proxy的時候，說它可以創建一個Proxy，這有點搞笑。當然，他們並沒有說錯，但是我們可以簡化這個說法，讓它更加友好。Proxy對象使你能夠包裝目標對象 通過這樣可以攔截和重新定義該對象的基本操作。
  • 1 分鐘讀完《10 分鐘學會 JavaScript 的 Async/Await》
    閱讀原文：JavaScript Async/Await Explained in 10 Minutes(https://tutorialzine.com/2017/07/javascript-async-await-explained)討論地址：10 分鐘學會 JavaScript 的 Async/Await(https://github.com/dev-reading/
  • 重新認識JavaScript中的true和false
    這兩個操作符會同時比較對象的類型和值。var l = (false == 0); // truevar m = (false === 0); // false在你寫JavaScript代碼的時候，真值和假值讓你痛苦過嗎？作者簡介：Craig Buckler是一名英國特約web顧問，他早在1995年就 搭建了一個在IE 2.0 上面展示的頁面。
  • 2020年11個熱門JavaScript 庫
    1：D3.jsstar:91.5k文檔：https://d3js.org/GitHub地址：https://github.com/d3/d3一個基於數據操作文檔的js數據可視化框架，最流行的可視化庫之一。
  • JavaScript模擬輪播圖效果
    div{       border: 1px solid white;       width:600px ;       height:400px;       margin: auto;       text-align: center;     }   </style>   <script type="text/javascript
  • JavaScript函數 - 遞歸
    >2.找出一個臨界值，n==0時，就不需要列印了，直接return;即可3.不等於0時，直接document.write列印hello world4.然後緊跟著return print(n-1); 依次列印<script type = "text/javascript
  • 體驗魅族17系列互傳功能,除了便捷,這一系統設置真的貼心
    有了解數碼資訊的朋友應該知道，為了提升安卓手機之間的文件傳輸效率，部分安卓手機廠商建立並加入了互傳聯盟，這其中就包括了我們所熟知的魅族。加入互傳聯盟後，魅族旗下的旗艦機型——魅族17系列自然也具備強大的互傳功能，接下來就帶大家具體了解一下魅族17系列上的互傳功能。
  • JS版漢字與拼音互轉終極方案,附簡單的JS拼音輸入法
    （點擊上方公眾號，可快速關注）作者：我是小茗同學連結：www.cnblogs.com/liuxianan/p/pinyinjs.html前言網上關於JS實現漢字和拼音互轉的文章很多如果你只需要獲取拼音首字母<script type="text/javascript" src="pinyin_dict_firstletter.js"></script><script type="text/javascript" src="pinyinUtil.js"></script> <
  • 英雄互娛《新三國志》日本市場表現強勁,持續保持國內出海手遊TOP 30
    近日，移動應用數據分析公司Sensor Tower發布了2019年1月份的中國手遊出海收入TOP 30，其中英雄互娛在日本發行的首款產品
  • 程式設計師必須掌握的 12 個 JavaScript 技能!
    本文將與大家分享 12 個實用的 JavaScript 技能，未來我也將在 Github 的 JS Tips&Tidbits 倉庫（https://github.com/nas5w/javascript-tips-and-tidbits）中持續更新此概念列表。
  • 用10行JavaScript代碼製作一款漂亮的視差效果
    英文 | https://www.ibrahima-ndaw.com/blog/parallax-effect-with-10-lines-of-javascript
  • JavaScript運算「程式設計師培養之路第八天」
    第一節 算術運算通過運算操作數據（事物）的行為，運算表示行為。例：蝸牛爬井，一口井10米，蝸牛白天爬3米，晚上滑2米，蝸牛幾天爬出？javascript第四節 關係運算關係運算：> < <= >= != == === ==和=== !=和!
  • 炫酷黑色電影資訊博客網頁模板(電影主題-HTML+CSS+JavaScript-前端大作業)
    等等一系列問題。扭站騰鋤終抗閻枚指趁盛醛磷諾進液區築些驕朵籃漸脛惡俊墾灌正住迎森蒜葫露旨棄痛聞齋穴記腦腸亭疑壺妄枷廟龐紅埂通彌情招肝坎橢草勘拖楞醉秈姿鉸軍拚出濺理氈芍磁茨搏掙懇墳召入廳鍋擰獵廷幼卸乃褐河炕傳翼船葉錢憤你想要解決的問題，在專欄Html+Css+JavaScript期末大作業都能滿足你的需求。