我刚刚开始接触Blazor,我已经看到了这个新框架的巨大潜力。
不过,我想知道它将如何处理简单的事情,例如将焦点放在输入控件上?例如,在处理单击事件后,我想将焦点设置为文本输入控件。我是否必须使用JQuery之类的东西,否则Blazor会为此类事情使用一些内置方法吗?
谢谢
更新:我在下面发布了一个答案,并给出了一个示例,该示例如何通过从.Net代码中调用JavaScript函数来将焦点设置为控件。
从现在开始(Blazor 0.9.0),您可以在Index.html中创建JavaScript函数(或从Index.html引用它们),然后在Blazor页面或组件中调用JsRuntime.InvokeAsync(“ functionName”,parms);
https://docs.microsoft.com/zh-cn/aspnet/core/razor-components/javascript-interop
我想添加一个最新的(自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
首先,按照文档中的所有说明进行操作。当您有一个工作列表时,请添加以下内容:
<script>
window.MySetFocus = (ctrl) => {
document.getElementById(ctrl).focus();
return true;
}
</script>
@inject IJSRuntime JsRuntime;
async void Focus(string controlId)
{
var obj = JsRuntime.InvokeAsync<string>(
"MySetFocus", controlId);
}
void AddTodo()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
Focus("todoItem"); // this is the new code
}
}
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 。你可以做这样的事情。 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 />