题
我刚刚开始接触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
首先，按照文档中的所有说明进行操作。当您有一个工作列表时，请添加以下内容：
- 在Index.html的底部，wwwroot下以及加载webassembly.js的脚本标签下方，添加以下脚本：
<script>
window.MySetFocus = (ctrl) => {
document.getElementById(ctrl).focus();
return true;
}
</script>
- 在todo.cshtml页面顶部，添加以下using语句：
@inject IJSRuntime JsRuntime;
- 在todo.cshtml页面的@functions部分中，添加以下函数：
async void Focus(string controlId)
{
var obj = JsRuntime.InvokeAsync<string>(
"MySetFocus", controlId);
}
- 在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
}
}
- 生成并运行您的应用程序。当您单击“添加新项”按钮时，应将新项添加到列表中，将输入控件清空，并且焦点应回到输入控件中，以准备添加其他项。
热门答案
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 />
许可下: CC-BY-SA with attribution
不隶属于 Stack Overflow