Altri metodi molto utili riguardano la creazione dei form. Il codice seguente si serve di alcuni di questi metodi per visualizzare un modulo di login:
<% using (Html.BeginForm("Index", "Home", FormMethod.Post)) {%> <p>Nome utente: <%= Html.TextBox("nomeutente", null, new { style = "background-color:yellow" })%></p> <p>Password:<%= Html.TextBox("password") %> </p> <p><%= Html.CheckBox("ricordami") %> Ricordami</p> <p><input type="submit" value="Login!" /></p> <% } %>
La prima riga di codice può far rimanere un po' sorpresi: la direttiva using viene utilizzata insieme ad una chiamata al metodo Html.BeginForm per scrivere il tag di apertura del form. Ci serviamo di questo sistema, che può sembrare inizialmente un po' complesso, in quanto ASP.NET si preoccuperà automaticamente di inserire il tag di chiusura </form> alla fine di using, evitando a noi di farlo.
Html.BeginForm prende come argomento il nome dell'azione a cui vogliamo che i dati siano inviati e del controller a cui l'azione appartiene, oltre ad altri argomenti come il metodo HTTP da utilizzare per inviare i dati. Come per gli altri metodi anche in questo caso vi consiglio di consultare la documentazione ufficiale per una lista completa di tutti gli overload disponibili.
Continuando l'analisi del codice, sono stati utilizzati altri due metodi: Html.TextBox e Html.CheckBox. Come è facile intuire dai nomi il primo crea un campo di input testuale, il secondo una casella di spunta. Altri metodi simili sono Html.Hidden, Html.TextArea, Html.RadioButton e Html.DropDownList.
Una funzionalità molto utile di questi metodi riguarda l'interazione con i valori inseriti nel ViewData. Infatti se il nome di un campo di input è uguale al nome di una chiave presente all'interno di ViewData, ASP.NET inserirà automaticamente nel campo il valore corrispondente.
Tutti i metodi visti finora presentano molti overload relativi alle funzionalità del singolo helper più altri overload che potremmo definire standard. Analizzando più nel dettaglio la prima chiamata al metodo Html.TextBox nel codice d'esempio, vediamo come è stato utilizzato un overload che accetta come parametro un oggetto generico:
<%= Html.TextBox("nomeutente", null, new { style = "background-color:yellow" })%>
Abbiamo dichiarato all'interno dell'oggetto una proprietà chiamata style a cui abbiamo assegnato il valore "background-color:yellow". Questa proprietà sarà trasformata dall'helper HTML in un attributo del tag risultante:
<input id="nomeutente" name="nomeutente" style="background-color:yellow" type="text" value="" />
La potenza di questo sistema è notevole: possiamo dichiare qualsiasi attributo HTML come proprietà dell'oggetto generico passato all'helper HTML. Nel listato seguente è necessario utilizzare la chiocciola (@) davanti alla parola class:
<!-- Altri esempi di attributi passati tramite oggetto generico--> <%= Html.TextBox("nomeutente", null, new { size = "15", @class = "nome_classe_css", maxlength = "200" })%> <!-- La maggior parte degli helper HTML supportano la medesima sintassi --> <%= Html.ActionLink("Indietro", "Index", null, new { @class = "classe_css" })%>
In quanto parola riservata del linguaggio C#, se avessimo utilizzato class senza il carattere di escape @ posto immediatamente prima si sarebbe generato un errore in fase di compilazione.
È utile infine ricordare il metodo Html.Encode che serve a trasformare i caratteri speciali per l'HTML, come maggiore e minore (< >), nelle rispettive entity (< >):
<%= Html.Encode("<a href="http://www.html.it">Link</a>") %>
<!-- Risultato: <a href="http://www.html.it">Link</a> -->
È consigliabile utilizzare questo metodo ogni volta che scriviamo una stringa in una vista.
Prima di terminare la lezione sugli helper HTML è interessante fare un confronto con WebForms per quanto riguarda il codice HTML generato dall'applicazione. Nel listato seguente è riportato il codice del form generato da MVC:
<form action="/" method="post"> <p>Nome utente: <input id="nomeutente" name="nomeutente" style="background-color:yellow" type="text" value="" /></p> <p>Password: <input id="password" name="password" type="text" value="" /></p> <p> <input id="ricordami" name="ricordami" type="checkbox" value="true" /> <input name="ricordami" type="hidden" value="false" /> Ricordami</p> <p><input type="submit" value="Login!" /></p> </form>
Il codice generato è valido per gli standard W3C, oltre ad essere molto pulito. Avremo modo di conoscere altri Helper HTML legati ai form ed in particolare alla validazione dell'input nelle lezioni dedicate ad MVC in relazione a scenari di POST.
