从 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# 方法获得响应，以检查数字是偶数还是奇数。