Schroeder Consulting LLC

This is the second part in my series on AutoComplete in MudBlazor. A common development problem I have encountered is to pre-fill form variables from a choice in an autocomplete. In this article, I describe how I was able to do this using the MudBlazor AutoComplete.

The autocomplete is populated when the user inputs text.

When the user chooses a name, the information for that person is filled in.

Input is required in many use cases, so if there is no name chosen, the user gets a validation error.

Otherwise, there is an alert with the person’s name.

The person information is contained in an EditForm. An EditForm requires a Model or an EditContext. I chose to use a model based on a Person class.

public class Person
{
    [Required]
    public string Name { get; set; } = null!;
    public string Address { get; set; } = null!;
    public string City { get; set; } = null!;
    public string State { get; set; } = null!;
    public string Zip { get; set; } = null!;
}

I called my Model thisPerson. Here is the EditForm.

<EditForm Model="@thisPerson" OnValidSubmit="@Submit">
  <DataAnnotationsValidator />
   <ValidationSummary />
   <MudPaper Class="pa-4">
        <MudTextField @bind-Value="@thisPerson!.Name" Label="Name" Variant="Variant.Text"></MudTextField> 
        <MudTextField @bind-Value="@thisPerson!.Address" Label="Address" Variant="Variant.Text"></MudTextField>
        <MudTextField @bind-Value="@thisPerson!.City" Label="City" Variant="Variant.Text"></MudTextField>
        <MudTextField @bind-Value="@thisPerson!.State" Label="State" Variant="Variant.Text"></MudTextField>
        <MudTextField @bind-Value="@thisPerson!.Zip" Label="Zip" Variant="Variant.Text"></MudTextField>
    </MudPaper>
    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" 
             Class="ml-auto mt-3 mb-3">Submit</MudButton>
</EditForm>

I created a List<Person> called persons that I want to use to populate the form. When a user chooses a person’s name, the information for that Person is populated in the EditForm. This is achieved with a MudBlazor AutoComplete. 

My MudBlazor AutoComplete sits outside of this form. The value of the autocomplete is a string that I called value. Here is the AutoComplete.

 <MudAutocomplete T="string" Label="Persons" Value="value" SearchFunc="@Search"
                         ResetValueOnEmptyText=true
                         CoerceText=true CoerceValue=false
                         Required = "true"
                         AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary" ValueChanged="OnPersonSelected"/>

ResetValueOnEmptyText will reset the value when the text is cleared. CoerceText will update the text when the user chooses a value. If CoerceValue is true, the Value will be overwritten by what the user inputs. Since I want to populate a Person from my list, I set this to false. SearchFunc provides the search functionality for the autocomplete. The search functionality will make a choice from a list of Person names that I called names..I used the ValueChanged function to set thisPerson in the EditForm.

Ideally, the autocomplete would sit in the form itself and bind thisPerson.Name. However, it is impossible to have both bind-Value and ValueChanged in a MudBlazor autocomplete.

OnInitialized in the code section of the page provides the setup for the model and for the list of names.

 List<string> names = new List<string>();
 string value;
 [SupplyParameterFromForm]
 Person? thisPerson { get; set; }

 protected override void OnInitialized()
 {
     names = persons.Select(p => p.Name).ToList();
     thisPerson ??= new();

 }

The function Search provides the search functionality for the MudBlazor AutoComplete.

    async Task<IEnumerable<string>> Search(string value)
    {
        await Task.Delay(5);

        if (String.IsNullOrEmpty(value))
        {
            return names;
        }

        return names.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase));
    }

The function OnPersonSelected selects the model for the EditForm.

  void OnPersonSelected(string name)
  {

      thisPerson = persons.FirstOrDefault(p => p.Name == name);
  }

Only the Name parameter is the Person model is required, so if it is missing and the user clicks Submit, a validation error occurs. Otherwise, a valid submit is handled by the function Submit.

    async Task Submit()
    {
        await JS.InvokeVoidAsync("alert", thisPerson.Name);
    }

This is how I achieved pre-filling form variables from a MudBlazor AutoComplete.