es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

MudBlazor – MudSelect con función de búsqueda

27 Jul, 2023 Programación

Estoy utilizando MudBlazor, específicamente MudSelect. Quiero mostrar la propiedad “Name”, pero guardar la propiedad “Id” en el Valor. Lo siguiente está funcionando.

<mudselect t="int" label="Assigned Group" variant="Variant.Outlined" required="true" requirederror="An Assigned Group is required." @bind-value="newTask.GroupId" adornmenticon="@Icons.Filled.Group">
    @foreach (var group in Groups)
    {
        <mudselectitem value="@group.Id">@group.Name</mudselectitem>
    }
</mudselect>

Sin embargo, a medida que el número de opciones comienza a crecer, tiene sentido agregar un campo de búsqueda junto a la Lista de selección. No sé cómo usar eso en MudSelect. Y mientras uso MudAutocomplete, que me brinda una función de búsqueda, no sé cómo asociar el “Id” al “Name” seleccionado. Y aunque mi “Name” es único, puedo realizar un procesamiento adicional en el “submit” para obtener el “Id”, quiero evitar el procesamiento adicional.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar un campo de búsqueda en MudSelect, puedes utilizar la propiedad Filter y establecerla en true. Esto habilitará una barra de búsqueda encima de la lista de selección.

    Sin embargo, si deseas una funcionalidad de búsqueda más avanzada, puedes utilizar MudAutocomplete. Para asignar la Id al Name seleccionado, puedes utilizar el evento SelectedItemChanged.

    Aquí tienes un ejemplo:

    <mudautocomplete t="int" label="Grupo Asignado" variant="Variant.Outlined" required="true" requirederror="Se requiere un Grupo Asignado;" filter="true" @bind-value="newTask.GroupId" adornmenticon="@Icons.Filled.Group" bind-selecteditem="@selectedGroup">
    <selectedtemplate>
        @selectedGroup.Name
    </selectedtemplate>
    <itemtemplate>
        @context.Name
    </itemtemplate>
    <items tvalue="Group" valueexpression="() => Groups" textexpression="group => group.Name"></items>
</mudautocomplete>

@code {
    private Group selectedGroup;

    private Task newTask = new Task();

    private List<group> Groups = new List<group>
    {
        new Group { Id = 1, Name = "Group 1" },
        new Group { Id = 2, Name = "Group 2" },
        new Group { Id = 3, Name = "Group 3" },
        new Group { Id = 4, Name = "Group 4" }
    };

    private class Group
    {
        public int Id {get;set;}
        public string Name {get;set;}
    }

    protected override void OnInitialized()
    {
        selectedGroup = Groups.FirstOrDefault(g => g.Id == newTask.GroupId);
    }

    private async Task HandleValidSubmit()
    {
        if (selectedGroup != null)
        {
            newTask.GroupId = selectedGroup.Id;
        }

        // handle submit
    }
}

    En este ejemplo, se utiliza MudAutocomplete en lugar de MudSelect. La propiedad Bind-SelectedItem se utiliza para enlazar un objeto Group al elemento seleccionado. Las propiedades SelectedTemplate e ItemTemplate se utilizan para personalizar la visualización del elemento seleccionado y de los elementos de la lista, respectivamente.

    La propiedad Items se utiliza para enlazar la lista de grupos al autocompletado. La propiedad TValue se establece como int para indicar que GroupId es un número entero, y las propiedades ValueExpression y TextExpression se utilizan para especificar las propiedades Id y Name de un Group, respectivamente.

    Finalmente, el método HandleValidSubmit se utiliza para manejar el envío del formulario. Si se selecciona un grupo, se establece la propiedad Id antes de enviar el formulario.

Comments are closed.