如何在 Blazor 服务器端呈现 Javascript？答案

【问题标题】：How can I render Javascript in Blazor server-side?如何在 Blazor 服务器端呈现 Javascript？
【发布时间】：2019-10-12 07:42:58
【问题描述】：

我必须在 Blazor 服务器端项目中使用 javascript 库。

该库用于连接到 APP。需要通过后端的get方法获取Access Token进行初始化。

现在get方法可以成功获取访问令牌，下一步是在字体端渲染它来初始化库。

但是，我想在_Host.cshtml 中添加一个code 块，但它似乎根本不支持。

然后，我尝试将代码和script 块修改为index.cshtml。好吧，现在它报告script 块还不会在网页上呈现。

我该如何解决这个问题？你能帮帮我吗？谢谢。

Blazor 不同于原来的 asp.net core，它没有Rendersection 方法。

这是另一个问题：@RenderSection Equivalent in Blazor?

【问题讨论】：

Razor RenderSection within script tags - How to insert script from view into template function的可能重复
@OrYaacov 恐怕 Blazor 没有 RenderSection 方法，和 asp.net 核心不同。
@OrYaacov 请看一下：stackoverflow.com/questions/57912935/…
报错信息很详细，请问你的报错信息是什么问题？！将代码添加到组件（尤其是动态加载的组件，例如在 razor 出现之前的 ajax）总是有问题的，与使用的技术无关。唯一正确的方法是始终将您的 JavaScript/TypeScript 文件分开，将它们编译为单个（或几个）js 文件，然后在应用程序启动时加载它们并对 dom 事件做出反应（这就是 jQuery 所做的）
但一般来说，您对 JavaScript 的使用表明您并不真正了解 Blazor 是什么。 Blazor 编译（并在其上运行）wasm（Web 程序集），这是一种完全不需要 JavaScript 的本机编程。您在 JavaScript 中实际可以做的所有事情现在应该可以在 C# 中完成，所以您可能仍然有使用 JavaScript 处理动态内容的旧“思维方式”。 Blazor 服务器端与客户端基本相同，但“内容”将在服务器端呈现，并将返回的 html 嵌入到正确的位置

标签： asp.net-core .net-core blazor

【解决方案1】：

您只能在 Blazor 组件的外部添加 JavaScript。您可以将它们添加到您的 index.html 或 _Host.cshtml 中。您所有的外部函数都在那里，或者在组件 dll 中。在 Blazor 中，您只需调用这些函数并传递结果

【讨论】：

【解决方案2】：

我找到了另一种方法来实现这一点：

这是js：

window.TestFunctions = {
    InvokeAlert: function (AlertString) {
        alert(AlertString);
    }
};

这是 Blazor 的代码：

protected override void OnInitialized()
    {
        Task.Run(() =>
        {
            var request = new HttpRequestMessage(HttpMethod.Get,
                string.Format(NavigationManager.Uri+"Callback/JSInitialise"));

            var client = _clientFactory.CreateClient();
            var response = client.SendAsync(request);

            while (true)
            {
                if (!string.IsNullOrEmpty(_SignatureModel.signature))
                {
                    JSRuntime.InvokeVoidAsync("TestFunctions.InvokeAlert", _SignatureModel.signature);
                    break;
                }
                Task.Delay(200);
            }
        });
    }

嗯，现在可以了。

【讨论】：