In questo articolo vedremo come utilizzare il controllo DropDownlist, nelle nostre pagine web di tipo Asp.Net MVC con entrambi i linguaggi di programmazione più utilizzati in Visual Studio .Net
In questo articolo, vedremo come caricare un controllo di tipo casella combinata, conosciuto come DropDownlist, con dei valori che sono presi da una lista, ma possono essere usati anche come estrapolazione dei record di una tabella tramite LinqToEntity, o impostare un valoro di default, proprio prelevando da un determinato record.
Vediamo di seguito entrambi gli scenari per fornire al lettore le delucidazioni su questo controllo.
Dopo aver creato un progetto in Asp.Net MVC e creata una pagina di visualizzazione, dovremmo inserire in tale pagina un controllo di tipo “DropDownlist”.
Stesura di codice
Vedremo adesso il codice che dobbiamo scrivere sia nella parte “Visualizzazione” e sia nella parte “codice”.
Nella parte codice, o meglio nel “Controller” nel nostro caso si chiama “HomeController” sriviamo un metodo che restituisce una lista di valori di tipo string.
Qui di seguito il frammento di codice per entrambi i linguaggi di programmazione.
VB.Net
Function GetDati() As List(Of String)
Dim returnValori As New List(Of String)
returnValori.Add("Emanuele")
returnValori.Add("Luigi")
returnValori.Add("Olga")
returnValori.Add("Marco")
Return returnValori
End Function
C#
public List<string> GetDati()
{
List<string> returnValori = new List<string>();
returnValori.Add("Emanuele");
returnValori.Add("Luigi");
returnValori.Add("Olga");
returnValori.Add("Marco");
return returnValori;
}
Nella pagina di visualizzazione che utilizzeremo come test, scriviamo il seguente frammento di codice, che permette di visualizzare un controllo DropDownList con i valori del metodo precedente scritto.
VB.Net
@Html.DropDownList("Nominativi", New SelectList(CType(Me.ViewContext.Controller, WebApplicationTest.HomeController).GetDati()), htmlAttributes:=New With {.class = "form-control"})
<br />
<br />
C#
@Html.DropDownList("Nominativi", new SelectList(((WebApplication1.Controllers.HomeController)this.ViewContext.Controller).GetDati()), htmlAttributes: new { @class = "form-control" })
<br />
<br />
Codice completo della pagina per entrambi i linguaggi
VB.Net
@Code
Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Esempio DropDownList</title>
</head>
<body>
<div>
@Html.DropDownList("Nominativi ", New SelectList(CType(Me.ViewContext.Controller, WebApplicationTest.HomeController).GetDati()), htmlAttributes:=New With {.class = "form-control"})
<br />
<br />
</div>
</body>
</html>
C#
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Esempio DropDownList</title>
</head>
<body>
<div>
@Html.DropDownList("Nominativi", new SelectList(((WebApplication1.Controllers.HomeController)this.ViewContext.Controller).GetDati()), htmlAttributes: new { @class = "form-control" })
<br />
<br />
</div>
</body>
</html>
Ora se eseguiamo la nostra applicazione, vedremo che verrà visualizzata una DropDownList con i valori nel codice.
Premessa, se viene richiamato il controller Home, ricordarsi di mettere nel metodo “Index” il nome della pagina che abbiamo creato, come qui di seguito Return View("ViewDemoDropDownList")
Il tutto sarà visibile come in figura 1.
Figura 1 – La DropDowList valorizzata.
Ora vedremo altro esempio di utilizzo della DropDownList, in particolare vedremo come impostare un valore o come utilizzare il metodo “DropDownListFor” con un valore di default.
Si crea una nuova classe di tipo Nominativo con una proprietà di tipo stringa.
Qui di seguito i frammenti di codice per entrambi i linguaggi.
VB.Net
Public Class Nominativi
Public Property Nomi As String
End Class
C#
public class Nominativi
{
public string Nomi { get; set; }
}
Ora dobbiamo creare il metodo per il caricamento dei dati, che sarà la restituzione di una lista di tipo string. Il metodo servirà al popolamento del controllo DropDownList
VB.Net
Public Function GetDati2() As List(Of String)
Dim nomiReturn As List(Of Nominativi) = New List(Of Nominativi)()
Dim nom As Nominativi = New Nominativi()
nom.Nomi = "Emanuele"
nomiReturn.Add(nom)
nom = New Nominativi()
nom.Nomi = "Luigi"
nomiReturn.Add(nom)
nom = New Nominativi()
nom.Nomi = "Olga"
nomiReturn.Add(nom)
nom = New Nominativi()
nom.Nomi = "Marco"
nomiReturn.Add(nom)
Dim risultato = From dati In nomiReturn Select dati.Nomi
Return risultato.ToList()
End Function
C#
public List<string> GetDati2()
{
List<Nominativi> nomiReturn = new List<Nominativi>();
Nominativi nom = new Nominativi();
nom.Nomi = "Emanuele";
nomiReturn.Add(nom);
nom = new Nominativi();
nom.Nomi = "Luigi";
nomiReturn.Add(nom);
nom = new Nominativi();
nom.Nomi = "Olga";
nomiReturn.Add(nom);
nom = new Nominativi();
nom.Nomi = "Marco";
nomiReturn.Add(nom);
var risultato = from dati in nomiReturn select dati.Nomi;
return risultato.ToList();
}
A questo punto abbiamo quasi completato la parte della stesura del codice per la parte controller, quello che dobbiamo fare, è impostare nel view della pagina quando si apre, il passaggio del dato, in modo che nella casella combinata viene selezionato il valore che passiamo.
Nel metodo index della pagina, o altro metodo che permette la visualizzazione della nostra pagina, impostare un valore al secondo parametro, di tipo Nominativi.
Qui di seguito il frammento di codice delle suddette operazioni per entrambi i linguaggi.
VB.Net
Function Index() As ActionResult
Dim nom As New Nominativi()
nom.Nomi = "Luigi"
Return View("ViewDemoDropDownList", nom)
End Function
C#
public ActionResult Index()
{
Nominativi nom = new Nominativi();
nom.Nomi = "Luigi";
return View("ViewDropDownList", nom);
}
Ora dobbiamo passare alla nostra visualizzazione in modo da impostare in un secondo controllo di tipo DropDownList, il modello ed il valore da mettere come default.
In alto sopra ogni dichiarazione, scriviamo il modello di tipo “Nominativo” che riguarda la nostra classe.
VB.Net
@ModelType Nominativi
C#
@model WebApplication1.Controllers.Nominativi
A questo punto, scriviamo un nuovo tag per la creazione di una nuova DropDonwList utilizzando in questo caso il metodo “For” per ciclare i vari valori.
VB.Net
@Html.DropDownListFor(Function(x) x.Nomi, New SelectList(CType(Me.ViewContext.Controller, WebApplicationTest.HomeController).GetDati2()), htmlAttributes:=New With {.class = "form-control"})
C#
@Html.DropDownListFor(model => model.Nomi, new SelectList(((WebApplication1.Controllers.HomeController)this.ViewContext.Controller).GetDati2()), htmlAttributes: new { @class = "form-control" })
Se viene eseguita la nostra applicazione noteremo che il valore della DropDownList è selezionato, il tutto come mostrato in figura 2.
Figura 2 Il valore selezionato della seconda casella di testo.
Qui di seguito si riporta il codice completo per entrambi i linguaggi della parte View.
VB.Net
@ModelType Nominativi
@Code
Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Esempio DropDownList</title>
</head>
<body>
<div>
@Html.DropDownList("Dati", New SelectList(CType(Me.ViewContext.Controller, WebApplicationTest.HomeController).GetDati()), htmlAttributes:=New With {.class = "form-control"})
<br />
<br />
@Html.DropDownListFor(Function(x) x.Nomi, New SelectList(CType(Me.ViewContext.Controller, WebApplicationTest.HomeController).GetDati2()), htmlAttributes:=New With {.class = "form-control"})
</div>
</body>
</html>
C#
@model WebApplication1.Controllers.Nominativi
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Esempio DropDownList</title>
</head>
<body>
<div>
@Html.DropDownList("Dati", new SelectList(((WebApplication1.Controllers.HomeController)this.ViewContext.Controller).GetDati()), htmlAttributes: new { @class = "form-control" })
<br />
<br />
@Html.DropDownListFor(model => model.Nomi, new SelectList(((WebApplication1.Controllers.HomeController)this.ViewContext.Controller).GetDati2()), htmlAttributes: new { @class = "form-control" })
</div>
</body>
</html>
Mentre nel caso che non vogliamo utilizzare il for ed impostare ugualmente un valore di default alla casella, dobbiamo impostare nel primo parametro, il nome della proprietà.
Qui di seguito un esempio di codice.
VB.Net
@Html.DropDownList("Nomi", New SelectList(CType(Me.ViewContext.Controller, WebApplicationTest.HomeController).GetDati()), htmlAttributes:=New With {.class = "form-control"})
C#
@Html.DropDownList("Nomi", new SelectList(((WebApplication1.Controllers.HomeController)this.ViewContext.Controller).GetDati()), htmlAttributes: new { @class = "form-control" })
Conclusioni
L’articolo ha voluto fornire delucidazioni ed indicazioni su come aggiungere ad una pagina Asp.Net MVC in particolare ad una “Visualizzazione” un controllo di tipo DropDownList.
Si è visto come effettuare il caricamento, ed impostare un valore selezionato.
Tale tecnica si può utilizzare anche nel caso che si usa Entity Framework.