Вопрос
Я только начал играть с Blazor, и я уже вижу большой потенциал этой новой структуры.
Мне интересно, однако, как это будет работать с простыми вещами, такими как настройка фокуса на управление вводом? Например, после обработки события щелчка, я хочу настроить фокус на элемент управления текстовым вводом. Должен ли я использовать JQuery для чего-то подобного, или у Blazor есть встроенные методы для такого рода вещей?
благодаря
Обновление: вот как я это делаю сейчас, пока не узнаю больше о Blazor. (Это работает, но я знаю, что будут лучшие способы обработки таких вещей, когда Blazor готов к прайм-тайму.)
По моему мнению, у меня есть следующий раздел сценария:
<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
document.getElementById(ctrl).focus();
return true;
});
</script>
Затем в разделе «Функции» у меня есть эта функция:
private void FocusControl(string ctrl)
{
RegisteredFunction.Invoke<bool>("FocusControl", ctrl);
}
Затем я вызываю его из метода Refresh. (Это пример кода, предоставленного TalkingDotNet по адресу http://www.talkingdotnet.com/create-a-crud-app-using-blazor-and-asp-net-core/ )
private async Task Refresh()
{
todos = await Http.GetJsonAsync<ToDoList[]>("/api/ToDo");
FocusControl("todoName");
StateHasChanged();
}
Принятый ответ
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 />
Популярные ответы
Вы не можете напрямую вызвать функцию JavaScript. Вы должны сначала зарегистрировать свои функции, как,
<script>
Blazor.registerFunction('ShowControl', (item) => {
var txtInput = document.getElementById("txtValue");
txtInput.style.display = "";
txtInput.value = item;
txtInput.focus();
});
return true;
</script>
Затем вам нужно объявить метод на C #, который вызывает эту функцию JavaScript. Подобно,
private void CallJavaScript()
{
RegisteredFunction.Invoke<bool>("ShowControl", itemName);
}
Вы можете вызвать этот метод C # при нажатии кнопки. Подобно,
<button id="btnShow" class="btn btn-primary" @onclick(CallJavaScript)>Show</button>
Это сообщение Создайте приложение CRUD, используя Blazor и ASP.NET Core, показывает рабочую демонстрацию вызова JavaScript из Blazor.