In questo articolo vedremo come creare un progetto Asp.Net MVC Core, con il quale visualizzare una finestra modale.
Le finestre modali, sono quelle finestre che vengono visualizzare in primo piano, rendendo la finestra precedente opaca, di solito viene oscurata di griglio con la finestra modale in primo piano.
Può essere utilizzata come form di inserimento dati oppure come un messaggio da evidenziare, che può essere un avviso e quindi conferma di lettura di tale informativa.
L’utilizzo avviene in molti scenari e questo tipo di finestra trova sempre ipiù nteresse da parte di tanti sviluppatori.
In questo articolo vedremo come da un pulsante di una semplice pagine Asp.Net Core MVC viene richiamata la modale, composta da due pulsanti, uno per annullare e chiudere la finestra, e l’altro per visualizzare a video ulteriore messaggio, in particolare l’alert di Javascript.
Inoltre viene visualizzato un controllo Textbox.
Creazione del progetto e stesura del codice
Si crea un nuovo progetto web, con il linguaggio di programmazione C# e scegliamo come ambiente quello relativo al Web, come modello Asp.Net Core, facciamo click sul pulsante Avanti e nella finestra successiva selezioniamo Asp.Net MVC.
A questo punto facciamo click sul pulsante Crea ed il progetto verrà creato.
Facciamo doppio click sul file “index.cshtml” della cartella “Home” con il quale ci fa visualizzare il codice html.
Scriviamo dopo il primo div, le righe di codice html per visualizzare un pulsante il quale avrà impostato le proprietà id con un valore univoco, class con la formattazione del pulsante, presente nel file di stile del nostro progetto, data-toggle indicando la modale, e la proprietà Targhet con il nome della modale, che nel nostro caso di chiama “NomeModale”.
Si riporta qui di seguito la dichiarazione delle suddette operazioni.
<button id="btnApriModal" class="btn btn-primary" data-toggle="modal" data-target="#NomeModale">apri</button>
Il pulsante richiama una modale denominata “NomeModale”, in questo modale, andiamo ad impostare un titolo, un pulsante di chiusura in alto a destra, una casella di testo, un testo e due pulsanti, uno che chiude la modale e l’altro che visualizza un messaggio a video.
Qui di seguito il codice delle suddette operazioni.
<div class="modal fade" id="NomeModale" tabindex="-1" role="dialog" aria-labelledby="titolo" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="titolo">Titolo Finestra</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>Testo</strong> <br /> <br />
@Html.Label("labelId", "Testo Label:")
@Html.TextBox("NomeTxt")
<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary" onclick="alert('test');">Salva</button>
</div>
</div>
</div>
</div>
Come si è visto dal codice precedente, la modale viene realizzata impostando alcune proprietà, come la classe, un id che sarà richiamato dal pulsante creato in precedenza, l’indice di tabulazione, il tipo di pagina, che è dialog ed il nome del titolo.
A seguire di tale tag, troviamo una serie di DIV che permetteranno di impostare e visualizzare il titolo della modale, un pulsante di chiusura della modale situato in alto a destra, il testo nella dialog , una casella di testo, ed infine altri due pulsanti uno per la chiusura della pagina e l’altro per visualizzare un messaggio a video tramite il codice di linguaggio Javascript, quale la funzione Alert.
Con questo codice che abbiamo visto in precedenza, avremo la nostra finestra modale.
Un altro modo di aprire la modale in Jquery è tramite il metodo “Show” della modale.
Si riporta il frammento javascript con il quale si apre la modale.
<script language="Javascript">
function ApriModal() {
$('#NomeModale').modal('show');
}
</script>
Il pulsante richiamerà la funzione “ApriModal”.
Qui di seguito il frammento delle suddette operazioni.
<button id="btnApriModal" onclick="ApriModal();" >Apri </button>
Ora non ci resta che testare il nostro programma e vedere il risultato finale che sarà la visualizzazione della modale.
Conclusioni
L’articolo ha voluto fornire le nozioni base di come creare una modale in Asp.Net Core MVC, molto semplice da realizzare e di grande utilità che spesso viene utilizzata nei vari progetti web. Con ulteriore codice si possono creare anche finestre modali più complesse.