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 .