Radzen Blazor WASM JavaScript 互操作 function 未定义

Question

我正在使用Radzen Blazor Components ，它们非常有用且易于实现，带有.NET 6 Blazor WebAssembly App 。

我按照 Radzen web 上的指南安装组件。

问题是我正在尝试使用 IJSRuntime 调用 JavaScript function 但它会引发异常，指出 function 未定义。 我想在某种程度上，添加的 javascript 文件不包含在编译中，因为我用一个普通的 Blazor WASM 应用程序测试了 JS 互操作，它可以工作。

有谁能够帮我？ 非常感谢您。

例外：

blazor.webassembly.js:1 crit：Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：找不到“createAlert”（“createAlert”未定义）。 错误：找不到“createAlert”（“createAlert”未定义）。 在 https://localhost:7000/_framework/blazor.webassembly.js:1:328 在 Array.forEach () 在 a.findFunction (https://localhost:7000/_framework/blazor.webassembly.js:1:296 ) 在 _ (https://localhost:7000/_framework/blazor.webassembly.js:1:2437) 在 https://localhost:7000/_framework/blazor.webassembly.js:1:3325 在新 ZA5A3F0F287A448982AAC520CFFE47799 Object.beginInvokeJSFromDotNet (https://localhost:7000/_framework/blazor.webassembly.js:1:3306) 在 Object.St [as invokeJSFromDotNet] (https://localhost:7000/1_framework/ :59853) 在 _mono_wasm_invoke_js_blazor (https://localhost:7000/_framework/dotnet.6.0.8.yj5vlwdtrc.js:1:195300) 在 wasm://wasm/00971db2:wasm-function[219]:0x1a48f

这是代码：

索引.razor

@inject IJSRuntime JS

<RadzenButton Text="Show Alert" Click=@ShowAlert/>

@code {

private async Task ShowAlert() => await JS.InvokeVoidAsync("createAlert");

}

互操作.js

function createAlert() {
    alert("Hey this is an alert");
}

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor App</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorApp.Client.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</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">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script scr="interop.js"></script>
</body>

</html>

Answer 1

尝试使用IJSObjectReference来引用 JS 文件：

索引.razor：

@page "/"
@inject IJSRuntime JS

<RadzenButton Text="Show Alert" Click=@ShowAlert />

@code {
    private IJSObjectReference? moudle;
    protected override async Task OnInitializedAsync()
    {
        moudle = await JS.InvokeAsync<IJSObjectReference>("import", "./interop.js");
    }
    private async Task ShowAlert()
    {
        await moudle.InvokeVoidAsync("createAlert");
    }
}

interop.js：

export function createAlert() {
    alert("Hey this is an alert");
}

Radzen Blazor WASM JavaScript 互操作 function 未定义

问题描述

1 个解决方案

解决方案1
0 2022-08-25 00:58:40

Radzen Blazor WASM JavaScript 互操作 function 未定义

问题描述

1 个解决方案

解决方案1 0 2022-08-25 00:58:40

解决方案1
0 2022-08-25 00:58:40