CODEWITHSUNDEEP
blazorwebassembly
Alexander
Alexander

Reputation: 106

EventCallback of Childcomponent to an other ChildComponent, : Blazor

EDIT::WORKING SOLUTION

I am trying to solve the problem when uploading a file ((in the)/through) FileUpload component, that the FileDownload component which got a child DownloadTable component doesn't update, it only works when I force a refresh, because it reloads the webapplication which I want to avoid.

enter image description here

Index.razor



    @page "/"


    <h1>Drag/drop file viewer</h1>

    <p>Shows how you can present a custom UI instead of the native file input.</p>

    <FileUpload RefreshPageDownload="RefreshPageDownload"/>

    <FileDownload State="State" />

    @code {
        [Inject]
         public NavigationManager NavigationManager { get; set; }

        public bool State { get; set; }
        public async Task RefreshPageDownload(int input)
        {
            await Task.CompletedTask;
            State = !State;
        }
    }

FileUpload.razor




<div id="drag-drop-zone">
    <InputFile OnChange="UploadFile" multiple />
    @status
</div>

@code {
    const string DefaultStatus = "Drop a text file here to view it, or click to choose a file";
    const int MaxAllowedFiles = 5;
    string status = DefaultStatus;

    List<Upload> uploadList = new();

    [Inject]
    IUploadService _uploadService { get; set; }

    [Parameter]
    public EventCallback<int> RefreshPageDownload { get; set; }


    async Task UploadFile(InputFileChangeEventArgs e)
    {
        uploadList.Clear();
        foreach (var input in e.GetMultipleFiles(MaxAllowedFiles))
        {

            var buffers = new byte[input.Size];
            await input.OpenReadStream().ReadAsync(buffers);
        
            var u = new Upload {
                Content =  buffers,
                MimeType = input.ContentType,
                Name = input.Name,
                Date = input.LastModified.DateTime,
                Size = input.Size
            };

            uploadList.Add(u);
        }

        await _uploadService.UploadFile(uploadList);

        await RefreshParent();
    }

    public async Task RefreshParent()
    {
        await RefreshPageDownload.InvokeAsync(1);
    }
}

FileDownload




<div class="row">
    <div class="col-md-10">
        <!-- <Search OnSearchChanged="SearchChanged" /> -->
    </div>
</div>
<div class="row">
    <DownLoadTable Downloads="downloadList" />
</div>
<div class="row">
    <div class="col">
        <Pagination MetaData="MetaData" Spread="2" SelectedPage="SelectedPage" />
    </div>
</div>

@code {
public partial class FileDownload
    {
        [Parameter]
        public bool State { get; set; }

        public MetaData MetaData { get; set; } = new();

        private ProductParameters _productParameters = new ProductParameters();

        private IEnumerable<Download> downloadList { get; set; }

        [Inject]
        IDownloadService _downloadService { get; set; }

        private async Task SelectedPage(int page)
        {
            _productParameters.PageNumber = page;
            await GetProducts();
        }

        private async Task GetProducts()
        {
            var pagingResponse = await _downloadService.GetAll(_productParameters);
            downloadList = pagingResponse.Items;
            MetaData = pagingResponse.MetaData;
        }

        public async Task Save()
        {
            StateHasChanged();
            Console.WriteLine("NEVER CALLED");
        }

        protected async override Task OnParametersSetAsync()
        {
           await  GetProducts();
        }
    }

}

Any idea, what I possibly could do after an upload, so it refreshes the FileDownload component with its child component.

Best Alex

enter image description here

Upvotes: 1

Views: 113

Answers (1)

Mister Magoo
Mister Magoo

Reputation: 8954

During the render cycle, Blazor will check known types (bool is one) for changes to their value.

If all parameters are known to have not changed, the component will not be submitted for re-rendering.

Adding a simple parameter, like a bool and toggling its value when you want to enable a render is one simple method to use.

In this case, if you toggle the "State" variable in RefreshPageDownload, then Blazor will include that component in processing the current render cycle.

Upvotes: 3

Related Questions