Search code examples
c#blazor.net-8.0mudblazor

Selecting an Item from Blazor MudAutoComplete


Am trying to use MudAutoComplete to search for an item in the database, am searching for a match in a name, should be showing the name in the select box but right now am getting "SarisApplication.Data.AssessmentType" which is the namespace of my model

my AutoComplete is like this, right now am binding the entire object class in the backend am able to get the id

<MudAutocomplete T="AssessmentType" Label="Search Assessment Type"
                 ResetValueOnEmptyText="true"
                 Placeholder="Type to search assessment"
                 AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary"
                 @bind-Value="SelectedAssessmentType" SearchFunc="SearchAssessmentType"
                 ShowProgressIndicator="true">
</MudAutocomplete>

The code

public partial class AddAsessmentDialog
{
    [CascadingParameter] MudDialogInstance? MudDialog { get; set; }

    [Parameter] public long CourseId { get; set; }

    public Assessment assessmentDetails = new();

    public AssessmentType SelectedAssessmentType = new();

    [Inject] public required AssessmentService AssessmentService { get; set; }
    [Inject] public required AssessmentTypeService AssessmentTypeService { get; set; }

    public bool IsVisible { get; set; }

    private async Task<IEnumerable<AssessmentType>> SearchAssessmentType(string searchTerm)
    {
        var response = await AssessmentTypeService.SearchAssessmentType(searchTerm);
        return response;
    }
    void Cancel() => MudDialog?.Cancel();

    MudForm? form;

    private async Task SubmitForm()
    {
        if (form != null)
        {
            await form.Validate();

            if (!form.IsValid)
            {
                return;
            }
            else
            {
                if(CourseId > 0)
                {
                    assessmentDetails.CourseId = CourseId;
                    assessmentDetails.AssessmentTypeId = SelectedAssessmentType.AssessmentTypeId;
                    assessmentDetails.IsVisible = IsVisible;
                    await AssessmentService.CreateAssessment(assessmentDetails);
                }
            }
        }
        else
        {
            /*sendinfo via message*/
        }
        MudDialog?.Close(DialogResult.Ok(true));
    }
}

What i tried is setting up below code in the MudAutoComplete which shows the description when searching, upon selection it goes back to the namespace of my model

 <ItemTemplate Context="assessment">
     <MudText>
         @assessment.AssessmentDescription
     </MudText>
 </ItemTemplate>

but i would like upon selection, it should be showing the Description not the namespace, i know why the name space because thats how i defined the datatype the AutoComplete to hold,

What should i do to display the value of description both when searching and upon selecting, but bind the Id of the selected.

Thanks for your help.


Solution

  • I have found the solution. While presenting an object in a MudAutoComplete and one would like to display a string? use ToStringFunc Refer here

    <MudAutocomplete T="AssessmentType" Label="Search Assessment Type"
                     ToStringFunc="@(e=> e==null?null : $"{e.AssessmentDescription}")"
                     ResetValueOnEmptyText="true"
                     Placeholder="Type to search assessment"
                     AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary"
                     @bind-Value="assessmentDetails.AssessmentType" SearchFunc="SearchAssessmentType"
                     ShowProgressIndicator="true">
    </MudAutocomplete>
    

    That resolved the issue