Требуется руководство по использованию Blazor и обновлению интерфейса со статусом из метода расширения - PullRequest
Новая
       34

Требуется руководство по использованию Blazor и обновлению интерфейса со статусом из метода расширения

0 голосов
/ 15 октября 2019

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

Я хотел бы в режиме реального времени / постоянно обновлять пользовательский интерфейс по мере продвижения этих изменений размера и оптимизации.

Каков общий синтаксис для обновления пользовательского интерфейса Blazor данными модели, возвращаемыми из этогометод? Ни один из примеров, которые я видел до сих пор, не демонстрирует это обновление пользовательского интерфейса с помощью исполняемого кода на стороне сервера.

ОБНОВЛЕНИЕ:

Это моя страница HTML: 

<div class="container-fluid">
    <h2>Upload</h2>
    <form id="UploadForm" method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Upload" asp-antiforgery="false" autocomplete="off" novalidate="novalidate">
        <div class="dropzone" id="DropzoneArea"></div>
        <div class="dropzone-fallback" style="display: none;">
            <label id="FilesLabel" for="Files" class="sr-only">Files</label>
            <input type="file" id="Files" name="files" required multiple class="w-100" placeholder="File to optimize..." data-validation-require="Please select a file to squeeze and slice!" />
        </div>
        <button id="UploadButton" type="button" class="btn btn-primary dropzone-upload">Upload</button>
    </form>
</div>
<div class="container-fluid">
    <ul id="statusList"></ul>
</div>

Моя публикация вызывает этот метод: 

private bool InitializeProcessing(List<IFormFile> files) 
{
    Parallel.ForEach(files.Where(f => f.ContentType.Contains("jpeg") || f.ContentType.Contains("png")), file =>
    {
        List<ImageModel> imageList = ImageRequestExtensions.GetImageModelList(file);
        List<ProcessedImageModel> processedImageList = ImageRequestExtensions.GetProcessedImageModelList(imageList, cache);
    });
    return true;
}

Это метод ImageRequestExtensions.GetProcessedImageModelList, я хотел бы асинхронно добавлять элементы в statusList UL в HTML: 

public static List<ProcessedImageModel> GetProcessedImageModelList(List<ImageModel> input, IMemoryCache cache)
{
    List<ProcessedImageModel> outputList = new List<ProcessedImageModel>();
    foreach (ImageModel image in input)
    {
        List<ProcessedImageModel> processedImageList = ImageManipulationExtensions.Process(image, cache);
        outputList.AddRange(processedImageList);
// WANT TO UPDATE UI HERE
    }
    return outputList;
}
...