Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MudBlazor dropdown not defaulting to value from database

I'm using Blazor with MudBlazor and I have the following form on an Edit page:

<EditForm Model="BookRequestVM" OnInvalidSubmit="InvalidBookRequest" OnValidSubmit="@ValidBookRequest">
    ...
    <MudItem xs="12" sm="4">
        <MudSelect T="BookType" Label="Book Type" @bind-Value="@BookRequestVM.BookType" @bind-SelectedValues="hashBookTypes" Required="true">
            @foreach (var selectItem in BookTypes)
            {
                <MudSelectItem Value="@selectItem">@selectItem.TypeTitle</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
</EditForm>

...

@code {
    public class BookType
    {
        public int BookTypeId { get; set; }
        public string TypeTitle { get; set; }
    }
    
    public HashSet<BookType> hashBookTypes = new HashSet<BookType>();
    
    ...

    protected override async Task OnInitializedAsync()
    {
        BookRequestVM = await _bookService.GetBookRequest(Id);  // Fetch info from database
        
        BookTypes = _bookService.GetBookTypes().ToList();    // Get all valid dropdown values
        
        hashBookTypes = new HashSet<BookType>(BookTypes);
    }
}

Because I'm pulling in existing data (this Book Type field is required when creating a book request), there will always be a Book Type associated with this Book Request. I see that the BookTypeVM was able to pull the Book Type in from the database in the service call, and on the valid submit method, it's bound and gets saved properly. It's just when it loads in, it doesn't default to the value that was saved to the database--only the first value from the dropdown list. Any ideas on what's going on here?

like image 973
LOL. NO. Avatar asked May 03 '26 19:05

LOL. NO.


2 Answers

Your code has more problems than the one MrC found. You need to be very careful with using a POCO class in a select without overriding Equals() and GetHashCode() because the select uses a HashSet internally to find out which item is selected. Also, if you want it to convert the selected BookType to string it should override ToString().

Your BookType class should look like this:

    public class BookType
    {
        public string Title { get; set; }

        public override bool Equals(object other) {
            return (other as BookType)?.Title == Title;
        }

        public override int GetHashCode()
        {
            return this.Title.GetHashCode();
        }

        public override string ToString() => Title;
    }

And here is the Select to go with it:

    <MudSelect T="BookType" Label="Book Type" @bind-Value="@RequestedBookType" Required="true">
        @foreach (var selectItem in BookTypes)
        {
            <MudSelectItem Value="@selectItem">@selectItem.Title</MudSelectItem>
        }
    </MudSelect>

Here is a fiddle that demonstrates your code with above changes to make it work: https://try.mudblazor.com/snippet/mOwvPvbhHYHFBoiV

like image 142
henon Avatar answered May 06 '26 13:05

henon


Is this a multi-select? If not then why are you setting @bind-SelectedValues="hashBookTypes". hashBookTypes comes from BookTypes which is a list of all the book types. I'm no expert on MudBlazor, but it appears your setting the selected values to the full list of values. Without MultiSelection="true" then I'm guessing its setting the current value to the first value in the list.

like image 37
MrC aka Shaun Curtis Avatar answered May 06 '26 13:05

MrC aka Shaun Curtis



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!