In questo articolo vedremo come aggiungere in una tabella delle righe al click di un pulsante.
Può capitare di avere un form, con il quale aggiungere delle righe di volta in volta, e che questi dati inseriti nelle varie colonne vengono gestiti a livello di codice o inseriti in una tabella da database.
Si può considerare come un modulo di creazione dinamica.
Tramite l’ambiente di sviluppo Microsoft Visual Studio 2017 Community e la versione del Framework Core 2.1 vedremo come in Asp.Net MVC e linguaggio di programmazione C# possiamo creare un modulo con l’aggiunta di righe in maniera dinamica per la gestione delle informazioni.
Il tutto sarà come mostrato nella figura precedente.
Creazione del progetto
Si crea un nuovo progetto dopo aver selezionato il linguaggio di programmazione C# e successivamente la categoria web, tra i modelli propositi selezionare Asp.Net Core e poi Asp.Net MVC .
Ora non ci resta che scrivere il codice nelle pagine che sono state generate dall'ambiente di sviluppo, in particolare utilizzeremo la pagina Index.cshtml ed il file HomeController per la gestione dei dati nel controller.
Stesura del codice
Facciamo dopppio click sulla pagina Index.cshtml e scriviamo il codice html per la creazione della tabella, un semplice codice html racchiuso in iun tag form in questo modo ci permette di gestire le informazioni tramite il codice C# nel controller.
La tabella avrà due colonne.
Qui di seguito il codice html delle sudette operazioni.
<form method="post">
<a style="margin: 10px 0;" href="javascript:addRow();">Aggiungi Riga</a>
<table id="tabellaDati">
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="nome" /></td>
<td><input type="text" name="cognome" /></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" />
</form>
Sempre nella stessa pagina, dobbiamo scrivere il codice Jquery per la creazione delle righe, che tramite il click del tag “a href” andrà ad aggiungere una riga nella tabella.
Qui di seguito il codice Jquery.
<script type="text/javascript" >
function addRow() {
$("#tabellaDati tbody tr:first").clone().find("input").each(function () {
$(this).val('');
}).end().appendTo("#tabellaDati");
}
</script>
Siamo giunti alla stesura del codice C#, in particolare dovremmo gestire i dati e le informazioni presenti nella tabella html creata in precedenza per poi passarli lato codice C# situato nel file del controller denominato HomeController.
In questo file andiamo a scrivere il nome di una funzione denominata index, con il quale rileveremo i dati presenti nel form.
Per ogni colonna andremo a fare uno split, perché i valori delle varie righe sono separati da virgola.
Qui di seguito il codice completo del file HomeController che rileva i dati della form.
[HttpPost]
public ActionResult Index(Microsoft.AspNetCore.Http.IFormCollection form)
{
string[] nomi = form["nome"].ToString().Split(",");
string[] cognomi = form["cognome"].ToString().Split(",");
string Nome = "";
string telefono = "";
for (int conta = 0; conta < nomi.Length; conta++)
{
Nome = nomi[conta];
telefono = cognomi[conta];
//codice per insert nel database
}
return View();
}
Ora non ci resta che eseguire il codice e fare delle prove su più righe, dopo aver inserito delle nuove rige e valorizzate le varie caselle di testo, tramite il pulsante denominato "Submit" viene richiamato il metodo "Index" essendo nel form impostato il method di tipo "POST".
Conclusioni
L’articolo ha fornito una tecnica di creazione di tabelle dinamiche che possono tornare utile nella gestione dei dati.
Asp.Net MVC Core è sempre più una tecnologia utilizzata e che vedrà un forte utilizzo con l’uscita della nuova versione del Framework 5.0. Per chi già utilizza MVC e/o Jquery non troverà difficoltà ad utilizzare Asp.Net Core e questa versione del Framework e architettura.