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

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

不过，我想知道它将如何处理简单的事情，例如将焦点设置在输入控件上？例如，在处理单击事件后，我想将焦点设置到文本输入控件。我是否必须使用 JQuery 来完成类似的事情，或者 Blazor 是否有一些内置方法来完成此类事情？

Thanks

更新：我在下面发布了一个答案，其中包含如何通过从 .Net 代码调用 JavaScript 函数将焦点设置到控件的示例。

从现在 (Blazor 0.9.0) 开始，您可以在 Index.html 中创建 JavaScript 函数（或从 Index.html 引用它们），然后在 Blazor 页面或组件中调用 JsRuntime.InvokeAsync("functionName", parms);

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

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

尽管如此，它仍然完全基于 HTML 和 CSS。 C# 正在使用 Web 程序集替换 JS 部分。因此，您访问/修改 HTML 控件的方式没有任何变化。

截至目前（版本 0.1.0）你必须依赖 HTML DOMfocus()做你想做的事情的方法（是的，你必须使用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 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 />