Cascading dropdown form on Blazor edit form

Question

I am new to Blazor and I'm trying to do an Add and Edit form , I have a FormComponent which is used on an Add and Edit razor page, all good. On this page I have cascading dropdowns, and these work well on the Add page, but on the edit page when I repopulate the data, the first dropdown has the correct data and the correct data is selected but the subsequent dropdown isn't present. My thoughts are that the ValueChanged event isn't being fired, please see the code below

@if (Level1Categories is not null)
  {
     
        
          Category:
        
       
        
          @if (Level1Categories is not null)
           {
             
               @foreach (var category in Level1Categories)
                {
                  
                }
          
         
          
     }
         @if (Categories is not null  && Categories.Count > 0)
           {
             
               
                Sub Category:
                
                
                 
                 @if (Categories is not null)
                  {
                   
                     @foreach (var category in Categories)
                     {
                      
                     }
                     }
                    
                     
                      
                   }

Below is the c# code for both of the ValueChanged events. This all works well and as expected for the add but not the edit

private async Task GetCategoriesById(int val)
    {
        Links.LevelId = val;
        var query = new GetCategoriesByIdQuery()
        {
            CategoryId =  val
        };
        Categories = (List)  await _mediator.Send(query);
        
    }



    private async Task GetSpecialtiesById(int val)
    {
        Links.CategoryId = val;
        var query = new GetCategoriesByIdQuery()
        {
            CategoryId =  val
        };
        Specialties = (List) await _mediator.Send(query);

    }

On the Edit page itself



 

protected override async Task OnParametersSetAsync()
{
    IsBusy = true;
    try
    {
        var command = new GetLinkQuery()
        {
            LinkId = LinkId
        };


        Links = await _mediator.Send(command);
      
    }
    finally
    {
        IsBusy = false;
    }
    
}

So basically I want to know how I can get the ValueChanged event to fire when the edit data is populated, I would expect it to fire because the value is changing, but it isn't. Any help would be very much appreciated. Thanks

MrC aka Shaun Curtis · Answer

As (per Enet's comment) there's not enough code to provide a minimum working example. Here's some code from my archive that shows the wiring of a cascading select based on the Continent/Country context. You should be able to model it into your context.

@page "/"
@inject HttpClient httpClient;

Index

Hello, world!


    
        
            
        
    
    
        
            Continent:
            
                
                @foreach (var continent in this.continents)
                {
                    
                }
            
        
    
    
        
            Country:
            
                
                @foreach (var country in this.countries)
                {
                    
                }
            
        
    
    
        
            
                Continent: @this.model.Continent - Country : @this.model.Country
            
        
    


@code {
    private List dataSet = new List();
    private List countries = new List();
    private List continents = new List();

    private CountryData model = new CountryData { Country = "France", Continent = "Europe" };
    private bool isNoContinent => this.model.Continent == string.Empty;

    protected async override Task OnInitializedAsync()
    {
        await this.GetDataSet();
        await this.GetContinentDataSet();
        await this.GetCountryDataSet();
    }

    private void Reset()
    {
        this.model.Continent = string.Empty;
        this.model.Country = string.Empty;
    }

    private async Task OnContininentChange(ChangeEventArgs e)
    {
        string value = e.Value?.ToString() ?? string.Empty;
        if (value.Equals(model.Continent))
        {
            this.model.Continent = value;
            this.model.Country = string.Empty;
            await this.GetCountryDataSet();
        }
    }

    private async Task GetDataSet()
    {
        // source country file is https://github.com/samayo/country-json/blob/master/src/country-by-continent.json
        // on my site it's in wwwroot/sample-data/countries.json
        this.dataSet = await httpClient.GetFromJsonAsync>("sample-data/countries.json") ?? new List();
    }

    private async Task GetCountryDataSet()
    {
        // This would normally call an async data pipeline method
        await Task.Delay(1);
        countries = this.dataSet.Where(item => item.Continent == model.Continent).ToList();
    }

    private async Task GetContinentDataSet()
    {
        // This would normally call an async data pipeline method
        await Task.Delay(1);
        this.continents = this.dataSet.Select(item => item.Continent).Distinct().ToList();
    }

    public class CountryData
    {
        public string Country { get; set; } = string.Empty;
        public string Continent { get; set; } = string.Empty;
    }

}

It looks like this:

Cascading dropdown form on Blazor edit form

1 Answers