從 JavaScript 呼叫 C# 函式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現在，通過新增以下程式碼來修改 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。

請參閱以下螢幕截圖。

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

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

輸出：

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