c# - page - asp route tag helper

Seleccione Tag Helper en ASP.NET Core MVC

Question

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 una List<Employee> EmployeesList y el valor seleccionado irá a la propiedad EmployeeId . 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 el Id como valor mientras visualizo FullName en la lista desplegable?

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

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

Answer 1

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 propiedad de colección EmployeeList 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 objeto SelectList desde la propiedad EmployeeList y páselo como valor para la propiedad asp-items .

@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> como la 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 propiedad Employees para los elementos 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 SelectListItem pertenece al espacio de nombres Microsoft.AspNet.Mvc.Rendering .

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. Así que 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 del tipo DbSet<Employee> donde la clase de entidad Employee tiene una propiedad Id y Name como esta

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 objetos SelectListItem 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);
}

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

Usando SelectList

Algunas personas prefieren usar la clase SelectList 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 constructor SelectList para llenar la propiedad Employees del modelo de vista. Asegúrese de especificar los parámetros dataValueField y 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í llamo al método GetEmployees para obtener una lista de objetos Employee, cada uno con una propiedad Id y FirstName y uso esas propiedades como DataValueField y DataTextField del objeto SelectList que creamos. 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 constructor SelectList que solo toma IEnumerable<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 previamente). Para hacer eso, simplemente puede establecer el valor de la propiedad EmployeeId en el valor de la opción que desea que se seleccione.

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 asp-for atributo asp-for 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 atributo multiple 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 valor de la propiedad EmployeeIds 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 personalmente recomendado 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 valor de la propiedad Group de cada SelectListItem en 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 .

Answer 2

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

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 ayudante de etiqueta <options> :

[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.

Answer 3

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>

Answer 4

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

Si alguien está usando enum lugar 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 razor, 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>

Answer 5

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;

Answer 6

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>