Javascript 如何在Blazor中执行客户端UI事件

我刚开始玩Blazor，我已经看到了这个新框架的巨大潜力

不过，我想知道它将如何处理简单的事情，比如在输入控件上设置焦点？例如，在处理单击事件后，我希望将焦点设置为文本输入控件。我是否必须使用JQuery来实现类似的功能，或者Blazor是否会为这类功能提供一些内置方法

谢谢

更新：我在下面给出了一个答案，并举例说明了如何通过调用.Net代码中的JavaScript函数来设置控件的焦点。

现在（Blazor 0.9.0），您可以在Index.html（或从Index.html引用）中创建JavaScript函数，然后在Blazor页面或组件中调用JsRuntime.InvokeAsync（“functionName”，parms）

---

Blazor只是JavaScript的替代品（更准确地说是“增值”）。它是一个只支持客户端的解决方案（但将来可能会向ASP.NET添加一些简单的绑定）

不过，它完全基于HTML和CSS。C#正在使用web组装替换JS部件。因此，访问/修改HTML控件的方式没有任何变化

到目前为止（版本0.1.0），您必须依赖HTML DOM

focus（）

方法来完成您想要做的事情（是的，您必须使用JavaScript到目前为止：（））

---

你不能直接调用JavaScript函数。你需要先注册你的函数，比如

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

Blazor.registerFunction（'ShowControl'，（项）=>{
var txtInput=document.getElementById（“txtValue”）；
txtInput.style.display=“”；
txtInput.value=项目；
txtInput.focus（）；
});
返回true；

然后你需要在C#中声明一个调用这个JavaScript函数的方法

private void CallJavaScript()
{
   RegisteredFunction.Invoke<bool>("ShowControl", itemName);
}

private void CallJavaScript（）
{
RegisteredFunction.Invoke（“ShowControl”，itemName）；
}

你可以点击按钮调用这个C#方法，比如

<button id="btnShow" class="btn btn-primary" @onclick(CallJavaScript)>Show</button>

Show

本帖

---

显示了一个从Blazor调用JavaScript的工作演示。

我想添加一个更新的（从0.9.0开始）示例，在某个事件后调用JavaScript函数将焦点设置为另一个控件，如单击按钮。这可能对刚开始使用Blazor的人（如我）有所帮助

此示例基于Blazor文档“构建您的第一个Blazor组件应用程序”中的示例代码

首先，按照文档中的所有说明进行操作。当您有一个待办工作列表页面时，请添加以下内容：

在Index.html底部的wwwroot下，以及加载webassembly.js的脚本标记下方，添加以下脚本：

在todo.cshtml页面的@functions部分，添加以下函数：

构建并运行应用程序。当您单击“添加新项目”按钮时，新项目应添加到列表中，输入控件消失，焦点应回到输入控件中，准备添加另一个项目

来自.NET5预览版8

Blazor现在在ElementReference上有一个FocusAsync便利方法，用于在该元素上设置UI焦点

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>

设置焦点

谢谢，我今天早上看到了参考文章。感谢您的输入。此方法现在已经过时。请查看上面问题区域中的更新，或者查看此答案中的文档，现在已经过时。请查看上面的更新，或者访问以下文档：如果我无法直接从C访问和控制DOM，那么poi是什么nt？使用这种方法，我将得到一个部分是C#和部分Javascript的客户端，这甚至比一个全部是Javascript的客户端还要糟糕。@中微子不幸的是，这是WebAssembly的一个问题，而不是blazor。WebAssembly目前无法访问DOM。有人讨论过要添加到路线图中，但我不知道当前的问题是什么它的状态是。许多人会认为，在大多数情况下，您实际上不需要访问DOM，但这是一个完全独立的讨论。对于那些从VSCode模板创建的人来说，没有index.html。请改用_Host.cshtml。这是最新的答案。

private void CallJavaScript()
{
   RegisteredFunction.Invoke<bool>("ShowControl", itemName);
}

<button id="btnShow" class="btn btn-primary" @onclick(CallJavaScript)>Show</button>

<script>
        window.MySetFocus = (ctrl) => {
            document.getElementById(ctrl).focus();
            return true;
        }
</script>

@inject IJSRuntime JsRuntime;

    async void Focus(string controlId)
    {
        var obj = JsRuntime.InvokeAsync<string>(
            "MySetFocus", controlId);
    }

void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
            Focus("todoItem"); // this is the new code
        }
    }

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>