Blazor component lifecycle

[GevorDanielyan]

Hello everyone.

I have a general question related Blazor. For example, I have a component, which is a Blazorise Data Grid. I created bool parameter and passed it to Data Grid as reference for Editable. This is because on another page where I use this component, I need it to be editable in one place and not editable in another. How can I do it so that on one page where I change the data, on the other non-editable page, the data appears at once?

This is non editable grid in one page when I used data grid component.

And in another page this is editable

When I'm changing something , I need to immediately appears changes in first non editable grid. How can I do this?

Thanks in advance.

[stsrki]

You should look into state management. https://jonhilton.net/blazor-state-management/

The easiest is to use cascading values for storing the state.

[GevorDanielyan]

@using Grpc.Core
@using TariffgRPCService
@using Blazorise.DataGrid
@using GrpcService.BlazorApp.Models
@using Google.Protobuf.WellKnownTypes
@inject ILogger<Tariff> _logger
@inject TariffgRPCService.TariffService.TariffServiceClient _tarifServiceClient

<h6>@tariffForDepositing</h6>
<Div Style="display: flex; justify-content: space-between; width: 31%;">
    <DataGrid TItem="TariffModel"
              Data="_tariff"
              Virtualize
              Editable="@Editable"
              EditMode="DataGridEditMode.Popup"
              RowUpdated="@OnRowUpdated"
              Hoverable
              HeaderThemeContrast="ThemeContrast.Light"
              Bordered="true"
              Style="font-size: .80em;"
              Responsive>

        <DataGridColumns>
            <DataGridCommandColumn Context="dataGridContext"
                                   NewCommandAllowed="false"
                                   EditCommandAllowed="true"
                                   DeleteCommandAllowed="false"
                                   TItem="TariffModel">
                <EditCommandTemplate>
                    <Button Color="Color.Primary" Clicked="dataGridContext.Clicked">Edit</Button>
                </EditCommandTemplate>
            </DataGridCommandColumn>
            <DataGridColumn TItem="TariffModel" Field="@nameof(TariffModel.Iso)" Caption="ISO" Sortable="false" />
            <DataGridColumn TItem="TariffModel" Field="@nameof(TariffModel.Value)" Caption="Cash In" Editable="true" Sortable="false" />
        </DataGridColumns>
    </DataGrid>
</Div>


@code {

    [Parameter]
    public bool Editable { get; set; }

    private const string tariffForDepositing = "Հետևյալ անկանխիկ արտարժույթների հաշիվներին մուտքագրման համար սահմանվում են սակագներ";

    private List<TariffModel>? _tariff;
    Empty emptyRequest = new Empty();
    [Inject] IMessageService? MessageService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _tariff = new List<TariffModel>();
        await GetTariffAsync();
        await base.OnInitializedAsync();
    }

    private async Task GetTariffAsync()
    {
        try
        {
            using (var call = _tarifServiceClient.GetTariff(emptyRequest))
            {
                await foreach (var response in call.ResponseStream.ReadAllAsync())
                {
                    var tarifResponse = new TariffModel
                        {
                            Iso = response.SYM,
                            Value = response.TIV
                        };
                    _tariff!.Add(tarifResponse);
                }
            }
        }
        catch (RpcException ex) when (ex.StatusCode == StatusCode.Internal)
        {
            _logger.LogError(ex.Message);
            throw;
        }
    }

    private async Task OnRowUpdated(SavedRowItem<TariffModel, Dictionary<string, object>> e)
    {
        var tariff = e.Item;
        UpdateTariffRequest request = new UpdateTariffRequest
            {
                Iso = tariff.Iso,
                Value = tariff.Value!.Value
            };

        var response = await _tarifServiceClient.UpdateTariffAsync(request);
        _logger.LogInformation("Updated tariff");

        if (response.Message is null)
        {
            await MessageService!.Error("Cannot update Tariff");
        }

        await MessageService!.Info("Updated successfully");
    }
}

Dear @stsrki , thank you for your information. So this is my component, which I use in different pages. So how can I solve my issue?

First I use it like non editable like this

<Tariff Editable = "false"></Tariff>

And as editable like this.

<Tariff Editable = "true"></Tariff>