new to Blazor and I have a simple question

In my Blazor app, I have a simple select element:

<select  aria-label="Default select example" @onchange="ItemSelected">
 <option selected>Open this select menu</option>
  
  @foreach(var item in Items)
  {
    <option value="@item.Id"> @item.Name </option>
  }
</select>

The idea is when a user selects an option, I want to get the object instead of the key, here is the function:

List<object> ItemContainer = new List<object>(); 
private void ItemSelected(ChangeEventArgs obj) {
  ...
  ItemContainer.Add(obj); 
}

How do I capture the object instead?

CodePudding user response：

You can't directly. ChangeEventArgs returns a string as it's Value object.

You need to do something like this:

@page "/"

<select @onchange=OnSelect >
    @foreach (var country in Countries)
    {
        <option value="@country.Id" selected="@this.IsSelected(country)">@country.Name</option>
    }
</select>

<div>
    Selected : @this.SelectedCountry 
</div>

@code {
    private Country? country;
    private string SelectedCountry => this.country?.Name ?? "None Selected";

    protected override void OnInitialized()
    {
        // to demo selected is working
        this.country = this.Countries[1];
    }

    private void OnSelect(ChangeEventArgs e)
    {
        if (int.TryParse(e.Value?.ToString(), out int value))
            country = Countries.SingleOrDefault(item => item.Id == value);
    }

    private bool IsSelected(Country c)
        => c == this.country;

    public List<Country> Countries = new List<Country>
        {
            new Country { Id =44, Name = "UK" },
            new Country { Id =61, Name = "France" },
            new Country { Id =1, Name = "USA" },

        };

    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
    }
}

CodePudding user response：

@page "/"


<select @onchange="ItemSelected" >
    <option value="null">Select...</option>

    @foreach (var option in options)
    {
        <option @key="option" value="@option.ID">@option.Value</option>
    }
</select>
       
  
@code {
    private Option option;

    private List<Option> options = Enumerable.Range(1, 10).Select(i => new Option { ID = i, Value = $"Option{i}" }).ToList();

    private void ItemSelected(ChangeEventArgs args)
    {
        if (int.TryParse(args.Value.ToString(), out int selectedID))
        {

            option = options.Where(o => o.ID == selectedID).FirstOrDefault();

            Console.WriteLine(option.ID.ToString());
            Console.WriteLine(option.Value);
        }
    }


    public class Option
    {
#nullable enable
        public int? ID { get; set; }
#nullable disable
        public string Value { get; set; }
    }

}

CodePudding user response：

Sorry I can't type well now to check the syntax exactly, but maybe something like:

@onchange="(e)=> ItemSelected(Items.Single(i=> i.ID.ToString() == e.Value.ToString()))"

And then

private void ItemSelected(YourItemClass SelectedItem) {}