Question MudSelect showing Value instead of MudSelect Item - Mudblazor

Pablo

Well-known member
Joined
Aug 12, 2021
Messages
63
Programming Experience
10+
Hello again,
So I continued practicing with Mudblazor, and as I learnt EFCore I was able to follow a tutorial about CRUD.
I have in my Index.razor a form to Edit/Add customers, and a table that shows all of them with the options to edit and delete. When clicked the Edit option, that customer's data is shown in the form. The issue is that if in the form there is a country selected that is not the one of the customer selected in the table, I'm able to change it (by code) to the country whose city is the customer's, but in the City MudSelect it appears the Value and not the Item (text of the city) as seen in the image.
I will appreciate any help you can give.
Pablo

Index.razor:
@page "/"

@using MudBlazorDemo.CRUD.Data
@inject MudBlazorDemo.CRUD.Services.ICustomerService customerService
@inject MudBlazorDemo.CRUD.Services.ICountryService countryService
@inject MudBlazorDemo.CRUD.Services.ICityService cityService;
@inject ISnackbar snackbar

<MudCard Elevation="25">
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.h6">Add / Edit Customers</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    <MudCardContent>
        <MudTextField @bind-Value="customer.FirstName" Label="First Name" Variant="Variant.Text" Margin="Margin.Normal"></MudTextField>
        <MudTextField @bind-Value="customer.LastName" Label="Last Name" Variant="Variant.Text" Margin="Margin.Normal"></MudTextField>
        <MudTextField @bind-Value="customer.PhoneNumber" Label="Phone Number" Variant="Variant.Text" Margin="Margin.Normal"></MudTextField>
        <MudSelect T="int?" Value="@countryId" ValueChanged="CountryChangedAsync" Label="Country" Placeholder="Please select a country ..." Variant="Variant.Outlined">
            @foreach (var country in countries)
            {
                <MudSelectItem Value="@country.Id">@country.Name</MudSelectItem>
            }
        </MudSelect>
        <MudSelect T="int?" @bind-Value="@cityId" Label="City" Placeholder="Please select a city ..." Variant="Variant.Outlined">
            @foreach (var city in cities)
            {
                <MudSelectItem Value="@city.Id">@city.Name</MudSelectItem>
            }
        </MudSelect>
        <br />
        <MudButton Variant="Variant.Filled" Color="Color.Success" OnClick="Save">Save Customer</MudButton>
    </MudCardContent>
</MudCard>
<br />
<MudTable Elevation="25" Items="GetCustomers()" Filter="new Func<Customer, bool>(Search)" @bind-customer="customer">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Customers</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="searchString" Placeholder="Search for Customers ..." Adornment="Adornment.Start"
            AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <HeaderContent>
        <MudTh>First Name</MudTh>
        <MudTh>Last Name</MudTh>
        <MudTh>Phone Number</MudTh>
        <MudTh>City</MudTh>
        <MudTh>Actions</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="FirstName">@context.FirstName</MudTd>
        <MudTd DataLabel="LastName">@context.LastName</MudTd>
        <MudTd DataLabel="PhoneNumber">@context.PhoneNumber</MudTd>
        <MudTd DataLabel="">
            @cityService.GetCityById(context.CityId).Name
        </MudTd>
        <MudTd DataLabel="">
            <MudFab @onclick="@(()=>Edit(context.Id))" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Edit"
                Size="Size.Small" IconSize="Size.Small" />
            <MudFab @onclick="@(()=>Delete(context.Id))" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Delete"
                Size="Size.Small" IconSize="Size.Small" />
        </MudTd>
    </RowTemplate>
</MudTable>

@code {
    [Inject] private IDialogService DialogService{ get; set; }
    private string searchString = "";
    private Customer customer = new Customer();
    private List<Customer> customers = new List<Customer>();
    private List<Country> countries;
    private List<City> cities;
    private int? countryId;
    private int? cityId;

    protected override void OnInitialized()
    {
        GetCustomers();
        countries = countryService.GetCountries();
        cities = new List<City>();
        countryId = default;
    }

    private Task CountryChangedAsync(int? id)
    {
        countryId = id;
        cities = cityService.GetCitiesByCountry(countryId);
        return InvokeAsync(StateHasChanged);
    }

    private List<Customer> GetCustomers()
    {
        customers = customerService.GetCustomers();
        return customers;
    }

    private bool Search(Customer customer)
    {
        if (string.IsNullOrWhiteSpace(searchString))
            return true;
        if (customer.FirstName.Contains(searchString, StringComparison.OrdinalIgnoreCase)
            || customer.LastName.Contains(searchString, StringComparison.OrdinalIgnoreCase)
            || customer.PhoneNumber.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        return false;
    }

    private void Save()
    {
        customer.CityId = cityId;
        customerService.SaveCustomer(customer);
        customer = new Customer();
        snackbar.Add("Customer Saved.", Severity.Success);
        GetCustomers();
    }

    private void Edit(int id)
    {
        customer = customerService.GetCustomerById(id);
        int? cId = cityService.GetCityById(customer.CityId).CountryId;
        if (cId != countryId)
        {
            cities = cityService.GetCitiesByCountry(cId);
            countryId = cId;
        }
        cityId = customer.CityId;
        StateHasChanged();
    }

    private async void Delete(int id)
    {
        bool? result = await DialogService.ShowMessageBox("Warning", "Deleting can not be undone!",
            yesText: "Delete!", cancelText: "Cancel");
        if (result == true)
        {
            customerService.DeleteCustomer(id);
            snackbar.Add("Customer Deleted", Severity.Success);
            GetCustomers();
        }
    }
}
 

Attachments

  • page.png
    page.png
    32.2 KB · Views: 0

Latest posts

Back
Top Bottom