标签: blazor-jsinterop

我在 .NET6 中创建了一个 Blazor 服务器应用程序。但最近我将其升级到 .NET7。从这次开始，我遇到了上述问题。

错误：Microsoft.JSInterop.JSException：将循环结构转换为 JSON --> 从带有构造函数“Window”的对象开始 --- 属性“window”关闭循环 TypeError：将循环结构转换为 JSON --> 从带有构造函数“的对象开始” Window' --- 属性'window'在 JSON.stringify () 处关闭圆圈

这个问题是从这条线上发生的

await _jsRuntime.InvokeAsync<object>("open", url, "_blank");

该行负责在浏览器的新选项卡中打开 URL。一旦我单击导航栏链接，就会调用上面的行并发生此问题。有人知道此问题的答案吗？请帮助我，感谢您的所有回答。

我们使用 Blazor WebAssembly，我想通过 JavaScript 在我的 Index.razor-File 中调用一个非静态方法。

JavaScript：

(function () {

    // keydown event
    window.addEventListener("keydown", function (e) {
        DotNet.invokeMethodAsync('MyBlazorWebAssemblyApp.Client', 'MyMethod');
    });
})();

Index.razor：

@page "/"
@inject HttpClient Http

@code {
    
    // [...]
    
    [JSInvokable]
    public async Task MyMethod()
    {
        var lResponse = await Http.GetFromJsonAsync<object>("Controller/Action");
    }
}

当我通过 keydown 执行代码时，Microsoft Edge 中的开发人员工具显示以下错误：

blazor.webassembly.js:1 System.ArgumentException：程序集“MyBlazorWebAssemblyApp.Client”不包含具有 [JSInvokableAttribute("MyMethod")] 的公共可调用方法。

当我替换该属性时[JSInvokable]，[JSInvokableAttribute("MyMethod")]会出现相同的错误。

我该如何解决这个问题？

我有一个 Blazor Wasm 项目，当我想注入 JSRuntime 时

@inject JSRuntime js

我收到此错误：“无法为类型 'BlazorApp.Pages.Page' 上的属性 'js' 提供值。没有类型为 'Microsoft.JSInterop.JSRuntime' 的注册服务”

JSRuntime 是不是默认没有注册？如何注册？

谢谢

在过去的几天里，我试图在我的 blazor 应用程序中读出浏览器分辨率。我尝试这样做：[JSInvokable] Blazor Methode 由 JS 脚本调用。

1.我的问题是：宽度和高度仅在我重新加载（手动刷新）页面后显示在我的blazorpage中。我无法调用 this.StateHasChanged() 因为我的方法是静态的。

我如何调用 StateHasChanged 或者我需要做什么才能显示新数据？我对 ASP.net 等还很陌生，所以如果可能的话请包含一个代码示例；）

这是我的 Code blazor （服务器端）代码：

@page "/"
@inject IJSRuntime jsRuntime
<h1>Window Dimensions</h1>

<p>Window Width: @Width</p>
<p>Window Height: @Height</p>
<p>@DebugString</p>

@code {
    public static int Width;
    public static int Height;
    public static string DebugString;

    [JSInvokable]
    public static async Task GetBrowserDimensions(int width, int height)
    {
        Width = width;
        Height = height;
        if (Width < 600)
        {
            DebugString = "small_UI";
        }
        if (Width >= 600)
        {
            DebugString = …

首先，我对我的英语水平感到非常抱歉。

我目前正在通过 dotnet core 3.1 blazor 开发一个 Web 项目。

如下面的源代码所示，我使用 IJSRuntime 调用需要很长时间的 Javascript 函数。

[Inject]
IJSRuntime JSRuntime { get; set; }
private async Task BtnDisplay()
    await JSRuntime.InvokeVoidAsync("RefreshWebJS", Data);
}

Javascript 函数需要很长时间，因此我添加了下面的源代码来添加微调器。

private async Task BtnDisplay()
{
    showLoadingImg = true; // add
    await JSRuntime.InvokeVoidAsync("RefreshWebJS", Data);
    showLoadingImg = false;
}

Spinner 在 razor 页面上定义如下：

@if (showLoadingImg == true)
{
    <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center;">
    <img src="/images/LoadingImg.gif" style="position: absolute; top: 50%; left: 50%;" />
    </div> …

在 blazor 应用程序上工作，它有一个需要从 JS 调用的方法！当我尝试调用没有 static 关键字的方法时，出现此错误 -

 The assembly 'AssemblyName' does not contain a public invokable method with [JSInvokableAttribute("INIT_COMPLIANCE")].

一旦我添加静态，它就会识别并加载它。

这是我在 blazor 组件中的代码 -

protected override Task OnInitializedAsync()
    {
        jsToDotNetBridgeReference = DotNetObjectReference.Create(this);
        js.InvokeVoidAsync("SetDotNetReference", jsToDotNetBridgeReference);
        return base.OnInitializedAsync();
    }


[JSInvokableAttribute("INIT_COMPLIANCE")]
public async void InitComplianceComponent(string token)
{
    id_token = token;
    Console.WriteLine(token);
    await GetData();
}

JS-

 self.addNewCompliance = function () {
        const url = someurl;
        var resource = window.authContext.getResourceForEndpoint(url);
        window.authContext.acquireToken(resource, function (error, token) {
            // Handle ADAL Error
            if (error || !token) { …

我有一个在服务器端呈现的 Blazor 组件。我想在里面有一些可折叠的div。然而，由于代码是服务器渲染的，因此不会执行 Javascript，因此这些部分不会崩溃。

这是我的文件中的代码script.js：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        } else if(window.matchMedia("(max-width:1440px)")){
            // content.style.maxHeight = content.scrollHeight + "px";
            content.style.maxHeight = "20vh";
        } 
        else {
            content.style.maxHeight = "50vh";
        }
    });
}

这是我的main.cshtml文件：

<component type="typeof(Main)" render-mode="Server" />

<script src="~/js/script.js" type="text/javascript"></script>

最后是我的Main带有可折叠部件的组件：

@using Microsoft.AspNetCore.Components;
@using Microsoft.AspNetCore.Components.Web;

<div class="collapsible">
    <label for="tutu">HEADER</label>
    <div id="mybtn" class="btn-rch"></div> …