Mudblazor Razor page is loading more than one time

190 Views Asked by At

I am working on Blazor Web Assembly using Mudblazor. OnInitializedAsync method is being called only one time, but why razor page is rendered two times. Second question is value of message variable is displayed in MudTextField after 2nd iteration of razor page. I have used OnKeyPressed event, and I see that after each key pressed, razor page is rendered again. I will be thankful for suggestion of these issues

@page "/Test"
@using System.ComponentModel.DataAnnotations;
<h1> @message </h1>
<MudTextField Required="true"
              OnKeyPress="OnKeyPressed"
              Immediate="true"
              Margin="Margin.Dense"
              T="Int64"
@bind-Value="@Barcode"
              Label=""
              Variant="Variant.Outlined"
              Adornment="Adornment.Start"
              AdornmentIcon="@Icons.Material.Filled.Person">
</MudTextField>
@if (Barcode > 0)
{
    <MudTextField Label="message" @bind-Value="@message" Variant="Variant.Outlined"></MudTextField>
}
@code {
    public Int64 Barcode { get; set; }
    string message;
    protected override async Task OnInitializedAsync()
    {
        message = "Hello";
        Barcode = 0;
    }

    public async void OnKeyPressed(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await Task.Delay(TimeSpan.FromSeconds(4));
            message = "Hello again";
        }
    }
}

I am using Delay method, to change text value of MudTextField afte 4 seconds.

There are some helpful links for Blazor server applications but couldn't find for Blazor web assembly applications.

2

There are 2 best solutions below

0
On BEST ANSWER

I have created identical razor page and seperate out the code behind logic in seperate class. On Enter key pressed event, I call alternate razor component. I don't know it's a better solution, but for me it is ok. If someone else find other solution, I will appreciate.

2
On

Set Immediate to false. The immediate property is defined in the Docs as

If true, the input will update the Value immediately on typing. If false, the Value is updated only on Enter.