Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How to use ValueChanged in mudselect

$
0
0

I am trying to write to write general component for MudSelect dropdown. The options for the component is passed from the Parent , When the selected options change I wanted to get the value defined in the options which is a class and navigate to the page defined.

Th following is the code

HomePage.razor<HomeContainerComponent><div><HomeDropdownComponent Options="@dropdownOptions" TValue="string" SelectedOption="@selectedOption" OnValueChanged="OnValueChanged" SelectedOptionChanged="SelectedOptionChanged"></HomeDropdownComponent></div></<HomeContainerComponent>HomePage.razor.csusing Microsoft.AspNetCore.Components;namespace Test.Shared.Components.Pages{    public partial class HomePage :ComponentBase    {        [Inject] private NavigationManager? NavigationManager { get; set; }        protected List<DropdownOptions<string>> dropdownOptions { get; set; } = new();              public DropdownOptions<string> selectedOption { get; set; } = new();               protected  override void OnInitialized()        {            dropdownOptions = FetchDropdownOptions();            selectedOption = dropdownOptions?.FirstOrDefault() ?? new();        }        private List<DropdownOptions<string>> FetchDropdownOptions()        {          return  dropdownOptions = new List<DropdownOptions<string>>            {                new DropdownOptions<string> { Value = "Option1", Text = "Option1" ,ImageUrl ="_content/Test.Shared.Components/option1.png"},                new DropdownOptions<string> { Value = "Option2", Text = "Option2" ,ImageUrl ="_content/Test.Shared.Components/option2.png"},                new DropdownOptions<string> { Value = "Option3", Text = "Option3" ,ImageUrl ="_content/Test.Shared.Components/option3.png" , PageName = "/mud-tab"},                new DropdownOptions<string> { Value = "Option4", Text = "Option4" ,ImageUrl ="_content/Test.Shared.Components/option3.png"},            };        }        private void OnValueChanged(string selected)        {            selectedOption = dropdownOptions?.Where( x => x.Text == selected).FirstOrDefault() ?? new();            NavigationManager?.NavigateTo(selectedOption.PageName);            // Do other stuff        }    } public class DropdownOptions<T> {     public T Value { get; set; } = default!;     public string Text { get; set; } = string.Empty;     public string Icon { get; set; } = string.Empty;     public string ImageUrl { get; set; } = string.Empty;     public string PageName { get; set; } = string.Empty; }}HomeDropdownComponent.razor@typeparam TValue<MudSelect T="TValue" Label="@Label"  Variant="@Variant" AnchorOrigin="@AnchorOrigin" ValueChanged="OnSelectedValueChanged"> @foreach (var option in Options)    {<MudSelectItem T="TValue" Value="@(option.Value)">            @if (!string.IsNullOrEmpty(option.Icon))            {<MudIcon Icon="@option.Icon" Class="mr-2" />            }            @if (!string.IsNullOrEmpty(option.ImageUrl))            {<MudImage Src="@option.ImageUrl" Class="ml-2" />            }            @option.Text<div style="flex-grow: 1"></div></MudSelectItem>    }</MudSelect>HomeDropdownComponent.razor.csusing Microsoft.AspNetCore.Components;using MudBlazor;namespace Test.Shared.Components{    public partial class HomeDropdownComponent<TValue>    {        [Parameter]        public string Label { get; set; } = string.Empty;        [Parameter]        public string Placeholder { get; set; } = string.Empty;        [Parameter]        public List<DropdownOptions<TValue>> Options { get; set; } = new();        [Parameter]        public DropdownOptions<TValue> SelectedOption { get; set; } = default!;        [Parameter]        public EventCallback<TValue> OnValueChanged { get; set; } = default!;        [Parameter]        public Variant Variant { get; set; } = Variant.Outlined;        public Origin AnchorOrigin = Origin.BottomCenter;        private TValue Value =  default!;        private async Task OnSelectedValueChanged()        {            if (OnValueChanged.HasDelegate)                await OnValueChanged.InvokeAsync();        }    }}

When I run the code no value is selected by default , also The valuechanged function returns null. My requirement is when the dropdown value changes get the value of the page and navigate to that page,if i use the<MudSelect T="TValue" Label="@Label" @bind-Value="SelectedOption.Value" Variant="@Variant" AnchorOrigin="@AnchorOrigin" > the first drop down value is slected.

if if use <MudSelect T="TValue" Label="@Label" @bind-Value="SelectedOption.Value" Variant="@Variant" AnchorOrigin="@AnchorOrigin" ValueChanged = "OnSelectedValueChanged">

It shows error ValueChanged is used more than one time.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>