Utilizzando Seleziona aiutanti tag per rendere un elemento SELECT nella vista
Nella vostra azione GET, creare un oggetto del modello vista, caricare la proprietà della raccolta EmployeeList e inviare che 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 secondo lei creare, creare un nuovo SelectList oggetto dalla proprietà EmployeeList e passare che come valore per la proprietà asp-items.
@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 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 modello ha una vista List<SelectListItem> come la proprietà per i tuoi articoli discesa.
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
E nella vostra azione get,
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, è possibile utilizzare direttamente la proprietà Employees 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 SelectListItem appartiene Microsoft.AspNet.Mvc.Rendering namespace.
Ottenere dati dalla vostra tabella di database che utilizzano Entity Framework
Gli esempi precedenti utilizzano elementi hard coded per le opzioni. Quindi ho pensato di aggiungere del codice di esempio per ottenere i dati utilizzando il framework Entity poiché molti lo usano.
Supponiamo l'oggetto DbContext ha una proprietà chiamata Employees, che è di tipo DbSet<Employee> in cui la classe Employee entità ha una proprietà Id e Name come questo
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 oggetti SelectListItem 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 context è l'oggetto contesto db. Il codice della vista è lo stesso di sopra.
Utilizzando SelectList
Alcune persone preferiscono utilizzare SelectList classe per contenere gli elementi necessari per rendere le opzioni.
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
Ora nella vostra azione GET, è possibile utilizzare il costruttore SelectList per popolare la proprietà Employees del modello di vista. Assicurati di specificare i parametri dataValueField e .
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
return new List<Employee>
{
new Employee { Id=1, FirstName="Shyju"},
new Employee { Id=2, FirstName="Bryan"}
};
}
Qui sto chiamando il metodo GetEmployees per ottenere un elenco di oggetti dipendenti, ciascuno con una proprietà Id e FirstName e io uso quelle proprietà come DataValueField e DataTextField dell'oggetto SelectList che abbiamo creato. È possibile modificare l'elenco hardcoded in un codice che legge i dati da una tabella di database.
Il codice di visualizzazione sarà lo stesso.
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
Render un elemento di selezionare da un elenco di stringhe.
A volte è possibile che si desideri eseguire il rendering di un elemento selezionato da un elenco di stringhe. In tal caso, è possibile utilizzare il SelectList costruttore che richiede solo IEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
Il codice della vista sarà stesso.
impostazione selezionata opzioni
Alcune volte, si potrebbe desiderare di impostare un'opzione come l'opzione predefinita nell'elemento SELECT (ad esempio, in una schermata di modifica, si desidera caricare il valore dell'opzione precedentemente salvato). Per fare ciò, è sufficiente impostare il valore della proprietà EmployeeId 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.
Multi selezionare discesa
Se si vuole rendere un menu a discesa Seleziona più, si può semplicemente cambiare la vostra proprietà modello di vista, che si utilizza per l'attributo asp-for in immagine per un tipo di matrice.
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
Questo renderà il markup HTML per l'elemento di selezione con l'attributo multiple che permetterà all'utente di selezionare diverse 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 selezionata opzioni in più selezionare
Simile a selezione singola, impostare il valore EmployeeIds struttura al una serie di valori che si desidera.
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 a selezione multipla quando la pagina viene visualizzata.
Utilizzando ViewBag per trasferire l'elenco degli elementi
Se non si preferisce mantenere una proprietà di tipo di raccolta per passare alla lista di opzioni per la vista, è possibile utilizzare la ViewBag dinamica di farlo. (Questo non è il mio approccio personalmente raccomandato come viewbag è dinamico e il codice è soggetto a errori di battitura uncatched)
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>
raggruppano
Il metodo di selezione tag di supporto supporta le opzioni di un menu a discesa di raggruppamento. Tutto quello che devi fare è specificare il valore della proprietà Group di ogni SelectListItem nel 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 c'è nessun cambiamento nel codice di vista. l'helper del tag select renderà ora le opzioni all'interno di 2 articoli optgroup.
solo qualcosa ho pensato di aggiungere, sembra non funzionare se si chiude il tag select immediatamente chiudere sempre i tag con il tag aiutante non ha funzionato con – RoughPlace
solo un suggerimento. I controller degli scaffold mostrano in genere i modi migliori per queste cose –