Seleccione Tag Helper en ASP.NET Core MVC

Necesito ayuda con el asistente de selección de etiquetas en ASP.NET Core.

Tengo una lista de empleados que estoy tratando de vincular a un asistente de etiqueta de selección. Mis empleados están en un List<Employee> EmployeesListvalor seleccionado y entrarán en EmployeeIdpropiedad. Mi modelo de vista se ve así:

public class MyViewModel
{
   public int EmployeeId { get; set; }
   public string Comments { get; set; }
   public List<Employee> EmployeesList {get; set; }
}

Mi clase de empleado se ve así:

public class Employee
{
   public int Id { get; set; }
   public string FullName { get; set; }
}

Mi pregunta es ¿cómo le digo a mi ayudante de etiqueta select que use Idcomo valor mientras se muestra FullNameen la lista desplegable?

<select asp-for="EmployeeId" asp-items="???" />

Agradecería un poco de ayuda con esto. Gracias.

Uso de los ayudantes Seleccionar etiqueta para representar un elemento SELECCIONAR

En su acción GET, cree un objeto de su modelo de vista, cargue la EmployeeListpropiedad de colección y envíela a la vista.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.EmployeesList = new List<Employee>
    {
        new Employee { Id = 1, FullName = "Shyju" },
        new Employee { Id = 2, FullName = "Bryan" }
    };
    return View(vm);
}

Y en su vista de creación, cree un nuevo SelectListobjeto desde la EmployeeListpropiedad y páselo como valor para la asp-itemspropiedad.

@model MyViewModel
<form asp-controller="Home" asp-action="Create">

    <select asp-for="EmployeeId" 
            asp-items="@(new SelectList(Model.EmployeesList,"Id","FullName"))">
        <option>Please select one</option>
    </select>

    <input type="submit"/>

</form>

Y su método de acción HttpPost para aceptar los datos del formulario enviado.

[HttpPost]
public IActionResult Create(MyViewModel model)
{
   //  check model.EmployeeId 
   //  to do : Save and redirect
}

O

Si su modelo de vista tiene una List<SelectListItem>propiedad de sus elementos desplegables.

public class MyViewModel
{
    public int EmployeeId { get; set; }
    public string Comments { get; set; }
    public List<SelectListItem> Employees { set; get; }
}

Y en tu acción,

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "1"},
        new SelectListItem {Text = "Sean", Value = "2"}
    };
    return View(vm);
}

Y en la vista, puede usar directamente la Employeespropiedad para asp-items.

@model MyViewModel
<form asp-controller="Home" asp-action="Create">

    <label>Comments</label>
    <input type="text" asp-for="Comments"/>

    <label>Lucky Employee</label>
    <select asp-for="EmployeeId" asp-items="@Model.Employees" >
        <option>Please select one</option>
    </select>

    <input type="submit"/>

</form>

La clase SelectListItempertenece al Microsoft.AspNet.Mvc.Renderingespacio de nombres.

Asegúrese de estar utilizando una etiqueta de cierre explícita para el elemento seleccionado. Si utiliza el enfoque de etiqueta de cierre automático, el asistente de etiqueta generará un elemento SELECT vacío.

El siguiente enfoque no funcionará

<select asp-for="EmployeeId" asp-items="@Model.Employees" />

Pero esto funcionará.

<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>

Obtener datos de su tabla de base de datos utilizando el marco de la entidad

Los ejemplos anteriores están utilizando elementos codificados para las opciones. Entonces pensé que agregaría un código de muestra para obtener datos usando Entity Framework ya que mucha gente lo usa.

Supongamos que su objeto DbContext tiene una propiedad llamada Employees, que es de tipo DbSet<Employee>donde la Employeeclase de entidad tiene una propiedad Idy Nameasí

public class Employee
{
   public int Id { set; get; }
   public string Name { set; get; }
}

Puede usar una consulta LINQ para obtener los empleados y usar el método Select en su expresión LINQ para crear una lista de SelectListItemobjetos para cada empleado.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = context.Employees
                          .Select(a => new SelectListItem() {  
                              Value = a.Id.ToString(),
                              Text = a.Name
                          })
                          .ToList();
    return View(vm);
}

Asumiendo que contextes su objeto de contexto db. El código de vista es el mismo que el anterior.

Usando SelectList

Algunas personas prefieren usar la SelectListclase para guardar los elementos necesarios para representar las opciones.

public class MyViewModel
{
    public int EmployeeId { get; set; }
    public SelectList Employees { set; get; }
}

Ahora en su acción GET, puede usar el SelectListconstructor para completar la Employeespropiedad del modelo de vista. Asegúrese de especificar los parámetros dataValueFieldy dataTextField.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
    return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
    // hard coded list for demo. 
    // You may replace with real data from database to create Employee objects
    return new List<Employee>
    {
        new Employee { Id = 1, FirstName = "Shyju" },
        new Employee { Id = 2, FirstName = "Bryan" }
    };
}

Aquí estoy llamando el GetEmployeesmétodo para obtener una lista de objetos a los empleados, cada uno con una Idy la FirstNamepropiedad y uso esas propiedades como DataValueFieldy DataTextFielddel SelectListobjeto que hemos creado. Puede cambiar la lista codificada a un código que lee datos de una tabla de base de datos.

El código de vista será el mismo.

<select asp-for="EmployeeId" asp-items="@Model.Employees" >
    <option>Please select one</option>
</select>

Renderiza un elemento SELECT de una lista de cadenas.

A veces es posible que desee representar un elemento seleccionado de una lista de cadenas. En ese caso, puede usar el SelectListconstructor que solo tomaIEnumerable<T>

var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);

El código de vista será el mismo.

Establecer opciones seleccionadas

Algunas veces, es posible que desee establecer una opción como la opción predeterminada en el elemento SELECCIONAR (por ejemplo, en una pantalla de edición, desea cargar el valor de la opción guardada anteriormente). Para hacer eso, simplemente puede establecer el EmployeeIdvalor de la propiedad en el valor de la opción que desea seleccionar.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "11"},
        new SelectListItem {Text = "Tom", Value = "12"},
        new SelectListItem {Text = "Jerry", Value = "13"}
    };
    vm.EmployeeId = 12;  // Here you set the value
    return View(vm);
}

Esto seleccionará la opción Tom en el elemento select cuando se renderice la página.

Menú desplegable de selección múltiple

Si desea representar un menú desplegable de selección múltiple, simplemente puede cambiar la propiedad del modelo de vista que usa para el asp-foratributo en su vista a un tipo de matriz.

public class MyViewModel
{
    public int[] EmployeeIds { get; set; }
    public List<SelectListItem> Employees { set; get; }
}

Esto generará el marcado HTML para el elemento select con el multipleatributo que permitirá al usuario seleccionar múltiples opciones.

@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
    <option>Please select one</option>
    <option value="1">Shyju</option>
    <option value="2">Sean</option>
</select>

Configuración de opciones seleccionadas en selección múltiple

Similar a la selección única, establezca el EmployeeIdsvalor de la propiedad en la matriz de valores que desee.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "11"},
        new SelectListItem {Text = "Tom", Value = "12"},
        new SelectListItem {Text = "Jerry", Value = "13"}
    };
    vm.EmployeeIds= new int[] { 12,13} ;  
    return View(vm);
}

Esto seleccionará la opción Tom y Jerry en el elemento de selección múltiple cuando se renderice la página.

Usando ViewBag para transferir la lista de elementos

Si no prefiere mantener una propiedad de tipo de colección para pasar la lista de opciones a la vista, puede usar la ViewBag dinámica para hacerlo. ( Este no es mi enfoque recomendado personalmente ya que viewbag es dinámico y su código es propenso a no ser detectado errores tipográficos )

public IActionResult Create()
{       
    ViewBag.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "1"},
        new SelectListItem {Text = "Sean", Value = "2"}
    };
    return View(new MyViewModel());
}

y en la vista

<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
    <option>Please select one</option>
</select>

Usar ViewBag para transferir la lista de elementos y configurar la opción seleccionada

Es igual que el anterior. Todo lo que tiene que hacer es establecer el valor de la propiedad (para la cual está vinculando el menú desplegable) al valor de la opción que desea seleccionar.

public IActionResult Create()
{       
    ViewBag.Employees = new List<SelectListItem>
    {
        new SelectListItem {Text = "Shyju", Value = "1"},
        new SelectListItem {Text = "Bryan", Value = "2"},
        new SelectListItem {Text = "Sean", Value = "3"}
    };

    vm.EmployeeId = 2;  // This will set Bryan as selected

    return View(new MyViewModel());
}

y en la vista

<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
    <option>Please select one</option>
</select>

Agrupación de artículos

El método de ayuda de la etiqueta select admite opciones de agrupación en un menú desplegable. Todo lo que tiene que hacer es especificar el Groupvalor de propiedad de cada uno SelectListItemen su método de acción.

public IActionResult Create()
{
    var vm = new MyViewModel();

    var group1 = new SelectListGroup { Name = "Dev Team" };
    var group2 = new SelectListGroup { Name = "QA Team" };

    var employeeList = new List<SelectListItem>()
    {
        new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
        new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
        new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
        new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
    };
    vm.Employees = employeeList;
    return View(vm);
}

No hay cambio en el código de vista. el asistente de selección de etiquetas ahora mostrará las opciones dentro de 2 elementos de optgroup .

Creé una interfaz y un <options>ayudante de etiqueta para esto. Así que no tuve que convertir los IEnumerable<T>elementos IEnumerable<SelectListItem>cada vez que tenía que llenar el <select>control.

Y creo que funciona muy bien ...

El uso es algo como:

<select asp-for="EmployeeId">
    <option value="">Please select...</option>
    <options asp-items="@Model.EmployeesList" />
</select>

Y para que funcione con la etiqueta de ayuda, debe implementar esa interfaz en su clase:

public class Employee : IIntegerListItem
{
   public int Id { get; set; }
   public string FullName { get; set; }

   public int Value { return Id; }
   public string Text{ return FullName ; }
}

Estos son los códigos necesarios:

La interfaz:

public interface IIntegerListItem
{
    int Value { get; }
    string Text { get; }
}

El <options>ayudante de etiqueta:

[HtmlTargetElement("options", Attributes = "asp-items")]
public class OptionsTagHelper : TagHelper
{
    public OptionsTagHelper(IHtmlGenerator generator)
    {
        Generator = generator;
    }

    [HtmlAttributeNotBound]
    public IHtmlGenerator Generator { get; set; }

    [HtmlAttributeName("asp-items")]
    public object Items { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.SuppressOutput();
        // Is this <options /> element a child of a <select/> element the SelectTagHelper targeted?
        object formDataEntry;
        context.Items.TryGetValue(typeof(SelectTagHelper), out formDataEntry);

        var selectedValues = formDataEntry as ICollection<string>;
        var encodedValues = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
        if (selectedValues != null && selectedValues.Count != 0)
        {
            foreach (var selectedValue in selectedValues)
            {
                encodedValues.Add(Generator.Encode(selectedValue));
            }
        }

        IEnumerable<SelectListItem> items = null;
        if (Items != null)
        {
            if (Items is IEnumerable)
            {
                var enumerable = Items as IEnumerable;
                if (Items is IEnumerable<SelectListItem>)
                    items = Items as IEnumerable<SelectListItem>;
                else if (Items is IEnumerable<IIntegerListItem>)
                    items = ((IEnumerable<IIntegerListItem>)Items).Select(x => new SelectListItem() { Selected = false, Value = ((IIntegerListItem)x).Value.ToString(), Text = ((IIntegerListItem)x).Text });
                else
                    throw new InvalidOperationException(string.Format("The {2} was unable to provide metadata about '{1}' expression value '{3}' for <options>.",
                        "<options>",
                        "ForAttributeName",
                        nameof(IModelMetadataProvider),
                        "For.Name"));
            }
            else
            {
                throw new InvalidOperationException("Invalid items for <options>");
            }

            foreach (var item in items)
            {
                bool selected = (selectedValues != null && selectedValues.Contains(item.Value)) || encodedValues.Contains(item.Value);
                var selectedAttr = selected ? "selected='selected'" : "";

                if (item.Value != null)
                    output.Content.AppendHtml($"<option value='{item.Value}' {selectedAttr}>{item.Text}</option>");
                else
                    output.Content.AppendHtml($"<option>{item.Text}</option>");
            }
        }
    }
}

Puede haber algún error tipográfico, pero creo que el objetivo es claro. Tuve que editar un poco.

También puede usar IHtmlHelper.GetEnumSelectList.

    // Summary:
    //     Returns a select list for the given TEnum.
    //
    // Type parameters:
    //   TEnum:
    //     Type to generate a select list for.
    //
    // Returns:
    //     An System.Collections.Generic.IEnumerable`1 containing the select list for the
    //     given TEnum.
    //
    // Exceptions:
    //   T:System.ArgumentException:
    //     Thrown if TEnum is not an System.Enum or if it has a System.FlagsAttribute.
    IEnumerable<SelectListItem> GetEnumSelectList<TEnum>() where TEnum : struct;

Mi respuesta a continuación no resuelve la pregunta, pero está relacionada .

Si alguien está usando en enumlugar de un modelo de clase, como este ejemplo:

public enum Counter
{
    [Display(Name = "Number 1")]
    No1 = 1,
    [Display(Name = "Number 2")]
    No2 = 2,
    [Display(Name = "Number 3")]
    No3 = 3
}

Y una propiedad para obtener el valor al enviar:

public int No { get; set; }

En la página de la maquinilla de afeitar, puede usar Html.GetEnumSelectList<Counter>()para obtener las propiedades de enumeración.

<select asp-for="No" asp-items="@Html.GetEnumSelectList<Counter>()"></select>

Genera el siguiente HTML:

<select id="No" name="No">
    <option value="1">Number 1</option>
    <option value="2">Number 2</option>
    <option value="3">Number 3</option>
</select>

Puede usar el siguiente código para selección múltiple :

<select asp-for="EmployeeId"  multiple="multiple" asp-items="@ViewBag.Employees">
    <option>Please select</option>
</select>

También puedes usar:

<select id="EmployeeId" name="EmployeeId"  multiple="multiple" asp-items="@ViewBag.Employees">
    <option>Please select</option>
</select>

En Get:

public IActionResult Create()
{
    ViewData["Tags"] = new SelectList(_context.Tags, "Id", "Name");
    return View();
}

En Post:

var selectedIds= Request.Form["Tags"];

En vista :

<label>Tags</label>
<select  asp-for="Tags"  id="Tags" name="Tags" class="form-control" asp-items="ViewBag.Tags" multiple></select>