个人中心
gpt4 book ai didi

c# - Blazor - JavaScript Interop - 未设置 .NET 调用调度程序

转载 作者：行者123 更新时间：2023-12-04 08:43:28 27 4
gpt4 key购买 nike

我正在试验 Blazor WebAssembly app .当我的页面(即 index.html)加载时，我想在加载时将 JavaScript 数组传递给 Blazor 应用程序。在尝试时 call a method from JavaScript ，我遇到了一个错误，它说:

Uncaught (in promise) Error: No .NET call dispatcher has been set
我的代码如下所示:
index.html 
<body>
    <app>Loading...</app>

    <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>
        let items = [
            { name:'Item 1', description:'This is a description of the first item' },
            { name:'Item 2', description:'This is a description of the second item' },
            { name:'Item 3', description:'This is a description of the third item' },
        ];

        try
        {
            DotNet
                .invokeMethodAsync('MyOrg.MyApp.Index', 'LoadItems')
                .then(results => {
                    console.log(results);
                })
            ;
        }
        catch (ex)
        {
            console.log(ex);
        }
    </script>
</body>
Index.razor 
@page "/"

@using System.Threading.Tasks;    
@using Microsoft.Extensions.Logging;

@inject ILogger<Index> logger;

<p>
    Items loaded: <span>@items.Count</span>
</p>

@code {
    List<object> items = new List<object>();

    [JSInvokable]
    private Task LoadSnippets() 
    {
        try 
        {
            logger.LogInformation("Loading items...");
            items = new List<object>();
        }
        catch (Exception ex)
        {
            logger.LogError(ex, $"Failed to load items.");
        }
        return Task.CompletedTask;
    }
}
我注意到的第一个区别是文档中显示的示例依赖于 static方法。这是要求吗？如果是这样，那将意味着没有一种方法可以执行例如日志记录。撇开日志，即使我添加 static到 LoadItems方法，我仍然得到上面列出的错误。我不明白为什么。
简而言之，我正在尝试创建一个“ headless ”Blazor 应用程序。我想使用 C# 的丰富性来处理数据，我需要将结果传递给依赖于 HTML/CSS 的 UI。谢谢!

最佳答案

欢迎来到 Blazor!
首先，我建议阅读 Call .Net from js 处的文档。
在 index.html 中包含脚本的方式意味着该脚本被执行 之前 您的 wasm 应用程序已加载。
为了解决这个问题，在 OnAfterRenderAsync 生命周期方法( Lifecycle docs )中使用 js interop 是一个很好的做法
因此，如果您将脚本更新为以下内容:

<script>
        netFromJs = {
            staticCall:  function () {
                let items = [
                    { name: 'Item 1', description: 'This is a description of the first item' },
                    { name: 'Item 2', description: 'This is a description of the second item' },
                    { name: 'Item 3', description: 'This is a description of the third item' },
                ];

                try {
                    DotNet
                        .invokeMethodAsync('wasmprerender.Client', 'LoadItems')
                        .then(results => {
                        console.log(results);
                    });
                }
                catch (ex) {
                    console.log(ex);
                }
            }
        }
    </script>
然后在您的组件(页面也是组件)中，您将能够执行以下操作: 
@inject IJSRuntime _js

@code {
    static List<object> items = new List<object>();

    [JSInvokable]
    public static Task LoadItems()
    {
        try
        {
            Console.WriteLine("Loading items");
            items = new List<object>();
        }
        catch (Exception ex)
        {
        }

        return Task.CompletedTask;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await _js.InvokeVoidAsync("netFromJs.static");
    }
}
解决您关于静态调用的注释。您的示例适用于静态方法调用，Blazor 还支持实例方法调用。你会在这里找到一个很好的例子 Instance call
最后，我不太推荐 touch index.html。创建和引用单独的 .js 文件或从 .NET 5 RC1 您可以使用 Js isolation

关于c# - Blazor - JavaScript Interop - 未设置 .NET 调用调度程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64446727/

27 4 0
文章推荐： linux - 如何设置 flatpak 应用程序在启动时运行？
文章推荐： python - 关于 Python 中的 time.time()
文章推荐： apache-spark - 如何将 Pyspark 连接到在 docker 上运行的 datastax Cassandra？
文章推荐： database - 无法使用 cqlsh 连接到 Amazon Keyspaces
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com