Utilisation des assistants Select Tag pour rendre un élément SELECT
Dans votre action GET, créez un objet de votre modèle de vue, chargez la EmployeeListpropriété de collection et envoyez-la à la vue.
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);
}
Et dans votre vue de création, créez un nouvel SelectListobjet à partir de la EmployeeListpropriété et transmettez-le comme valeur pour la asp-itemspropriété.
@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>
Et votre méthode d'action HttpPost pour accepter les données de formulaire soumises.
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
Ou
Si votre modèle de vue a une List<SelectListItem>comme propriété pour vos éléments de liste déroulante.
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Et dans ton action,
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);
}
Et dans la vue, vous pouvez directement utiliser la Employeespropriété pour le 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 classe SelectListItemappartient à l' Microsoft.AspNet.Mvc.Renderingespace de noms.
Assurez-vous que vous utilisez une balise de fermeture explicite pour l'élément de sélection. Si vous utilisez l'approche de balise à fermeture automatique, l'assistant de balise rendra un élément SELECT vide!
L'approche ci-dessous ne fonctionnera pas
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
Mais cela fonctionnera.
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
Obtenir des données de votre table de base de données à l'aide de la structure d'entité
Les exemples ci-dessus utilisent des éléments codés en dur pour les options. J'ai donc pensé ajouter un exemple de code pour obtenir des données à l'aide du framework Entity, car beaucoup de gens l'utilisent.
Supposons que votre objet DbContext a une propriété appelée Employees, qui est de type DbSet<Employee>où la Employeeclasse d'entité a une propriété Idand Namecomme celle-ci
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
Vous pouvez utiliser une requête LINQ pour obtenir les employés et utiliser la méthode Select dans votre expression LINQ pour créer une liste d' SelectListItemobjets pour chaque employé.
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);
}
En supposant que contextvotre objet de contexte db. Le code de vue est le même que ci-dessus.
Utilisation de SelectList
Certaines personnes préfèrent utiliser la SelectListclasse pour contenir les éléments nécessaires au rendu des options.
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
Maintenant, dans votre action GET, vous pouvez utiliser le SelectListconstructeur pour renseigner la Employeespropriété du modèle de vue. Assurez-vous de spécifier les paramètres dataValueFieldet 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" }
};
}
Ici , je fais appel à la GetEmployeesméthode pour obtenir une liste des objets employés, chacun avec une Idet FirstNamepropriété et j'utiliser ces propriétés DataValueFieldet DataTextFieldde l' SelectListobjet que nous avons créé. Vous pouvez modifier la liste codée en dur en un code qui lit les données d'une table de base de données.
Le code de vue sera le même.
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
Rendu un élément SELECT à partir d'une liste de chaînes.
Parfois, vous souhaiterez peut-être rendre un élément de sélection à partir d'une liste de chaînes. Dans ce cas, vous pouvez utiliser le SelectListconstructeur qui ne prend queIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
Le code de vue sera le même.
Définition des options sélectionnées
Parfois, vous souhaiterez peut-être définir une option comme option par défaut dans l'élément SELECT (par exemple, dans un écran d'édition, vous souhaitez charger la valeur d'option précédemment enregistrée). Pour ce faire, vous pouvez simplement définir la EmployeeIdvaleur de la propriété sur la valeur de l'option que vous souhaitez sélectionner.
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);
}
Cela sélectionnera l'option Tom dans l'élément de sélection lorsque la page est rendue.
Liste déroulante de sélection multiple
Si vous souhaitez rendre une liste déroulante à sélection multiple, vous pouvez simplement modifier la propriété de votre modèle de vue que vous utilisez pour l' asp-forattribut dans votre vue en un type de tableau.
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Cela rendra le balisage HTML pour l'élément select avec l' multipleattribut qui permettra à l'utilisateur de sélectionner plusieurs options.
@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>
Définition des options sélectionnées dans la sélection multiple
Similaire à la sélection unique, définissez la EmployeeIdsvaleur de la propriété sur le tableau de valeurs souhaité.
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);
}
Cela sélectionnera l'option Tom et Jerry dans l'élément de sélection multiple lorsque la page est rendue.
Utilisation de ViewBag pour transférer la liste des articles
Si vous ne préférez pas conserver une propriété de type collection pour transmettre la liste d'options à la vue, vous pouvez utiliser le ViewBag dynamique pour le faire. ( Ce n'est pas mon approche personnellement recommandée car viewbag est dynamique et votre code est susceptible de ne pas être corrigé. fautes de frappe )
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
et dans la vue
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Utilisation de ViewBag pour transférer la liste des éléments et paramétrer l'option sélectionnée
C'est la même chose que ci-dessus. Tout ce que vous avez à faire est de définir la valeur de la propriété (pour laquelle vous liez la liste déroulante) sur la valeur de l'option que vous souhaitez sélectionner.
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());
}
et dans la vue
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Regrouper des éléments
La méthode d'aide à la sélection de balises prend en charge les options de regroupement dans une liste déroulante. Tout ce que vous avez à faire est de spécifier la Groupvaleur de propriété de chacun SelectListItemdans votre méthode d'action.
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);
}
Il n'y a pas de changement dans le code de vue. l'assistant de sélection de balises rendra désormais les options à l'intérieur de 2 éléments optgroup .