Я только начал играть с Blazor и уже вижу огромный потенциал этого нового фреймворка.
Мне интересно, однако, как он справится с выполнением простых вещей, таких как установка фокуса на элемент управления вводом? Например, после обработки события щелчка я хочу установить фокус на элемент управления вводом текста. Должен ли я использовать JQuery для чего-то подобного, или у Blazor будут какие-то встроенные методы для такого рода вещей?
Спасибо
Обновление: ниже я опубликовал ответ с примером того, как установить фокус на элемент управления, вызвав функцию JavaScript из кода .Net.
На данный момент (Blazor 0.9.0) вы создаете свои функции JavaScript в Index.html (или ссылаетесь на них из Index.html), а затем на своей странице или компоненте Blazor вы вызываете JsRuntime.InvokeAsync ("functionName", parms);
https://docs.microsoft.com/en-us/aspnet/core/razor-components/javascript-interop
Я хочу добавить более актуальный (по состоянию на 0.9.0) пример вызова функции JavaScript для установки фокуса на другой элемент управления после некоторого события, например нажатия кнопки. Это может быть полезно для кого-то, кто только начинает с Blazor (как я).
Этот пример основан на примере кода в документации Blazor «Создайте свое первое приложение для компонентов Blazor» по адресу https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-razor-components- приложение? вид = 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 # заменяет часть 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
}
для получения дополнительной информации вы можете обратиться ниже.
Если вы хотите улучшить pashaging 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 />