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

Question

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

asp.net-core blazor c# javascript javascript-interop

Вопрос

Я только начал играть с 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

camainc

Популярные ответы

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 />

VibeeshanRC

Подробнее о Stack Overflow

Accepted Answer

Я хочу добавить более актуальный (по состоянию на 0.9.0) пример вызова функции JavaScript для установки фокуса на другой элемент управления после некоторого события, например нажатия кнопки. Это может быть полезно для кого-то, кто только начинает с Blazor (как я).

Этот пример основан на примере кода в документации Blazor «Создайте свое первое приложение для компонентов Blazor» по адресу https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-razor-components- приложение? вид = aspnetcore-3,0

Сначала следуйте всем инструкциям в документации. Если у вас есть рабочая страница списка дел, добавьте следующее:

В нижней части Index.html, под wwwroot и под тегом script, который загружает webassembly.js, добавьте следующий скрипт:

<script>
        window.MySetFocus = (ctrl) => {
            document.getElementById(ctrl).focus();
            return true;
        }
</script>

В верхней части страницы todo.cshtml добавьте следующий оператор using:

@inject IJSRuntime JsRuntime;

В разделе @functions вашей страницы todo.cshtml добавьте следующую функцию:

    async void Focus(string controlId)
    {
        var obj = JsRuntime.InvokeAsync<string>(
            "MySetFocus", controlId);
    }

В функции AddToDo (), чуть ниже строки, где вы устанавливаете переменную «newToDo» в качестве пустой строки, добавьте вызов функции Focus, передав идентификатор строки элемента управления вводом. (Пример в документации не назначает идентификатор для элемента управления вводом, поэтому просто добавьте его самостоятельно. Я назвал мой "todoItem").


void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
            Focus("todoItem"); // this is the new code
        }
    }

Создайте и запустите ваше приложение. Когда вы нажимаете кнопку «Добавить новый элемент», новый элемент должен быть добавлен в список, элемент управления вводом будет отключен, и фокус должен вернуться в элемент управления вводом, готовый к добавлению другого элемента.

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

Вопрос

Fastest Entity Framework Extensions

Принятый ответ

Популярные ответы

Performance

Expression Evaluator