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

问题描述 投票:13回答:3

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

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

谢谢

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

截至目前(Blazor 0.9.0),您在Index.html中创建JavaScript函数(或从Index.html引用它们),然后在您的Blazor页面或组件中调用JsRuntime.InvokeAsync(“functionName”,parms);

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

javascript c# asp.net-core blazor javascript-interop
3个回答
11
投票

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的包装。你可以做这样的事情。 qazxsw poi

https://stackoverflow.com/a/49521216/476609

然后将此组件添加到根目录。 (App.cshtml)

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);
    }
}

3
投票

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

此示例以<BlazorExtensionScripts></BlazorExtensionScripts> <Router AppAssembly=typeof(Program).Assembly /> 上Blazor文档“构建您的第一个Blazor组件应用程序”中的示例代码为基础构建

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

  1. 在Index.html的底部,在wwwroot下,以及加载webassembly.js的脚本标记下方,添加以下脚本:
https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-razor-components-app?view=aspnetcore-3.0
  1. 在todo.cshtml页面的顶部,添加以下using语句:
<script>
        window.MySetFocus = (ctrl) => {
            document.getElementById(ctrl).focus();
            return true;
        }
</script>
  1. 在todo.cshtml页面的@functions部分中,添加以下函数:
@inject IJSRuntime JsRuntime;
  1. 在AddToDo()函数中,在您将“newToDo”变量设置为空字符串的行的下方,添加对Focus函数的调用,传入输入控件的字符串id。 (文档中的示例没有为输入控件分配ID,所以只需自己添加一个。我将其命名为“todoItem”)。
    async void Focus(string controlId)
    {
        var obj = JsRuntime.InvokeAsync<string>(
            "MySetFocus", controlId);
    }

  1. 构建并运行您的应用程序。当您单击添加新项目按钮时,新项目应添加到列表中,输入控件将消隐,焦点应该返回到输入控件中,准备好添加另一个项目。

2
投票

你无法直接调用JavaScript函数。你需要先注册你的功能,比如


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

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

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

您可以通过单击按钮调用此C#方法。喜欢,

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

这篇文章<button id="btnShow" class="btn btn-primary" @onclick(CallJavaScript)>Show</button> 展示了一个从Blazor调用JavaScript的工作演示。

© www.soinside.com 2019 - 2024. All rights reserved.