可以使用JavaScriptInterop来访问JavaScript API来获取输入控件的文本值,而不必使用数据绑定。
首先,在Blazor组件中注册一个JS函数:
@inject IJSRuntime JSRuntime
@code { private string inputValue = "";
protected override async Task OnInitializedAsync()
{
await JSRuntime.InvokeVoidAsync("registerInputEvent", DotNetObjectReference.Create(this));
}
[JSInvokable("updateInputValue")]
public void UpdateInputValue(string value)
{
inputValue = value;
}
}
这里我们为组件创建了一个public方法UpdateInputValue,用于从JavaScript中更新组件的机制。 然后,我们通过调用打算从中获取值的JS函数来注册它,该函数将向我们返回该控件的值。 在JS文件中,我们编写以下函数来注册此事件:
function registerInputEvent(dotNetObjRef) { document.querySelectorAll("input").forEach((input) => { input.addEventListener("input", (e) => { dotNetObjRef.invokeMethodAsync("updateInputValue", e.target.value); }); }); }
此函数注册了所有HTML input元素的输入事件。 当用户在任何输入控件中键入时,它调用UpdateInputValue方法并传入当前input元素的值。 我们可以使用此值填充C#变量。