Why is the Client drop down list in my .razor file showing the integer value instead of the text value?

2 weeks ago 13
ARTICLE AD BOX

As mentioned in the subject line why is my Client drop down list in my razor .razor.cs file showing the value instead of the text? As you can see from the image below the Site drop down list is showing the text as expected.

Please see a screenshot and the necessary razor and razor.cs files below:

enter image description here

EditScanner.razor file

... <MudItem xs="12" md="6"> <MudSelect T="int" Label="Client" @bind-Value="SelectedClientId"> @foreach (var client in _clients) { <MudSelectItem T="int" Value="@client.ClientId">@client.ClientName</MudSelectItem> } </MudSelect> </MudItem> <MudItem xs="12" md="6"> <MudSelect T="int" Label="Site" @bind-Value="Model.SiteId" @ref="_siteSelect" Disabled="@(_sites == null || _sites.Count == 0)"> @if (_sites != null) { @foreach (var site in _sites) { <MudSelectItem T="int" Value="@site.SiteId">@site.SiteName</MudSelectItem> } } </MudSelect> </MudItem> ...

EditScanner.razor.cs

public partial class EditScanner { public UpdateScannerModel? Model { get; set; } private ClientDto _client = new ClientDto(); private List<ClientDto> _clients = new List<ClientDto>(); private SiteDto _site = new SiteDto(); private List<SiteDto> _sites = new List<SiteDto>(); private MudSelect<int>? _siteSelect; private int _selectedSiteId; Dictionary<int, string> _loggingLevelMessages; private MudForm? _form; protected override async Task OnInitializedAsync() { try { _loggingLevelMessages = ExtensionMethods.GetEventLoggingLevelMessages(); await GetClients(); // Load scanner data await LoadScannerById(ScannerId); // Then get client and sites for this scanner's site if (Model?.SiteId > 0) { var site = await ClientService.GetSiteByIdAsync(Model.SiteId); if (site != null) { _client = await ClientService.GetClientByIdAsync(site.ClientId); await GetSites(site.ClientId); } } // Set SelectedClientId after data is loaded if (_client != null) { SelectedClientId = _client.ClientId; await OnValueChanged(SelectedClientId); } _isInitialized = true; } catch (Exception e) { Snackbar.Add(e.Message, Severity.Error); } } public int SelectedClientId { get => _client.ClientId; set { if (_client.ClientId == value) return; _client.ClientId = value; _client = _clients.FirstOrDefault(c => c.ClientId == value) ?? _client; //Model.SiteId = _client?.Sites.FirstOrDefault(s => s.SiteId == Model.SiteId)?.SiteId ?? 0; if (_isInitialized) { _ = InvokeAsync(() => OnValueChanged(value)); InvokeAsync(StateHasChanged); } } } private async Task LoadScannerById(int scannerId) { try { var scannerDto = await ScannerService.GetScannerByIdAsync(scannerId); Model = new UpdateScannerModel { SiteId = scannerDto.SiteId, ScannerName = scannerDto.ScannerName, ... }; } catch (Exception e) { Snackbar.Add(e.Message, Severity.Error); } } private async Task GetClientBySiteId(int? siteId) { if (siteId == null) return; var site = await ClientService.GetSiteByIdAsync(siteId.Value); if (site != null) { _client = await ClientService.GetClientByIdAsync(site.ClientId); } } private async Task OnValueChanged(int clientId) { // Clear existing sites and reset selected site first so MudSelect doesn't temporarily show the raw value. _sites.Clear(); _selectedSiteId = 0; Model.SiteId = 0; await InvokeAsync(StateHasChanged); // Load new sites for selected client. await GetSites(clientId); // Ensure the items are rendered before applying a selected value. await InvokeAsync(StateHasChanged); // Yield to let the renderer finish (avoids applying the selected value before items exist). await Task.Yield(); // Select first site if available so the select shows the site's label immediately. if (_sites.Count > 0) { _selectedSiteId = _sites[0].SiteId; Model.SiteId = _selectedSiteId; } else { _selectedSiteId = 0; Model.SiteId = 0; } await InvokeAsync(StateHasChanged); } private async Task GetClients() { _clients = await ClientService.GetClientsAsync(); } private async Task GetSites(int clientId) { _sites = await ClientService.GetSitesByClientIdAsync(clientId); } public class UpdateScannerModel { public int SiteId { get; set; } public string ScannerName { get; set; } = string.Empty; ... } }

Update

The _clients list is been populated with the correct data as seen in the image below.

enter image description here

Tim Kruger's user avatar

4

Read Entire Article