CODEWITHSUNDEEP
c#asp.netblazormudblazor
T0bi
T0bi

Reputation: 371

Blazor text is not changed immediately upon insertion

I have an application where the user can insert text at a certain location. The text is shown on a badge on the same page. What I want is that as the user types the changes are immediately displayed in the badge. I have added an oninput event, but it seems that the oninput event does not update the razor page because the badge remains blank when I have input changes. The text is only displayed when the focus is lost on TextField.

How can I make it so that when I insert letters, they are immediately displayed on the badge?

Textinput:

<MudTextField @bind-Value="@itemAttribute.Title" @oninput="(e)=> itemAttribute.Title = e.Value.ToString()" />

Badge:

<MudBadge Overlap="false" Style="@($"color: #CFD8DC;")" Color="Color.Transparent" Content="@itemAttribute.Title">

Variable:

 [Parameter] public ItemAttribute itemAttribute { get; set; }

Upvotes: 4

Views: 4822

Answers (2)

MB_18
MB_18

Reputation: 2251

You should use StateHasChanged method. The StateHasChanged method notifies the component that its state has changed. When applicable, this will cause the component to be re-rendered.

You can try this code:

Textinput:

<MudTextField @bind-Value="@itemAttribute.Title" @oninput="()=> UpdateBadge()" />

Badge:

<MudBadge @bind-Value="@BadgeContent.Title" Overlap="false" Style="@($"color: #CFD8DC;")" Color="Color.Transparent" Content="@itemAttribute.Title">

Code:

[Parameter] public ItemAttribute itemAttribute { get; set; }
[Parameter] public ItemAttribute BadgeContent { get; set; }

private void UpdateBadge()
{
   BadgeContent.Title = itemAttribute.Title;
   StateHasChanged();
}

Upvotes: -1

Nicola Biada
Nicola Biada

Reputation: 2800

Try simply:

<MudTextField @bind-Value="@itemAttribute.Title" Immediate="true" />

Upvotes: 15

Related Questions