Skip to main content

Return to Question

added 477 characters in body
Source Link
Arve Hansen
Arve Hansen
  • 1k
  • 12
  • 17
// ReactOnParameterUpdate.razor
<h2>@Message</h2>

@code
{
    [Parameter]
    public string Input { get; set; }

    protected string Message = "";
    private string _previousInput = null;

    protected override async Task OnParametersSetAsync()
    {
        if (_previousInput != Input)
        {
            _previousInput = Input;
            await SomeAsyncMethod();
        }
    }

    private async Task SomeAsyncMethod()
    {
        Message = $"Async method was called at {DateTime.Now}";
        await Task.CompletedTask;
    }
}


// ReactOnParameterUpdate.razor
<h2>@Message</h2>

@code
{
    [Parameter]
    public string Input { get; set; }

    protected string Message = "";
    private string _previousInput = null;

    protected override async Task OnParametersSetAsync()
    {
        if (_previousInput != Input)
        {
            _previousInput = Input;
            await SomeAsyncMethod();
        }
    }

    private async Task SomeAsyncMethod()
    {
        Message = $"Async method was called at {DateTime.Now}";
        await Task.CompletedTask;
    }
}


// Index.razor
@page "/"

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Input:</span>
    </div>
    <input type="text" class="form-control" @bind="@Input">
</div>

<ReactOnParameterUpdate Input=@Input></ReactOnParameterUpdate>

@code
{
    protected string Input;
}

// Index.razor
@page "/"

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Input:</span>
    </div>
    <input type="text" class="form-control" @bind="@Input">
</div>

<ReactOnParameterUpdate Input=@Input></ReactOnParameterUpdate>

@code
{
    protected string Input;
}

EDITED: From suggestions below and for completeness, here is how you can use SetParametersAsync:

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        foreach (var param in parameters)
        {
            if (param.Name == nameof(Input) && (string)param.Value != Input)
            {
                await SomeAsyncMethod();
            }
        }
        await base.SetParametersAsync(parameters);
    }

// ReactOnParameterUpdate.razor
<h2>@Message</h2>

@code
{
    [Parameter]
    public string Input { get; set; }

    protected string Message = "";
    private string _previousInput = null;

    protected override async Task OnParametersSetAsync()
    {
        if (_previousInput != Input)
        {
            _previousInput = Input;
            await SomeAsyncMethod();
        }
    }

    private async Task SomeAsyncMethod()
    {
        Message = $"Async method was called at {DateTime.Now}";
        await Task.CompletedTask;
    }
}


// Index.razor
@page "/"

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Input:</span>
    </div>
    <input type="text" class="form-control" @bind="@Input">
</div>

<ReactOnParameterUpdate Input=@Input></ReactOnParameterUpdate>

@code
{
    protected string Input;
}

// ReactOnParameterUpdate.razor
<h2>@Message</h2>

@code
{
    [Parameter]
    public string Input { get; set; }

    protected string Message = "";
    private string _previousInput = null;

    protected override async Task OnParametersSetAsync()
    {
        if (_previousInput != Input)
        {
            _previousInput = Input;
            await SomeAsyncMethod();
        }
    }

    private async Task SomeAsyncMethod()
    {
        Message = $"Async method was called at {DateTime.Now}";
        await Task.CompletedTask;
    }
}


// Index.razor
@page "/"

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Input:</span>
    </div>
    <input type="text" class="form-control" @bind="@Input">
</div>

<ReactOnParameterUpdate Input=@Input></ReactOnParameterUpdate>

@code
{
    protected string Input;
}

EDITED: From suggestions below and for completeness, here is how you can use SetParametersAsync:

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        foreach (var param in parameters)
        {
            if (param.Name == nameof(Input) && (string)param.Value != Input)
            {
                await SomeAsyncMethod();
            }
        }
        await base.SetParametersAsync(parameters);
    }
Source Link
Arve Hansen
Arve Hansen
  • 1k
  • 12
  • 17

Is there a "OnParameterChanged" event in Blazor?

When a parameter in my Blazor component is changed, I want to do some stuff. If it's not too much, I could do it in the setter. However, if I want to do something more, maybe in a background thread, I can't (shouldn't) do it in the setter.

I know about OnParameterSetAsync, but how do I know what parameter was set? I can get it to work (see below), but was wondering if there is a better way?

Here is my component:

// ReactOnParameterUpdate.razor
<h2>@Message</h2>

@code
{
    [Parameter]
    public string Input { get; set; }

    protected string Message = "";
    private string _previousInput = null;

    protected override async Task OnParametersSetAsync()
    {
        if (_previousInput != Input)
        {
            _previousInput = Input;
            await SomeAsyncMethod();
        }
    }

    private async Task SomeAsyncMethod()
    {
        Message = $"Async method was called at {DateTime.Now}";
        await Task.CompletedTask;
    }
}

And the component is used here:

// Index.razor
@page "/"

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Input:</span>
    </div>
    <input type="text" class="form-control" @bind="@Input">
</div>

<ReactOnParameterUpdate Input=@Input></ReactOnParameterUpdate>

@code
{
    protected string Input;
}