首页 > 编程语言> > 第十章-JavaScript 互操作性

第十章-JavaScript 互操作性

2022-09-04 14:31:52 作者：互联网

从 C# 调用 JavaScript

浏览器具有许多您可能希望在 Blazor 网站中使用的功能。例如，您可能希望使用浏览器的本地存储来跟踪某些数据。由于 Blazor 的 JavaScript 互操作性，这很容易。

提供胶水功能

要调用 JavaScript 功能，首先要在 JavaScript 中构建粘合函数。我喜欢将这些函数称为粘合函数（我自己的命名约定），因为它们成为 .NET 和 JavaScript 之间的粘合剂。

Glue 函数是常规的 JavaScript 函数。 JavaScript 粘合函数可以采用任意数量的参数，条件是它们是 JSON 可序列化的（这意味着您只能使用可转换为 JSON 的类型，包括其属性是 JSON 可序列化的类）。这是必需的，因为参数和返回类型在 .NET 和 JavaScript 运行时之间作为 JSON 发送。

然后将此函数添加到 JavaScript 全局范围对象，在浏览器中该对象是窗口对象。稍后您将查看一个示例，因此请继续阅读。然后，您可以从 Blazor 组件调用此 JavaScript 粘合函数。

使用 IJSRuntime 调用 Glue 函数

回到 .NET 领域。要从 C# 调用 JavaScript 粘合函数，请使用通过依赖注入提供的 .NET IJSRuntime 实例。此实例具有 InvokeAsync 泛型方法，该方法采用胶水函数的名称及其参数并返回 T 类型的值，这是胶水函数的 .NET 返回类型。如果您的 JavaScript 方法不返回任何内容，那么还有 InvokeVoidAsync 方法。如果这听起来令人困惑，您将立即查看一个示例。

InvokeAsync 方法是异步的，支持所有异步场景，这是调用 JavaScript 的推荐方式。如果需要同步调用胶水函数，可以将 IJSRuntime 实例向下转换为 IJSInProcessRuntime 并调用其同步的 Invoke 方法。此方法采用与具有相同约束的 InvokeAsync 相同的参数。

不推荐对 JavaScript 互操作使用同步调用！服务器端 Blazor 需要使用异步调用，因为调用将通过 SignalR 序列化到客户端。

使用 Interop 在浏览器中存储数据

是时候看一个例子了，你将从 JavaScript 粘合函数开始。打开提供的 JSInterop 解决方案（或者您可以从头开始创建一个新的 Blazor WebAssembly 项目）。从 JSInterop 项目中打开 wwwroot 文件夹并添加一个名为 scripts 的新子文件夹。将一个新的 JavaScript 文件添加到名为 interop 的脚本文件夹中。 js 并添加清单 10-1 中的粘合函数。这会将 blazorLocalStorage 对象添加到全局窗口对象，其中包含三个粘合函数。这些粘合函数允许您从浏览器访问 localStorage 对象，这允许您将数据存储在客户端的计算机上，以便以后访问它，即使在用户重新启动浏览器或计算机之后也是如此。

清单 10-1 blazorLocalStorage 粘合函数

window.blazorLocalStorage = {
    get: key => key in localStorage ? JSON.parse(localStorage[key]) : null,
    set: (key, value) => { localStorage[key] = JSON.stringify(value); },
    delete: key => { delete localStorage[key]; },
};

您的 Blazor 网站需要包含此脚本，因此打开 wwwroot 文件夹中的 index.html 文件并在 Blazor 脚本后添加脚本引用，如清单 10-2 所示。

清单 10-2 在 HTML 页面中包含脚本引用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0,
                                       maximum-scale=1.0, user-scalable=no" />
        <title>JSInterop</title>
        <base href="/" />
        <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
        <link href="css/app.css" rel="stylesheet" />
        <link href="JSInterop.styles.css" rel="stylesheet" />
    </head>
    <body>
        <div id="app">Loading...</div>
        <div id="blazor-error-ui">
            An unhandled error has occurred.
            <a href="" class="reload">Reload</a>
            <a class="dismiss">标签：10,互操作性,JavaScript,第十章,组件,添加,清单,using	

来源： https://www.cnblogs.com/King2019Blog/p/16655047.html