如何使用 JavaScript 更新 Blazor 中的 C# 值？

Question

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

例如

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

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

js

function ChangeValueFromJs()
{

}

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

我尝试这样做，但似乎不起作用

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

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

Answer 1

我尝试这样做，但似乎不起作用

你快到了。为了调用实例方法，您需要将实例引用传递给 Javascript。

如何

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

<input type="button" value="更改值" 
     onclick="ChangeValueFromJs()"
    @onclick='async (e) =>等待 jsRuntime.InvokeAsync("ChangeValueFromJs", DotNetObjectReference.Create(this))'
/gt;

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

<input type="button" value="Change value" 
    onclick="ChangeValueFromJs()"
    @onclick='async (e) => await jsRuntime.InvokeAsync("ChangeValueFromJs", DotNetObjectReference.Create(this))' 
/gt;

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

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

演示