我刚刚开始玩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
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);
}
}
我想添加一个更新的(从0.9.0开始)调用JavaScript函数的示例,在一些事件之后将焦点设置为另一个控件,例如单击按钮。这可能对刚刚开始使用Blazor(像我一样)的人有所帮助。
此示例以<BlazorExtensionScripts></BlazorExtensionScripts>
<Router AppAssembly=typeof(Program).Assembly />
上Blazor文档“构建您的第一个Blazor组件应用程序”中的示例代码为基础构建
首先,请按照文档中的所有说明进行操作。当您有一个工作的待办事项列表页面,然后添加以下内容:
https://docs.microsoft.com/en-us/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);
}
你无法直接调用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的工作演示。