如何在Glazor中进行客户端UI事件

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

我想知道，它将如何处理简单的事情，例如将重点放在输入控件上？例如，在处理单击事件后，我想将焦点设置为文本输入控件。我是否必须使用jQuery进行类似的东西，或者Blazor有一些内置方法？

谢谢

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

截至目前(Blazor 0.9.0(您在index.html中创建您的JavaScript函数(或从index.html引用它们(，然后在您的Blazor Page或您调用JSruntime.invokeasync(" functionName"，" functionName"，" functionName"，"，"parms(;

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

jus oflazor只是替换(更准确地说的"价值添加＆quot"(。它是一个仅客户端的解决方案(但将来可能会为ASP.NET添加一些简单的绑定(。

仍然完全基于HTML和CSS。C＃使用Web组件替换JS部分。因此，您访问/修改HTML控件的方式没有任何改变。

到目前为止(版本0.1.0(，您必须依靠HTML DOM focus()方法来执行您打算做的事情(是的，您必须使用 javascript 目前为止:((。<<<<<(。/p>

// 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 />

我想添加一个更新的(从0.9.0起(调用JavaScript函数以将焦点设置为另一个事件后将焦点设置为另一个控件的示例，例如单击一个按钮。这可能对刚开始使用大火(像我一样(的人有帮助。

此示例在https://learn.microsoft.com/en-us/aspnet/core/core/core/tutorials/build-yourd-your-first-razor上，在https://learn.microsoft.com/en-learn.microsoft.com/en-learn.microsoft.com/plazor文档中构建。-components-app？view = aspnetcore-3.0

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

在index.html的底部，在wwwroot下，下面是加载WebAssembly.js的脚本标签，添加以下脚本：

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

在您的todo.cshtml页面的顶部，使用语句添加以下内容：

@inject IJSRuntime JsRuntime;

在todo.cshtml页面的@functions部分中，添加以下功能：

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

在Addtodo((函数中，在您将" newtodo"变量设置为空字符串的行下方，将调用添加到焦点函数中，并传递输入控件的字符串ID。(文档中的示例没有为输入控件分配一个ID，所以只要添加一个。


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

构建并运行您的应用程序。当您单击"添加新项目"按钮时，应将新项目添加到列表中，输入控件已被清除，并且焦点应重新放在输入控件中，准备添加另一个项目。

来自.net 5预览8

在Blazor Apps中设置UI焦点

Blazor现在具有焦点方便方法，以将UI专注于该元素。

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

您无法直接调用JavaScript函数。您必须先注册您的功能，例如

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

然后，您需要在C＃中声明一种调用此JavaScript函数的方法。喜欢，

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

单击按钮时，您可以调用此C＃方法。喜欢，

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

这篇文章使用Blazor和ASP.NET Core创建一个CRUD应用程序显示了来自Blazor的调用JavaScript的工作演示。

相关内容

最新更新

热门标签：