從 JavaScript 呼叫 C# 函式

Mehvish Ashiq 2024年2月15日
從 JavaScript 呼叫 C# 函式

本教程重點介紹如何使用 Blazor 從 JavaScript 程式碼呼叫 C# 函式。

Blazor 是 Browser & Razor 的變種,它是一個開源和免費的 Web 框架,允許我們使用 C# 開發互動式 Web 使用者介面 (UI)。

我們使用 Microsoft Visual Studio 製作 Blazor 應用程式;你也可以從這裡下載。

使用 Blazor 從 JavaScript 程式碼呼叫 C# 函式

讓我們建立一個 Blazor 應用程式來逐步開始編碼。

開啟 Microsoft Visual Studio 並選擇建立新專案

從 javascript 呼叫 c# 函式 - blazor 螢幕一

選擇 Blazor WebAssembly 應用,然後單擊 下一步

從 javascript 呼叫 c# 函式 - blazor 螢幕二

寫下你的專案名稱,選擇要儲存的位置,選中核取方塊以將解決方案保留在同一目錄中,然後單擊下一步

從 javascript 呼叫 c# 函式 - blazor 螢幕三

在下一個螢幕上保持預設設定,然後單擊建立。它將為我們建立預設檔案和資料夾。

請參閱下面給出的螢幕截圖。

從 javascript 呼叫 c# 函式 - blazor 螢幕五

wwwroot 中建立一個名為 scripts 的新資料夾。右鍵單擊 scripts 資料夾並轉到 Add->Razor Component 建立一個 JavaScript 檔案。

它開啟一個新視窗,選擇 JavaScript File,將其名稱寫為 example.js,然後單擊 Add

從 javascript 呼叫 c# 函式 - blazor 螢幕六

從 javascript 呼叫 c# 函式 - blazor 螢幕七

使用以下程式碼行將 JavaScript 檔案附加到 index.html(它位於 wwwroot)。

<script src="scripts/example.js"></script>

從 javascript 呼叫 c# 函式 - blazor 螢幕八

右鍵單擊 Pages 資料夾並轉到 Add->Razor 元件。從彈出的視窗中選擇 Razor Component,將其命名為 CallDotNetFromJavaScript.razor,然後單擊 Add

從 javascript 呼叫 c# 函式 - blazor 螢幕九

右鍵單擊 Pages 資料夾並再次轉到 Add->Razor Component,但這次選擇 Class,將其命名為 CallDotNetFromJavaScript.razor.cs,然後單擊 Add

從 javascript 呼叫 c# 函式 - blazor 螢幕十

現在,你可以在 Pages 資料夾中看到兩個檔案 CallDotNetFromJavaScript.razorCallDotNetFromJavaScript.razor.cs,如下所示。

從 javascript 呼叫 c# 函式 - blazor 螢幕十一

現在,通過新增以下程式碼來修改 CallDotNetFromJavaScript.razor 檔案。

@page
    '/dotnetinjs' < h1 >
    Learn How to Call DotNet From JavaScript Code</h1>
<br />

    < div class
= 'row' > < div class
= 'col-md-4' > <h4>Call static method from JS</h4>
 	</div>< div class
= 'col-md-2' > < button type = 'button' class
= 'btn btn-success' onclick =
    'jsMethods.checkNumber()' > Check Number</button>
 	</div>< div class
= 'col-md-4' > < span id = 'string-result' class
= 'form-text' > </span>
 	</div></div>
<hr />

通過新增以下程式碼修改 Index.razor 檔案。

@page
    '/' < ul > <li><a href = '/dotnetinjs'>Call from JavaScript</a>
 	</li><
    /ul>

CallDotNetFromJavaScript.razor.cs 檔案中建立一個靜態方法(請記住,我們可以通過這種技術呼叫靜態方法和那些作為例項化類的方法)。

我們只是實現了一個函式 checkNumber(int number) 來檢查給定的數字是偶數還是奇數。

關鍵是理解 [JSInvokable] 屬性;它表示緊隨其後的方法 ([JSInvokable]) 將從 JavaScript 程式碼呼叫/呼叫。

public partial class CallDotNetFromJavaScript {
  [JSInvokable] public static string checkNumber(int number) {
    if (number % 2 == 0)
      return $ 'The Number {number} is Even';
    else
      return $ 'The Number {number} is Odd';
  }
}

scripts 資料夾中的 example.js 檔案中編寫以下程式碼。

var jsMethods = {};

jsMethods.checkNumber = function() {
  const number = prompt('Enter your number');
  DotNet.invokeMethodAsync('BlazorApplication', 'checkNumber', parseInt(number))
      .then(result => {
        var el = document.getElementById('string-result');
        el.innerHTML = result;
      });
}

你可能有一個問題,我們想從 JavaScript 呼叫 C# 方法,但使用 DotNet 物件。DotNet 物件用於從 JS 程式碼(JavaScript 程式碼)呼叫/呼叫 C# 方法。

還在迷茫嗎?再次執行專案;當它顯示介面時,按F12,轉到 Console 標籤頁,然後輸入 DotNet

請參閱以下螢幕截圖。

從 javascript 呼叫 c# 函式 - blazor 螢幕十二

你可能已經觀察到 DotNet 物件包含兩個屬性,invokeMethodinvokeMethodAsync,用於從 JavaScript 程式碼呼叫 C# 靜態方法。我們在本教程中使用 invokeMethodAsync

讓我們再次執行 blazor 應用程式以從 JavaScript 呼叫 C# 函式並檢查其行為。

輸出:

從 javascript 呼叫 c# 函式 - 輸出

很好! 我們從 C# 方法獲得響應,以檢查數字是偶數還是奇數。

作者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook