Question

我正尝试在Blazor生成的事件上更新我的js页面。Js使用互操作会在事件上调用C＃代码，因此我需要以某种方式调用this.StateHasChanged在c＃回调中：

JS

window.methods = {
    timeout: null,
    setTimeout: function () {
        timeout = window.setInterval(async function () {
            console.log("From js timeout occured ,sending to .net");
            await DotNet.invokeMethodAsync('[assembly name]', "TimeoutCallback", Date.now().toString());
        }, 2000);
    },

    clearTimeout: function () {
        if (this.timeout == null || this.timeout == undefined) {
            return;
        }
        console.log("Clearing timeout");
        window.clearTimeout(timeout);
    }
}

C＃

@inherits StuffBase
@page "/test"

Current value: @val
<button onclick="@(async()=>await StartTimeout())">Start timeout </button>
<button onclick="@(async()=>await ClearTimeout())">Clear timeout</button>

public class StuffBase : BlazorComponent {

        protected static string val { get; set; }
        protected async Task StartTimeout() {
            await JSMethods.SetTimeout();
        }
        [JSInvokable("TimeoutCallback")]  //gets called by js on event !
        public static async Task TimeoutCallback(string data) {

            val = data; 
            Console.WriteLine("From callback ,received:" + data); //gets updated
            await Task.Delay(1000);
           //how can i call this.StateHasChanged
        }
        protected async Task ClearInterval() {
            await JSMethods.ClearInterval();
        }
    }

互操作

public class JSMethods {
        public static async Task SetTimeout() {
            await JSRuntime.Current.InvokeAsync<string>("methods.setTimeout");
        }
        public static async Task ClearTimeout() {
            await JSRuntime.Current.InvokeAsync<string>("methods.clearTimeout");
        }   
    }

如您所见，首先我从c#-> setTimeout进行调用，它在js中将超时与其处理程序附加在一起。发生的是，我设法从TimeoutCallback调用了js，但是在console中，我更新了自己的值，但我需要以某种方式通知UI进行自我更新

由于从.NET 调用的所有js方法（根据文档）都已经设为static，我该如何实现？

Answer 1

那么如果它们是静态的怎么办...这是否意味着您不能调用StateHasChanged方法。只需在TimeoutCallback方法的末尾键入以下内容即可：StateHasChanged();

无论如何，如果是这样，并且您无法从TimeoutCallback方法调用StateHasChanged方法，则可以从TimeoutCallback方法调用事件处理程序，如下所示：TimeoutCallbackLoaded?.Invoke(data); 然后从那里致电StateHasChanged();

编辑：好的，我现在注意到，您已经定义了一个名为JSMethods的类，它具有两个调用SetTimeout和ClearTimeout的方法。在这种情况下，更好的设计是在该类中还定义TimeoutCallback。毕竟相关，对吗？然后，如上所述定义一个事件处理程序，该事件处理程序将事件的发生通知订阅者（您的UI代码），并将从JSIterop返回的数据传递给该事件处理程序，在UI代码中处理事件的方法中，您可以调用{{ 1}}

Answer 2

我认为将C＃实例传递给JS并将您的JS回调回该C＃实例是一个更好的选择。

StuffBase.cs

    public class StuffBase : ComponentBase
    {
        protected static string val { get; set; }

        protected async Task StartTimeout()
        {
            await JSRuntime.Current.InvokeAsync<string>("methods.setTimeout", new DotNetObjectRef(this));
        }

        [JSInvokable("TimeoutCallback")]  //gets called by js on event !
        public async Task TimeoutCallback(string data)
        {
            val = data;
            Console.WriteLine("From callback ,received:" + data); //gets updated
            await Task.Delay(1000);
            StateHasChanged();
        }
        protected async Task ClearTimeout()
        {
            await JSMethods.ClearTimeout();
        }
    }

JS

window.methods = {
    timeout: null,
    setTimeout: function (stuffBaseInstance) {
        timeout = window.setInterval(async function () {
            console.log("From js timeout occured ,sending to .net");
            await stuffBaseInstance.invokeMethodAsync('TimeoutCallback', Date.now().toString());
        }, 2000);
    },

    clearTimeout: function () {
        if (this.timeout == null || this.timeout == undefined) {
            return;
        }
        console.log("Clearing timeout");
        window.clearTimeout(timeout);
    }
}

Answer 3

在对以上答案进行了大量讨论之后，我无法使它们在Core 3.1和Blazor Web程序集中工作。对于客户端blazor，JSInvokable仅适用于静态方法。因此，我的解决方案是让index.html中的javascript单击剃须刀页面中定义的隐藏按钮：

index.html

<script language="javascript">

        window.resetjs = function () {
            document.getElementById('jspromptbutton').click();
        }
    </script>
</head>

<body>

    <button type="button" class="btn btn-primary"
            onclick="resetjs()">
        fire prompt
    </button>

然后在JSInteropRazor中，添加一个隐藏按钮以触发非静态方法以触发状态已更改，或者就我而言，刷新剃刀页面中的数据。

JSInterop.razor

<button type="button" id="jspromptbutton" style="display:none;"  @onclick="TriggerNetInstanceMethod">
    Fire statehaschanged and refreshAPI
</button>

@code {
    public async Task TriggerNetInstanceMethod()
    {
        this.StateHasChanged();
        string url = "http://myapi.com";
        var newApiData = await Http.GetJsonAsync<Tuple<string, string>>(url);
    }
}

种类繁多，但我一直在努力，直到找到更好的解决方案为止。

Answer 4

由于用户@Isaac建议添加事件并从其回调中调用StateHasChanged，我已解决了该问题：

public class StuffBase : BlazorComponent {

        protected static string val { get; set; }
        protected  delegate void OnTimeout(string data);
        private static event OnTimeout OnTimeOutOccured;
        protected override void OnInit() {
            OnTimeOutOccured += x => {
                this.StateHasChanged();
            };
        }

        protected async Task StartTimeout() {
            await JSMethods.SetTimeout();
        }
        [JSInvokable("TimeoutCallback")]
        public static  async Task TimeoutCallback(string data) {

            val = data;
            Console.WriteLine("From callback ,received:" + data);
            await Task.Delay(1000);
            OnTimeOutOccured?.Invoke(data);

        }
        protected async Task ClearTimeout() {
            await JSMethods.ClearTimeout();
        }
    }

通过调用C＃代码的JS更新Blazor

4 个答案: