如何在Blazor中执行客户端用户界面事件

Question

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

但是，我想知道它将如何处理一些简单的事情，比如将焦点放在一个输入控件上？例如，在处理click事件后，我希望将焦点设置为文本输入控件。我需要用JQuery来做类似的事情吗，还是Blazor会有一些内置的方法来处理这类事情呢？

谢谢

更新:我在下面发布了一个答案，并举例说明了如何通过从.Net代码调用JavaScript函数将焦点设置到控件上。

现在(Bazor0.9.0)，您在JavaScript中创建Index.html函数(或从Index.html中引用它们)，然后在Blazor页面或组件中调用JsRuntime.InvokeAsync("functionName"，parms)；

https://learn.microsoft.com/en-us/aspnet/core/razor-components/javascript-interop

Answer 1

我想添加一个最新的(截至0.9.0)的例子，调用一个JavaScript函数，在某些事件之后将焦点设置为另一个控件，比如单击按钮。这可能对刚开始使用Blazor的人有帮助(比如我)。

此示例构建在https://learn.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-razor-components-app?view=aspnetcore-3.0上的Blazor文档“构建第一个Blazor组件应用程序”中的示例代码之上。

首先，遵循文档中的所有说明。当您有工作待办事项列表页时，然后添加以下内容：

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

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

1. 在todo.cshtml页面的顶部添加以下语句：

@inject IJSRuntime JsRuntime;

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

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

1. 在AddToDo()函数中，就在将"newToDo“变量设置为空字符串的行下面，添加对Focus函数的调用，传递输入控件的字符串id。(文档中的示例不为输入控件分配ID，因此只需自己添加一个ID即可。我把我的名字叫做"todoItem")。

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

1. 构建并运行您的应用程序。单击“添加新项”按钮时，应将新项添加到列表中，将输入控件消去，焦点应回到输入控件中，以便添加另一项。

Answer 2

Blazor只是JavaScript的替代品(更准确地说，是“增值”)。它是客户端唯一的解决方案(但将来可能会为ASP.NET添加一些简单的绑定)。

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

到目前为止(版本为0.1.0)，您必须依赖HTML focus()方法来完成您想要做的事情(是的，您现在必须使用JavaScript :( ) )。

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undefined according to js specs
}

有关更多信息，请参考下面的内容。

如果您想要改进JS的包装整洁的，您可以这样做：https://stackoverflow.com/a/49521216/476609

public class BlazorExtensionScripts : Microsoft.AspNetCore.Blazor.Components.BlazorComponent
{
    protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "script");
        builder.AddContent(1, "Blazor.registerFunction('Focus', (controlId) => { document.getElementById(controlId).focus(); });");
        builder.CloseElement();
    }

    public static void Focus(string controlId)
    {
        RegisteredFunction.Invoke<object>("Focus", controlId);
    }
}

然后将此组件添加到根：(App.cshtml)：

<BlazorExtensionScripts></BlazorExtensionScripts>
<Router AppAssembly=typeof(Program).Assembly />

Answer 3

来自.NET 5预览8

在Blazor应用程序中设置UI焦点

Blazor现在在ElementReference上有了一个ElementReference方便的方法来设置该元素的UI焦点。

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