8769 Letture

WebMatrix: preparazione di una pagina per la modifica del contenuto del database

Continuiamo a sviluppare l'esempio di applicazione web realizzata ricorrendo a WebMatrix realizzando una pagina che consenta di modificare le informazioni già inserite all'interno della nostra base dati (nel nostro caso, trattasi di un database SQL Server Compact).

Nelle precedenti puntate abbiamo già visto come installare WebMatrix, si è iniziato ad acquisire familiarità con l'ambiente di lavoro, a sviluppare la prima applicazione d'esempio (scoprendo anche Razor) ed a collegarla con una base dati SQL Server mettendo anche a punto una pagina web per l'inserimento di nuovi record nel database:

WebMatrix: uno strumento integrato per lo sviluppo ed il testing delle applicazioni web
Creare una base dati ed attingervi da una pagina web
Creare una pagina per l'aggiunta di nuove informazioni all'interno del database

Prima di proseguire, quindi, vi invitiamo a rileggere il contenuto delle precedenti puntate.


Questa volta, cercheremo di realizzare una pagina che permetta di modificare il contenuto del nostro database. Dopo aver avviato WebMatrix e riaperto il progetto sul quale si stava lavorando, si dovrà recuperare il file catalogo.cshtml, preparato nelle puntate scorse.
La decima riga dovrà essere modificata così come segue:
<li><a href="dbmodifica.cshtml?id=@row.id">@row.Nome (<i>@row.Nome_scientifico</i>)</a></li>

Com'è possibile verificare esaminando quanto contenuto nel riquadro rosso riportato nell'immagine seguente, si è provveduto ad aggiungere, semplicemente, la tag <li><a href="dbmodifica.cshtml?id=@row.id"> </a>.
In questo modo, il server web genererà un link ipertestuale facente riferimento alla pagina dbmodifica.cshtml (che dovrà poi essere creata e che sarà utilizzata per la modifica di ogni singolo record del database). A tale pagina dinamica viene trasmesso il parametro id che conterrà il numero identificativo (univoco) del record che s'intende modificare. L'identificativo di ciascun prodotto viene estratto dal database leggendo il valore del campo ID (@row.id):

Dopo aver salvato la modifica applicata al file catalogo.cshtml, si potrà ricaricare la pagina dal browser web:

Il nome di ciascun prodotto inserito nel database sarà mostrato sotto forma di link ipertestuale. Spostando il puntatore del mouse sui vari link, si noterà come ciascuno di essi punti al file dbmodifica.cshtml trasmettendo come unico parametro, l'identificativo dell'elemento selezionato.

A questo punto, è necessario creare il file dbmodifica.cshtml che verrà utilizzato per la modifica dei dati.
Innanzi tutto, bisogna fare clic sul pulsante Nuovo, selezionare – al solito – CSHTML quindi digitare dbmodifica.cshtml nella casella Nome:

Come contenuto del file appena aggiunto, si dovrà – per il momento – introdurre quanto segue:

<h1>Modifica prodotto</h1>

<form action="" method="post">
    <p>Nome: <input type="text" name="formNome" /></p>
    <p>Nome scientifico: <input type="text" name="formNomescientifico" /></p>
    <p>Descrizione:<br/>
        <textarea name="formDescrizione" rows=5 cols=40></textarea></p>
    <p><input type="submit" value="Modifica prodotto" /></p>
</form>

Come abbiamo visto in precedenza, per eseguire del codice all'apertura della pagina, si dovrà porlo in testa alla stessa e racchiunderlo tra i "delimitatori" @{ }.

Modifichiamo il contenuto del file dbmodifica.cshtml così come segue:

@{
    var id=Request["id"];
    var db = Database.Open("Catalogo");
    var sqlquery = "SELECT * FROM Piante WHERE id=@0";
    var record = db.QuerySingle(sqlquery,id);
    var NomeProdotto=record.Nome;
    var NomeScientifico=record.Nome_scientifico;
    var Descrizione=record.Descrizione;
}

<h1>Modifica prodotto</h1>

<form action="" method="post">
    <p>Nome: <input type="text" name="formNome" value="@NomeProdotto" /></p>
    <p>Nome scientifico: <input type="text" name="formNomescientifico" value="@NomeScientifico" /></p>
    <p>Descrizione:<br/>
        <textarea name="formDescrizione" rows=5 cols=40>@Descrizione</textarea></p>
    <p><input type="submit" value="Modifica prodotto" /></p>
</form>


Come si vede, viene lanciata una query sul contenuto del database specificando come parametro l'indentificativo di volta in volta passato dalla pagina catalogo.cshtml. Dopo aver salvato il contenuto del record d'interesse nella variabile record, le linee da 6 a 8 consentono di estrarre i valori di ciascun campo indicato (Nome del prodotto, nome scientifico e descrizione).


I valori rilevati dal database vengono poi mostrati nelle tre caselle del form ricorrendo all'attributo value.

Cliccando, da browser web, sul pulsante Modifica prodotto, non succederà nulla e tornerà sempre ad essere visualizzata la pagina corrente.
Il passo successivo, quindi, consiste nello scrivere il codice che provvederà ad aggiornare il contenuto del database recependo le modifiche eventualmente introdotte dall'utente nei campi del form.


WebMatrix: preparazione di una pagina per la modifica del contenuto del database - IlSoftware.it