Dropdown(Blazor) Rendering Issue .Net 8

Radzen.Blazor Components
1

I am a novice in front-end work. I've always done back-end and middleware development so any help is appreciated. I'm trying to build a Blazor Web App PoC. I'm hitting a couple of weird issues with the Dropdown. I see the correct data, but the dropdown arrow does not render. When I click the dropdown box, it displays the values with bullets below my NavMenu. When I select it then displays the Id (value) in the box and the text below the box. I have tried quite a few different options based on topics here and other places on the web, all with similar behavior. My current code is:

"



<RadzenDropDown AllowClear = "true" TValue="int" @bind-Value =@sValue Data=@seasons TextProperty="SeasonYears" ValueProperty="Id" Name = "DropDownBindValue" Change=@(args=> OnChange(args, "selectedSeason")) />

"

image
image520×882 13.3 KB

image

2

Hi @Boyce_B,

It looks as if the CSS file of the Radzen.Blazor components is not loading for some reason. Make sure you are including a theme CSS file first as mentioned in the getting started instructions. If you are - ensure the path is correct and see if the CSS file fails to load for some reason via your browsers developer tools.

3

Thank you for your assistance. That worked. I also have a dropdowndatagrid with defined columns. I see the column headers in the grid but no data, although my variable in the Data property returns 7 records. Do you have any recommendations?

@if(selectedDropValue > 0)
{






@* *@





}

4

I have a separate issue. The first dropdown is working. When I select the value, it passes to a new function in the code that calls another controller action with an id parameter. I expect data to populate when Id = 1 is passed from the selected value of dropdown #1 and I see data returned. The list does not populate dropdown #2. If I select id 2 in dropdown #1, it returns no data from the controller (count = 0) as expected, but dropdown #2 populates with the list as if id = 1 were passed to the controller. I am confused as to why this is happening because when I inspect, everything looks correct, except for when dropdown list #2 populates. Any guidance would be greatly appreciated.

5

I couldn't understand much from your description and without any source code it is impossible to provide any guidance.

6

Dropdown 1

<div class="rz-p-sm-12 rz-text-align-left">
    <RadzenLabel Text="Select Season" Component="SeasonList" Style="margin-right: 8px; vertical-align: middle;" />
    <RadzenDropDown TValue="string" Data=@seasons TextProperty="SeasonYears" ValueProperty="Season_Id" Style="width: 100%; max-width: 400px;" Name="SeasonList"
                    Change="@GetTournaments"  />
</div>

Dropdown 2


@if(selectedDropValue > 0)
{
    <div class="rz-p-sm-12 rz-text-align-left">
    <RadzenLabel Text="Select Tournament" Component="TourneyList" Style="margin-right: 8px; vertical-align: middle;" />
    <RadzenDropDown TValue="string" Count=@count Data=@tournamentList TextProperty="Name" ValueProperty="Id" Style="width: 100%; max-width: 400px;" Name="TourneyList"
                    Change="@GetMatches"  />
    </div>

@code
{

public IEnumerable<Seasons?> seasons;
public IEnumerable<Tournament> tournamentList;
string sValue = "Select Tournament";
int selectedDropValue = 0;
int count = 0;

protected override async Task OnInitializedAsync()
{
    await Task.Delay(500);


    List<Seasons> allSeasons = new List<Seasons>();

    allSeasons = await Http.GetFromJsonAsync<List<Seasons>>("api/scoring");

    seasons = allSeasons;

}

async void GetTournaments(object value)
{
    selectedDropValue = 1;
    sValue = "";

    List<Tournament> seasonTournaments = new List<Tournament>();

    var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;

    seasonTournaments = await Http.GetFromJsonAsync<List<Tournament>>("api/tournament/" + str);

    tournamentList = seasonTournaments.ToList();

    count = tournamentList.Count();

    Console.WriteLine($"Tournaments changed to {str} ");
}
7

And now you have to tell us what happens when you debug the code.

8

When the page loads, dropdown 1 populates as expected with two values - Id 1 and 2. I select 1, it calls the change method that passes id 1 to the controller which calls a stored procedure with parameter value =1. It returns 7 rows to tournamentList and count = 7 as expected. Dropdown 2 does not populate. If I select 2 from dropdown 1, the same thing happens except it returns 0 rows - verified tournamentList count = 0 but dropdown 2 now populates with the 7 rows I would expect to populate when Id 1 is selected in dropdown 1.

9

I recommend checking this demo which shows a working implementation of cascading dropdowns: Blazor DataGrid Component - Cascading DropDowns | Free UI Components by Radzen