Как сделать события клиентского интерфейса в Blazor

Я только начал играть с Blazor, и я уже вижу большой потенциал этой новой структуры.

мне интересно, как он справится с простыми вещами, такими как настройка фокуса на входном элементе управления? Например, после обработки события click я хочу установить фокус на элемент управления вводом текста. Должен ли я использовать 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();
}
10
asp.net-core blazor c#

2 ответов

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
}

для более подробной информации вы можете обратиться ниже.

если вы хотите улучшить пеналы из 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);
    }
}

затем добавьте этот компонент в корень. (Приложение.cshtml) на

<BlazorExtensionScripts></BlazorExtensionScripts>
<Router AppAssembly=typeof(Program).Assembly />
8

вы не можете напрямую вызвать функцию 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 ядро показывает рабочую демонстрацию вызова JavaScript из Blazor.

2