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 EmployeeList
propiedad 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 SelectList
objeto desde la EmployeeList
propiedad y páselo como valor para la asp-items
propiedad.
@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 Employees
propiedad 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 SelectListItem
pertenece al Microsoft.AspNet.Mvc.Rendering
espacio 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 Employee
clase de entidad tiene una propiedad Id
y Name
así
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 SelectListItem
objetos 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 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 SelectList
clase 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 SelectList
constructor para completar la Employees
propiedad 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í estoy llamando el GetEmployees
método para obtener una lista de objetos a los empleados, cada uno con una Id
y la FirstName
propiedad y uso esas propiedades como DataValueField
y DataTextField
del SelectList
objeto 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 SelectList
constructor 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 EmployeeId
valor 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-for
atributo 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 multiple
atributo 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 EmployeeIds
valor 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 Group
valor de propiedad de cada uno 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 .