How to change selected options for MudBlazor MudSelect component with buttons?

51 Views Asked by At

I need to give user a quick set function, to help them select two frequently-used options with one click on quick set buttons. I don't know how to update MudSelect selected options programmingly.

Here is the codes:

<MudButtonGroup Color="Color.Default" Variant="Variant.Text" Size="Size.Small">
<MudButton ButtonType="ButtonType.Button" OnClick="@(() => QuickSet(enUSId, zhCNId))">enUS -> zhCN</MudButton>
<MudButton ButtonType="ButtonType.Button" OnClick="@(() => QuickSet(enUSId, zhTWId))">enUS -> zhTW</MudButton>
<MudButton ButtonType="ButtonType.Button" OnClick="@(() => QuickSet(zhCNId, enUSId))">zhCn -> enUS</MudButton>
<MudButton ButtonType="ButtonType.Button" OnClick="@(() => QuickSet(zhTWId, enUSId))">zhTW -> enUS</MudButton>
</MudButtonGroup>

  <MudSelectExtended @ref="sourceSelection" T="int" Label="Source Language"
   ValuePresenter="ValuePresenter.ItemContent"
   ItemCollection="_srcLanguageIds"
   @bind-Value="@Model.SourceLanguageId"
   For="@(()=> Model.SourceLanguageId)"
   AnchorOrigin="Origin.BottomCenter"
   ItemDisabledFunc="IsSourceLanguageDisabled">
<ItemTemplate Context="sourceContext">
<SingleLanguageDisplay Id="@sourceContext.Value" />
</ItemTemplate>
</MudSelectExtended>

<MudSelectExtended @ref="targetSelection" T="int" Label="Target Language"
   ValuePresenter="ValuePresenter.ItemContent"
   ItemCollection="_tgtLanguageIds" @bind-Value="@Model.TargetLanguageId"
   For="@(()=> Model.TargetLanguageId)"
   AnchorOrigin="Origin.BottomCenter"
   ItemDisabledFunc="IsTargetLanguageDisabled">
<ItemTemplate Context="targetContext">
<SingleLanguageDisplay Id="@targetContext.Value" />
</ItemTemplate>


private Task QuickSet(int sid, int tid)
{
Model.SourceLanguageId = sid;
Model.TargetLanguageId = tid;

sourceSelection.SelectOption(Model.SourceLanguageId);
sourceSelection.ForceUpdate();

targetSelection.SelectOption(Model.TargetLanguageId);
targetSelection.ForceUpdate();

return Task.CompletedTask;
}

I need to update selected languages when user clicked any quick set button.

But nothing happened, UI didn't update.

0

There are 0 best solutions below