Индикатор загрузки на странице Blazor - PullRequest
Новая
       30

Индикатор загрузки на странице Blazor

0 голосов
/ 26 апреля 2020

Я пишу ASP. Net Ядро 3.1 с базовыми страницами.

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

То, что я хочу, это поместить сообщение «загрузка ...» во время расчета, а затем отобразить сообщение.

Вот что я сделал в моем C# Классе обслуживания: 

    public async Task<String> traitement1(String argument)
    {
        Thread.Sleep(5);  // I want to simulate a very slow calculation
        return await Task.FromResult("Finished ! Here is your result...");
    }

А вот что я сделал на своей странице bazor: 

<p>@my_result</p>

<button @onclick="@on_btn_click">Click me</button>

@code 
{
    private String my_result = "";

    private async void on_btn_click()
    {
        my_result = "Loading...";
        my_result = await mon_service.traitement1("aaa");
    }
}

Не работает ... Есть идеи?

Спасибо

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Прежде всего, избегайте async void. Blazor полностью поддерживает async Task обработчики событий: 

private async Task on_btn_click()
{
    my_result = "Loading...";
    await Task.Delay(1);   // give the Renderer a chance to catch up
    my_result = await mon_service.traitement1("aaa");
}

Вам необходимо вставить Task.Delay(1);, потому что ваш traitement1() на самом деле не является асинхронным c, он никогда не прекращает поток, в котором он работает. Task.Yield() было бы яснее, но это не всегда работает.

Нет необходимости вызывать StateHasChanged () здесь.

0 голосов
/ 27 апреля 2020

У меня есть компонент, который можно использовать. Я просто обновил его, чтобы вы могли либо выполнить процент выполнения самостоятельно для процесса, либо вы можете установить его просто на приращение с периодичностью c, если вы знаете, сколько времени занимает ваш процесс.

Nuget если вы не хотите копировать код: DataJuggler.Blazor.Components

Если вы не используете Nuget, вам понадобится circle.s css:

(скачать с мой GitHub) https://github.com/DataJuggler/DataJuggler.Blazor.Components/blob/master/wwwroot/css/circle.scss

Автор, заслуживающий доверия:

Андре Фирхов

http://circle.firchow.net/

В любом случае, вам нужно будет добавить его в ваш файл _host.cs html:

Здесь показан путь к пакету Nuget: 

<link href="~/_content/DataJuggler.Blazor.Components/css/circle.css" rel="stylesheet" />

Или если circle.s css находится в файле вашего проекта 

<link href="~/css/circle.css" rel="stylesheet" />

Я пытался опубликовать код ProgressBar.razor и Progress.razor.cs, но переполнение стека сообщило мне, что я превысил ограничение в 30 000 символов, которое мне трудно поверьте как можно меньше кода, поэтому вот ссылка:

https://github.com/DataJuggler/DataJuggler.Blazor.Components/blob/master/ProgressBar.razor

https://github.com/DataJuggler/DataJuggler.Blazor.Components/blob/master/ProgressBar.razor.cs

Использование: 

<div class="progresscontainer3">
    <ProgressBar Subscriber=this Increment="0" Interval="125" 
    ClientHandledIncrement="true" 
    CloseAtExtraPercent="0" Visible="@ShowProgress" Theme=ThemeEnum.Dark 
    Color=ColorEnum.Orange
    Size=SizeEnum.Small OverrideThemeColorForText="true" TextColor="White">
    </ProgressBar>
</div>

Если вы хотите увидеть рабочий пример, зарегистрируйтесь или загрузите изображение, введите этот запрос:

https://pixeldatabase.net

Скрыть Всего <40 </p>

и нажмите Применить.

Или здесь есть видео, которое также показывает индикатор выполнения:

https://youtu.be/K-reLOc1-Uo

Я думаю, что это работает довольно хорошо.

...