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

Question

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

不过,我想知道如何处理简单的事情,例如将注意力集中在输入控件上？例如,在我处理click事件后,我想将焦点设置为文本输入控件.我是否必须使用JQuery这样的东西,还是Blazor会为这类东西提供一些内置的方法？

谢谢

更新:这是我现在这样做的方式,直到我了解Blazor的更多信息.(这很有效,但我知道当Blazor准备好迎接黄金时段时,会有更好的方法来处理这样的事情.)

在我看来,我有以下脚本部分:

__PRE__

然后,在函数部分我有这个功能:

__PRE__

然后我从Refresh方法中调用它.(这是使用TalkingDotNet提供的示例代码,网址为http://www.talkingdotnet.com/create-a-crud-app-using-blazor-and-asp-net-core/)

__PRE__

Answer 1

Blazor只是javascript的替代品(更准确地说是"增值").它只是一个客户端解决方案(但未来可能会与ASP.Net轻松绑定).

它完全基于html和CSS.C#正在使用Web程序集替换js部分.因此,访问/修改html控件的方式没有任何改变.

截至目前(版本0.1.0),你必须依靠HTML DOM 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 undifined according to js specs
}

有关更多信息,请参阅下文.

如果你想整齐地改善js的pakaging.你可以做这样的事情. /sf/answers/3466485151/

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 2

我想添加一个最新的（自0.9.0版本开始）调用JavaScript函数的示例，以在某些事件（例如单击按钮）后将焦点设置到另一个控件。这可能对刚开始使用Blazor的人（例如我）有用。

此示例以Blazor文档“构建您的第一个Blazor组件应用”中的示例代码为基础，网址为https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/build-your-first-razor-components- app？view = aspnetcore-3.0

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

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

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

2. 在todo.cshtml页面顶部，添加以下using语句：

@inject IJSRuntime JsRuntime;

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

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

4. 在AddToDo（）函数中，将“ newToDo”变量设置为空字符串的行下方，添加对Focus函数的调用，并传入输入控件的字符串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
        }
    }

5. 生成并运行您的应用程序。当您单击“添加新项”按钮时，应将新项添加到列表中，输入控件为空白，焦点应回到输入控件中，以准备添加其他项。