Dropdown Blazor

Question

How do I dropdown Sub Categories to bring the data according to what I chose in the categories table ? I can only pull from the database but I don’t know how I do the sub-category pull from the database depending on which category

    <h1>Abrir Chamado</h1>

    @if (_ListaCategorias.Count == 0)
    {
        <p>Carregando...</p>
    }
    else
    {
        <div class="row">
            <div class="col-lg-3">
                <select  class="form-control">
                    <option> Selecione uma categoria </option>
                    @foreach (var cat in _ListaCategorias)
                    {
                        <option value="@cat.IdCategoria">@cat.Descricao</option>
                    }
                </select>
            </div>
        </div>
    }
</div>
<div class="container text-center">

    <div class="row">
        <div class="col-lg-3">
            <select class="form-control">
                <option value="1"> Selecione uma Subcategoria</option>
                @foreach (var sub in _ListaSubCategorias)
                {
                    <option value="@sub.">@sub.Descricao</option>
                }
            </select>
        </div>
    </div>
</div>


@code {


    private List<Categoria> _ListaCategorias = new List<Categoria>();
    private List<SubCategoria> _ListaSubCategorias = new List<SubCategoria>();

    protected override async Task OnInitializedAsync()
    {
        Categoria _Categoria = new Categoria();
        _ListaCategorias = await _Categoria.GetCategoriasAsync();

        SubCategoria _SubCategoria = new SubCategoria();
        _ListaSubCategorias = await _SubCategoria.GetSubCategoriasAsync();


    }


    private string Categoria { get; set; }

    private string CheckSelected
    {
        get
        {
            return Categoria;
        }
        set
        {
            ChangeEventArgs selectedEventArgs = new ChangeEventArgs();
            selectedEventArgs.Value = value;
            OnChangeSelected(selectedEventArgs);
        }
    }

    private void OnChangeSelected(ChangeEventArgs e)
    {
        if (e.Value.ToString() != string.Empty)
        {
            Categoria = e.Value.ToString();
        }
    }



}

Answer 1

I decided to build an example with data Fakes to illustrate your doubt, have the classes Item, SubItem and Datas (representing the part of the redemption of information from the database or any information repository):

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

public class SubItem
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ItemId { get; set; }
}

public class Datas
{
    public List<Item> Items { get; set; } = new List<Item>();
    public List<SubItem> SubItems { get; set; } = new List<SubItem>();
    public Datas()
    {
        Items.Add(new Item { Id = 1, Name = "Item 1" });
        Items.Add(new Item { Id = 2, Name = "Item 2" });
        SubItems.Add(new SubItem { Id = 1, Name = "Sub Item 1", ItemId = 1 });
        SubItems.Add(new SubItem { Id = 2, Name = "Sub Item 2", ItemId = 1 });
        SubItems.Add(new SubItem { Id = 3, Name = "Sub Item 3", ItemId = 2 });
        SubItems.Add(new SubItem { Id = 4, Name = "Sub Item 4", ItemId = 2 });
        SubItems.Add(new SubItem { Id = 5, Name = "Sub Item 5", ItemId = 2 });
    }
}

---

With the event @onchange: the method created with the name HandleOnChange will show you the selected item with the parameter ChangeEventArgs e who owns a property Value with the value selected in <select /> and after changing the variables the SubItems with a filter, example:

<select @onchange="HandleOnChange">
    @foreach (var item in Items)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>
<select>
    @foreach (var item in SubItems)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>
@code {
    private Models.Datas Datas = new Models.Datas();

    private int ItemIdSelected { get; set; }
    private List<Models.Item> Items { get; set; }
    private List<Models.SubItem> SubItems { get; set; }

    private void HandleOnChange(ChangeEventArgs e)
    {
        if (e.Value != null)
        {
            ItemIdSelected = int.Parse(e.Value.ToString());
            SubItems = Datas.SubItems
              .Where(x => x.ItemId == ItemIdSelected)
              .ToList();
        }
    }
    protected override void OnInitialized()
    {
        Items = Datas.Items;
        ItemIdSelected = Items.Count > 0 ? Items[0].Id : 0;
        SubItems = Datas.SubItems.Where(x => x.ItemId == ItemIdSelected).ToList();
    }
}

---

With @bind: the code greatly simplifies where the selected option is handled by a variable ItemIdSelected and it is with this variable the filter should be made for the other selection (<select />), example:

<select @bind="ItemIdSelected">
    @foreach (var item in Items)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>
<select>
    @foreach (var item in Datas.SubItems
        .Where(x => x.ItemId == ItemIdSelected)
        .ToList()
    )
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>


@code {
    private Models.Datas Datas = new Models.Datas();

    private int ItemIdSelected { get; set; } = 0;
    private List<Models.Item> Items { get; set; }

    protected override void OnInitialized()
    {
        Items = Datas.Items;
        ItemIdSelected = Items.Count > 0 ? Items[0].Id : 0;
    }
}