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:
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.
9252 gold badges11 silver badges28 bronze badges
4


