Как вы вызываете метод asyn c, когда пользователь печатает в текстовом поле (oninput)? - PullRequest
0 голосов
/ 27 марта 2020

Я хочу вызывать асинхронный метод c каждый раз, когда в текстовое поле вносятся изменения.

Я некоторое время смотрел на это, сейчас гуглю и пробую синтаксис, который я нахожу. Приведенный ниже код представляется наиболее точным.

Код страницы бритвы:

    <div class="offset-sm-5 col-sm-3">
        <div class="input-group">
            <input class="form-control" @oninput="@(async () => await OnSearchAsync())"/>
        </div>
    </div>

Код сзади:

    public class ListBase: ComponentBase
    {
        [Inject]
        public IVpbDelegateAdminService VpbDelegateAdminService { get; set; }

        protected VpbDelegateListVm VpbDelegateListVm { get; set; }

        protected override async Task OnInitializedAsync()
        {
            VpbDelegateListVm  = await VpbDelegateAdminService.GetVpbDelegateListVmAsync(1);
        }

        protected async Task OnSearchAsync()
        {
            VpbDelegateListVm = await VpbDelegateAdminService.GetVpbDelegateListVmAsync(2);
        }
    }

Любая помощь будет оценена.

Ответы [ 2 ]

2 голосов
/ 27 марта 2020

Вы пытаетесь вызвать метод из своего кода?

Если это так, это должно сработать.

 <div class="offset-sm-5 col-sm-3">
        <div class="input-group">
            <input class="form-control" @oninput="@OnSearchAsync"/>
        </div>
    </div>

@code
{
    private async Task OnSearchAsync()
    {
        var data = await GetYourData();
    }
}
0 голосов
/ 31 марта 2020

Мое решение -

@page "/Demo_domtree_input_typing"

@{ BlazorSession.Current["codename"] = "Demo_domtree_input_typing"; }

Your message :
<BlazorDomTree @ref="dt"></BlazorDomTree>

@code{

    BlazorDomTree dt;

    protected override void OnAfterRender(bool first)
    {
        if (!first)
            return;

        PlusControl inp1 = dt.Root.Create("input type='text'");
        inp1.OnChanging(delegate
        {
            BlazorSession.Current.Toast("Your are typing '" + inp1.Value + "'", 1000, "typinginfo");
        });
    }
}

Демонстрация в режиме реального времени: http://demo.blazorplus.com/Demo_domtree_input_typing

(требуется импорт и настройка пакета nuget 'BlazorPlus')

...