Utilizzo degli helper Seleziona tag per il rendering di un elemento SELECT
Nella tua azione GET, crea un oggetto del tuo modello di vista, carica la EmployeeListproprietà collection e inviala alla 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);
}
E nella tua vista di creazione, crea un nuovo SelectListoggetto dalla EmployeeListproprietà e passalo come valore per la asp-itemsproprietà.
@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 il tuo metodo di azione HttpPost per accettare i dati del modulo inviato.
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
O
Se il tuo modello di visualizzazione ha List<SelectListItem>come proprietà gli elementi a discesa.
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
E nella tua azione,
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 nella vista, puoi usare direttamente la Employeesproprietà per il 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 SelectListItemappartiene allo Microsoft.AspNet.Mvc.Renderingspazio dei nomi.
Assicurati di utilizzare un tag di chiusura esplicito per l'elemento select. Se usi l'approccio tag autochiudente, l'helper tag renderà un elemento SELECT vuoto!
L'approccio seguente non funzionerà
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
Ma questo funzionerà.
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
Ottenere i dati dalla tabella del database utilizzando il framework di entità
Gli esempi sopra riportati utilizzano elementi codificati per le opzioni. Quindi ho pensato di aggiungere un po 'di codice di esempio per ottenere i dati usando Entity Framework come molti lo usano.
Supponiamo che il tuo oggetto DbContext abbia una proprietà chiamata Employees, che è di tipo in DbSet<Employee>cui la Employeeclasse di entità ha una proprietà Ide Namecome questa
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
È possibile utilizzare una query LINQ per ottenere i dipendenti e utilizzare il metodo Select nell'espressione LINQ per creare un elenco di SelectListItemoggetti per ciascun dipendente.
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);
}
Supponendo che contextsia l'oggetto contestuale db. Il codice di visualizzazione è uguale al precedente.
Utilizzando SelectList
Alcune persone preferiscono usare la SelectListclasse per contenere gli elementi necessari per rendere le opzioni.
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
Ora nella tua azione GET, puoi usare il SelectListcostruttore per popolare la Employeesproprietà del modello di vista. Assicurarsi di specificare i parametri 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" }
};
}
Qui sto chiamando il GetEmployeesmetodo per ottenere un elenco di oggetti dipendenti, ciascuno con un Ide FirstNameproprietà e io uso quelle proprietà come DataValueFielde DataTextFielddel SelectListoggetto che abbiamo creato. È possibile modificare l'elenco hardcoded in un codice che legge i dati da una tabella del database.
Il codice di visualizzazione sarà lo stesso.
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
Rendering di un elemento SELECT da un elenco di stringhe.
A volte potresti voler rendere un elemento select da un elenco di stringhe. In tal caso, puoi usare il SelectListcostruttore che richiede soloIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
Il codice di visualizzazione sarà lo stesso.
Impostazione delle opzioni selezionate
Alcune volte, è possibile impostare un'opzione come opzione predefinita nell'elemento SELECT (ad esempio, in una schermata di modifica, si desidera caricare il valore dell'opzione salvata in precedenza). Per fare ciò, è possibile semplicemente impostare il EmployeeIdvalore della proprietà sul valore dell'opzione che si desidera selezionare.
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);
}
Questo selezionerà l'opzione Tom nell'elemento select quando la pagina viene renderizzata.
Menu a discesa multi-selezione
Se si desidera eseguire il rendering di un menu a discesa a selezione multipla, è possibile modificare semplicemente la proprietà del modello di vista utilizzata per l' asp-forattributo nella vista in un tipo di array.
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Ciò renderà il markup HTML per l'elemento select con l' multipleattributo che consentirà all'utente di selezionare più opzioni.
@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>
Impostazione delle opzioni selezionate in selezione multipla
Simile alla selezione singola, imposta il EmployeeIdsvalore della proprietà su una matrice di valori che desideri.
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);
}
Questo selezionerà l'opzione Tom e Jerry nell'elemento multi-selezione quando viene eseguito il rendering della pagina.
Utilizzo di ViewBag per trasferire l'elenco di elementi
Se non si preferisce mantenere una proprietà di tipo di raccolta per passare alla lista di opzioni per la vista, è possibile utilizzare il ViewBag dinamica di farlo. ( Questo non è il mio approccio personalmente raccomandato come viewbag è dinamico e il codice è incline a uncatched errori di battitura )
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 nella vista
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Utilizzo di ViewBag per trasferire l'elenco di elementi e l'impostazione dell'opzione selezionata
È come sopra. Tutto quello che devi fare è impostare il valore della proprietà (per cui stai vincolando il menu a discesa) sul valore dell'opzione che desideri selezionare.
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 nella vista
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
Raggruppare gli articoli
Il metodo helper di selezione tag supporta le opzioni di raggruppamento in un menu a discesa. Tutto quello che devi fare è specificare il Groupvalore della proprietà di ciascuno SelectListItemnel tuo metodo di azione.
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);
}
Non ci sono cambiamenti nel codice di visualizzazione. l'helper tag select ora visualizzerà le opzioni all'interno di 2 elementi optgroup .