Usando os auxiliares Select Tag para renderizar um elemento SELECT
Na sua ação GET, crie um objeto do seu modelo de visualização, carregue a EmployeeListpropriedade de coleção e envie-a para a visualização.
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);
}
E, na sua exibição de criação, crie um novo SelectListobjeto a partir da EmployeeListpropriedade e passe-o como valor para a asp-itemspropriedade.
@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>
E seu método de ação HttpPost para aceitar os dados do formulário enviado.
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
Ou
Se o seu modelo de visualização tiver uma List<SelectListItem>propriedade como para seus itens suspensos.
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
E na sua ação,
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);
}
E, na visualização, você pode usar diretamente a Employeespropriedade para oasp-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>
A classe SelectListItem pertence ao Microsoft.AspNet.Mvc.Renderingespaço para nome.
Verifique se você está usando uma tag de fechamento explícita para o elemento select. Se você usar a abordagem de fechamento automático, o auxiliar de renderização renderizará um elemento SELECT vazio!
A abordagem abaixo não funcionará
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
Mas isso vai funcionar.
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
Obtendo dados da tabela do banco de dados usando a estrutura da entidade
Os exemplos acima estão usando itens codificados para as opções. Então, pensei em adicionar um código de exemplo para obter dados usando o Entity Framework, pois muitas pessoas o usam.
Vamos supor que seu objeto DbContext tenha uma propriedade chamada Employees, que é do tipo em DbSet<Employee>que a Employeeclasse de entidade possui uma propriedade Ide Namecomo esta
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
Você pode usar uma consulta LINQ para obter os funcionários e usar o método Select na sua expressão LINQ para criar uma lista de SelectListItemobjetos para cada funcionário.
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);
}
Assumindo que contexté seu objeto de contexto db. O código de exibição é o mesmo que acima.
Usando SelectList
Algumas pessoas preferem usar a SelectListclasse para armazenar os itens necessários para renderizar as opções.
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
Agora, na sua ação GET, você pode usar o SelectListconstrutor para preencher a Employeespropriedade do modelo de exibição. Verifique se você está especificando os parâmetros dataValueFielde 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" }
};
}
Aqui eu estou chamando o GetEmployeesmétodo para obter uma lista de objetos Employee, cada um com uma Ide FirstNamepropriedade e eu usar essas propriedades como DataValueFielde DataTextFielddo SelectListobjeto que criamos. Você pode alterar a lista codificada para um código que lê dados de uma tabela de banco de dados.
O código da visualização será o mesmo.
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
Renderize um elemento SELECT a partir de uma lista de cadeias.
Às vezes, você pode querer renderizar um elemento de seleção de uma lista de cadeias. Nesse caso, você pode usar o SelectListconstrutor que leva apenasIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
O código da visualização será o mesmo.
Definir opções selecionadas
Algumas vezes, convém definir uma opção como a opção padrão no elemento SELECT (por exemplo, em uma tela de edição, você deseja carregar o valor da opção salva anteriormente). Para fazer isso, você pode simplesmente definir o EmployeeIdvalor da propriedade para o valor da opção que deseja ser selecionada.
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);
}
Isso selecionará a opção Tom no elemento de seleção quando a página for renderizada.
Menu suspenso de seleção múltipla
Se você deseja renderizar uma lista suspensa de seleção múltipla, pode simplesmente alterar a propriedade do modelo de visualização que você usa para asp-foratribuir na visualização a um tipo de matriz.
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Isso renderizará a marcação HTML para o elemento select com o multipleatributo que permitirá ao usuário selecionar várias opções.
@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>
Definir opções selecionadas na seleção múltipla
Semelhante à seleção única, defina o EmployeeIdsvalor da propriedade para uma matriz de valores que você deseja.
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);
}
Isso selecionará a opção Tom e Jerry no elemento de seleção múltipla quando a página for renderizada.
Usando o ViewBag para transferir a lista de itens
Se você não prefere manter uma propriedade tipo de coleção para passar a lista de opções para a vista, você pode usar o ViewBag dinâmica para fazê-lo. ( Esta não é a minha abordagem recomendada, pessoalmente, como viewbag é dinâmico e seu código é propenso a uncatched erros de digitação )
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
e na vista
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Usando o ViewBag para transferir a lista de itens e definir a opção selecionada
É o mesmo que acima. Tudo o que você precisa fazer é definir o valor da propriedade (para a qual você está vinculando a lista suspensa) com o valor da opção que você deseja selecionar.
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());
}
e na vista
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Agrupando itens
O método auxiliar de seleção de tags suporta opções de agrupamento em uma lista suspensa. Tudo o que você precisa fazer é especificar o Groupvalor da propriedade de cada um SelectListItemno seu método de ação.
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);
}
Não há alterações no código da visualização. o auxiliar de seleção de tags agora renderizará as opções em dois itens do grupo de opções.