In questo articolo vedremo come effettuare la validazione dei controlli di tipo caselle di testo nelle applicazioni di tipo Asp.Net MVC Core.
Utilizzeremo l’ultima versione del Framework, la 5, con il linguaggio di programmazione C# e l’ambiente di sviluppo Visual Studio 2019.
Quando si sviluppano applicazioni web, può tornare utile impostare nel modello, ossia la classe che farà da modello per la pagina web, alcuni attributi come l’obbligo di scrivere nel campo, oppure che rispetta un determinato intervallo come può essere per i campi di tipo intero, oppure che rispetta una certa formattazione come possono essere i campi per il codice fiscale o indirizzo email o altro.Questi messaggi saranno visualizzati a video, non appena si proverà ad inserirli.
Il tutto sarà come mostrato in figura 1.
Figura 1 - La pagina con i controlli ed i messaggi di validazione.
Creazione del progetto
Si crea un nuovo progetto Asp.net MVC Core, selezionando come versione del Framework la 5, che al momento in cui stiamo scrivendo l’articolo è l’ultima. Come linguaggio di programmazione selezionare C# nell'ambiente di sviluppo Visual Studio 2019 community.
Stesura del codice
Dopo aver creato il progetto, occorre fare click sulla cartella “Models” e tramite il tasto destro, selezionare dal menu che viene visualizzato la voce “Aggiungi” e nel sottomenu la voce “Classe”.
La classe sarà il modello che utilizzeremo nella pagina, ossia nella View, con i campi che avranno obbligatorietà oppure che devono rispettare alcuni criteri.
Dopo aver fatto click sul nome “Classe”, digitiamo come nome classe “Anagrafica”.
Il modello avrà delle proprietà, di tipo “intero” e “string” con attributi per visualizzare a seconda del campo un determinato messaggio.
Qui di seguito si riporta la classe “Anagrafica” con i vari campi
C#
public class Anagrafica
{
[Required(ErrorMessage = "Campo Nome obbligatorio")]
public string Nome { get; set; }
[Required(ErrorMessage = "Campo Cognome obbligatorio")]
public string Cognome { get; set; }
[Required(ErrorMessage = "Campo Età obbligatorio")]
[Range(0, 110, ErrorMessage ="Valore non valido")]
public int? Eta { get; set; }
[StringLength(16,ErrorMessage ="Il codice fiscale dev'essere composto da 15 caratteri")]
[RegularExpression(@"^.*[A-Z]{6}\d{2}[A-Z]\d{2}[A-Z]\d{3}[A-Z]$", ErrorMessage ="formato codice fiscale errato")]
public string CodiceFiscale { get; set; }
}
Come si vede dal frammento di codice precedente, abbiamo campi obbligatori di tipo string come il campo “Nome” e “Cognome”. Un campo di tipo “Intero” denominato “Eta” che è obbligatorio e che deve rispettare un determinato intervallo, altrimenti visualizza un messaggio, un campo di tipo string, in cui deve rispettare una determinata formattazione ed avrà una lunghezza massima di 16 caratteri.
Terminata la creazione della classe del modello per la gestione delle informazioni, non ci resta che completare il codice, sia lato della pagina stessa e sia per la gestione dei dati.
Nel file controller, si crea un metodo che passato il modello creato in precedenza, verifica se i dati sono validi, ossia rispettano i criteri che abbiamo configurato per ogni singola proprietà, quale la valorizzazione della stessa, oppure rispetta l’espressione regolare o l’intervallo dei dati. Inoltre si farà un controllo se il valore inserito nella casella Nome è uguale a “Emanuele”, in tal caso verrà visualizzato un messaggio di errore. Questo esempio di codice può essere usato con la gestione dei dati, prima che avvenga l’inserimento nel database, fornendo all’utente un messaggio che il dato inserito (per esempio creazione di un account) è già presente nella base dati.
Nel file Controller, denominato “HomeController”, scriviamo un metodo post, con il quale tramite la proprietà “IsValid” verifichiamo se i dati inseriti nella form sono corretti, in tal caso vengono rilevati i vari valori verificando al tempo stesso che il campo “Nome” è diverso da “Emanuele”, in caso contrario visualizzerà all’utente un messaggio di errore.
Nel caso che invece il modello non è valido perché presenti gli errori, viene visualizzato il codice per rilevare il testo dell’errore, anche se questo codice non servirebbe, perché il messaggio di errore verrà visualizzato a video nella pagina, ma lo scriviamo per fornire al lettore informazioni utili nel caso che vuole gestire tramite un log o altro, le informazioni di errore dell’inserimento dati del form.
Qui di seguito il metodo da per la gestione dei dati.
HomeController.cs
[HttpPost]
public IActionResult Inserisci(Anagrafica anagrafica)
{
if (ModelState.IsValid )
{
string Nome = anagrafica.Nome;
string Cognome = anagrafica.Cognome;
int eta = anagrafica.Eta.Value;
string codiceFiscale = anagrafica.CodiceFiscale;
if (Nome == "Emanuele")
{
ModelState.AddModelError("Nome", "Nome presente sulla base dati.");
return View("Index", anagrafica);
}
return View("Index");
}
else
{
foreach (var Elemento in ModelState.Values)
{
foreach (var Errore in Elemento.Errors)
{
string ErroreRilevato = Errore.ErrorMessage;
}
}
}
return View("Index");
}
Siamo giunti quasi alla conclusione dell’articolo, non ci resta che scrivere la form per l’inserimento dei dati e la gestione dell’evento click del pulsante e del modello.
Facciamo click sul file denominato “Index.cshtml”, in alto, sopra ad ogni dichiarazione, scriviamo il riferimento al modello.
Qui di seguito le suddette dichiarazioni.
Index.cshtml
@model Anagrafica
Terminata l'aggiunta del modello, nel div, dobbiamo inserire un tag form, dove come action si fa riferimento al metodo creato in precedenza e di tipo post.
Nel form, avremo un metodo di tipo “ValidationSummary” che permette di visualizzare in maniera tabellare, come un sommario, gli errori rilevati nella form, visualizzando il messaggio per ogni proprietà, inoltre per ogni casella di testo, ossia un controllo TextBox, tramite il metodo “ValidateMessage” visualizzerà il messaggio di errore, nel caso che non rispetta i criteri impostati nelle proprietà.
Qui di seguito la form completa del file Index.cshtml
@model Anagrafica
@{
ViewData["Title"] = "Home Page";
}
<div class="text-left">
<h1 class="display-4">Esempio campi obbligatori</h1>
<form action="Home/Inserisci" method="post">
@Html.ValidationSummary(false, "", new { @class = "text-danger" })
<label>Nome</label><br />
@Html.TextBox("Nome") <br />
@Html.ValidationMessage("Nome")
<label>Cognome</label><br />
@Html.TextBox("Cognome") <br />
@Html.ValidationMessage("Cognome")
<br />
<label>Eta</label><br />
@Html.TextBox("Eta") <br />
@Html.ValidationMessage("Eta")
<br />
<label>Codice Fiscale</label><br />
@Html.TextBox("CodiceFiscale") <br />
@Html.ValidationMessage("CodiceFiscale")
<button id="BtnEsegui" type="submit">Esegui</button>
</form>
</div>
Conclusioni
Ora non resta che eseguire il nostro applicativo e fare le varie prove, verificando la correttezza della validazione dei dati, e fare la prova anche inserendo nella casella “Nome” il testo “Emanuele”.
L’articolo ha voluto fornire al lettore informazioni utili sulla gestione dei campi, che in Asp.Net MVC Core, è completamente diverso dal precedente sviluppo con la tecnologia Asp.Net.
Oltre a visualizzare i messaggi di errore per i singoli campi, si è visto come utilizzando il metodo “ValidationSummary” è possibile visualizzare la lista degli errori, in maniera tabellare come un sommario.