@bind and @onchange for a select on blazor c#

Question

Hello, I’m new with blazor I wanted to do the following. I have 2 Lists, Category and another List2, in the form I have 1 select for the category and another select for List2, and I wanted to make sure that when changing the option selected from the category, I changed the list of the select from List2 (the data contains Foreign key cd_category). Ex: I select category 1, and the options of the List2 select will change according to the selected category. I already have a function to do this filter, so how would I make select category call this function (listPorCategorySelected(int cd_categoriesSelected){}) when selecting a particular option? because I will need both the selected category and the selected Lista2 option.

Answer 1

In Blazor only needs the element <select> have a bind for the exchange of information in the second <select>, a basic example illustrating a basic situation:

Classes:

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class SubCategory
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int CategoryId { get; set; }
}

these two classes are used as follows, after choosing the Category makes a filter on SubCategory regarding your key CategoryId.

In the code blazor:

<h3>Select</h3>
<div>
  <select @bind="CategoryId">
    <option value="0">Selecione</option>
    @foreach (var category in Categories)
    {
      <option value="@category.Id">@category.Name</option>
    }
  </select>
  @CategoryId
  <select>
    @foreach (var subCategory in SubCategories.Where(c => c.CategoryId == CategoryId))
    {
      <option value="@subCategory.Id">@subCategory.Name</option>
    }
  </select>
</div>
@code {
  public int CategoryId { get; set; } = 0;
  List<Category> Categories = new List<Category>();
  List<SubCategory> SubCategories = new List<SubCategory>();
  protected override void OnInitialized()
  {
    Categories.Add(new Category { Id = 1, Name = "Alimento" });
    Categories.Add(new Category { Id = 2, Name = "Remedio" });

    SubCategories.Add(new SubCategory { Id = 1, Name = "Arroz", CategoryId = 1 });
    SubCategories.Add(new SubCategory { Id = 2, Name = "Feijão", CategoryId = 1 });
    SubCategories.Add(new SubCategory { Id = 3, Name = "Pão", CategoryId = 1 });

    SubCategories.Add(new SubCategory { Id = 4, Name = "ASS", CategoryId = 2 });
    SubCategories.Add(new SubCategory { Id = 5, Name = "Doril", CategoryId = 2 });
  }    
}

Explanation of the code:

3 variables are created CategoryId, Categories and SubCategories respectively an integer and two lists that are manually populated at component startup.

In the first select if it normally loads all the Categories and in the second select make a filter to load it with CategoryId. Every time this variable changes value the component updates and changes subsequent boxes only by configuring in the categories box @bind="CategoriaId" and so your dynamic filter is ready.

---

Another way onChange, this in question gives more control over another select, because in this can already position the loaded element, so it will depend on what you need, example:

h3>Select</h3>
<div>
  <select value="@CategoryId" @onchange="@ChangeCategory">
    <option value="0">Selecione</option>
    @foreach (var category in Categories)
    {
      <option value="@category.Id">@category.Name</option>
    }
  </select>
  @CategoryId
  <select @bind="SubCategoryId">
    @foreach (var subCategory in SubCategoriesResults)
    {
      <option value="@subCategory.Id">@subCategory.Name</option>
    }
  </select>
  @SubCategoryId
</div>
@code {

    public int CategoryId { get; set; } = 0;
    public int SubCategoryId { get; set; }
    List<Category> Categories = new List<Category>();
    List<SubCategory> SubCategories = new List<SubCategory>();
    List<SubCategory> SubCategoriesResults = new List<SubCategory>();
    protected override void OnInitialized()
    {
      Categories.Add(new Category { Id = 1, Name = "Alimento" });
      Categories.Add(new Category { Id = 2, Name = "Remedio" });

      SubCategories.Add(new SubCategory { Id = 1, Name = "Arroz", CategoryId = 1 });
      SubCategories.Add(new SubCategory { Id = 2, Name = "Feijão", CategoryId = 1 });
      SubCategories.Add(new SubCategory { Id = 3, Name = "Pão", CategoryId = 1 });

      SubCategories.Add(new SubCategory { Id = 4, Name = "ASS", CategoryId = 2 });
      SubCategories.Add(new SubCategory { Id = 5, Name = "Doril", CategoryId = 2 });

      SubCategoriesResults.Clear();
    }

    Task ChangeCategory(ChangeEventArgs e)
    {
      SubCategoryId = 0;
      SubCategoriesResults.Clear();
      CategoryId = int.Parse(e.Value.ToString());
      if (CategoryId > 0)
      {
        SubCategoriesResults = SubCategories
              .Where(c => c.CategoryId == CategoryId)
              .ToList();
        if (SubCategoriesResults.Any())
        {
          SubCategoryId = SubCategoriesResults[0].Id;
        }
      }
      StateHasChanged();
      return Task.CompletedTask;
    }
}