在 Blazor 服务器应用程序中如何以及在何处实现 JsInterop javascript 端？答案

【问题标题】：How and where JsInterop javascript side implemented in a Blazor Server App?在 Blazor 服务器应用程序中如何以及在何处实现 JsInterop javascript 端？
【发布时间】：2020-05-10 08:49:38
【问题描述】：

上下文

我正在尝试了解 JsInterop javascript 端 的实现方式和位置。

在我的 Blazor Server 项目中给出以下示例代码：

public static ValueTask<string> Prompt(IJSRuntime jsRuntime, string message)
{
    // Implemented in exampleJsInterop.js
    return jsRuntime.InvokeAsync<string>(
    "exampleJsFunctions.showPrompt",
    message);
}

及其对应的javascript：

window.exampleJsFunctions = {
  showPrompt: function (message) {
    return prompt(message, 'Type anything here');
  }
};

（我确实了解 SignalR 基础结构及其对电路概念的使用，我确实了解电路用于 Blazor 服务器项目中的两种客户端服务器通信。）

问题

项目使用的唯一客户端脚本是：<script src="_framework/blazor.server.js"></script> 据了解，所有 javascript 执行调度功能都应该在那里。我认为从服务器端完成 javascript 调用的唯一方法是一些 javascript eval() 功能。我试图找到源代码_framework/blazor.server.js，我想它在这里here in github，因为它在/dist 文件夹中的构建输出包含文件blazor.server.js

我试图在打字稿源中找到这部分（执行来自服务器的 javascript 函数由其名称给出的），但没有成功。谁能指出我正确的方向？我是在找错地方，还是没有 eval()？

*** 编辑：与此同时，我了解到不仅 eval() 在这里播放，实际上这是最后一次机会，还有 window["functionName"](arguments); 及其变体。仍在寻找相关的源代码行...

【问题讨论】：

标签： blazor blazor-server-side blazor-jsinterop

【解决方案1】：

我正在尝试了解 JsInterop javascript 端的实现方式和位置。

在应用主页面中，通常是_Host.cshtml（或_index.cshtml或wwwroot/index.html等，取决于你的服务器代码结构），在<head>或<body>标签的结尾处。您可以在此处放置 <script src="path/to/exampleJsFunctions.js"></script> 或立即在 <script> 标记内定义函数。

仅供参考，blazor.server.js 脚本负责浏览器和服务器之间的 websocket 连接。当您在应用程序中调用Prompt(...) 方法时，服务器要求浏览器（通过 websocket）运行在window 中定义的名为exampleJsFunctions.showPrompt 的js 函数，使用给定的参数message。如果 js 函数在 window 中定义，浏览器将运行它（如果您使用浏览器开发工具在其上设置断点，它将被命中）。否则会抛出错误。没有eval。

（实际上，如何为浏览器定义函数并不重要。唯一重要的是当服务器要求浏览器调用该函数，浏览器可以在window对象下面找到函数。）

如果您如此热衷于查看源代码，您应该在jsinterop sources 中找到它。

【讨论】：

【解决方案2】：

您可以在 blazor.js 文件下添加自定义 JS 文件。您可以在其中声明您的函数，然后通过 JsRuntime 从 razor 组件中调用它。

我发现的最简单的方法是将 IJSRuntime 注入到组件中。

@inject IJSRuntime JSRuntime;

【讨论】：