如何使用 javascript 在 Blazor 中更新 c# 值？答案

【问题标题】：How to update c# value in Blazor using javascript?如何使用 javascript 在 Blazor 中更新 c# 值？
【发布时间】：2019-11-11 14:23:20
【问题描述】：

我想知道是否可以使用Javascript 更新Blazor 中的C# 值

例如

<input type="text" @bind="TestValue" >
<input type="button" value="Change value" onclick="ChangeValueFromJs()" >

@code
{
public string TestValue {get;set;} = "init value";
}

function ChangeValueFromJs()
{

}

有没有办法更新TestValue并使用js ChangeValueFromJs成功将其绑定到文本输入？

我试过这样做，但似乎没有用

function ChangeValueFromJs()
{
     DotNet.invokeMethodAsync("BlazorApp", "invokeFromJS", "ChangeValue");
}

@code
{
    [JSInvokable("invokeFromJS")]
    public static Task ChangeValue()
    {
          TestValue = "New value";
          return null;
    }
}

【问题讨论】：

如果您没有收到任何错误，则很可能是该值正在更新，但您需要在 ChangeValue() 中调用 InvokeAsync(StateHasChanged) 以让 Blazor 知道某些内容已更改并且需要重新渲染。
我无法在静态方法中调用 InvokeAsync(StateHasChanged)
当然你是对的，我的错误没有正确阅读。您需要更改互操作以调用实例方法，这意味着您最初必须将 dotnet 实例传递给 JS，这很麻烦。我更喜欢保持简单 - 在您的 javascript 中，设置输入的值，然后使用 dispatchEvent 在输入上引发更改事件，Blazor 将通过绑定更新 TestValue
你能给我举个例子，说明在这种情况下如何使用 dispatchEvent
在没有任何错误处理的最简单形式中，var el=document.getElementById('xyz123'); el.value = 'test value'; el.dispatchEvent(new Event('change')); 其中xyz123 是您的input 的ID

标签： asp.net-core blazor

【解决方案1】：

我试过这样做，但似乎没有用

你快到了。为了调用实例方法，您需要pass the instance reference to Javascript。

操作方法

使用 C# 委托包装 onclick="ChangeValueFromJs()"，该委托将将此组件作为对 js 的引用传递：

onclick="ChangeValueFromJs()" @onclick='async (e) => await jsRuntime.InvokeAsync("ChangeValueFromJs", DotNetObjectReference.Create(this))' /gt;

然后改js调用实例方法如下：

function ChangeValueFromJs(wrapper)
{
    return wrapper.invokeMethodAsync("invokeFromJS")
        .then(_=>{
            console.log('state has changed');
        });
}

最后别忘了加一个StateHasChanged();来通知组件

[JSInvokable("invokeFromJS")] 公共任务更改值（） { TestValue = "新值"; StateHasChanged(); 返回Task.CompletedTask； }

演示

【讨论】：