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:

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="//www.ilsoftware.it/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="//www.ilsoftware.it/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.<!– –>

Il codice per il controllo delle informazioni inserite e l’aggiornamento del database

<!– –>Prendendo ispirazione dal codice della pagina dbaggiungi.cshtml, modifichiamo la pagina dbmodifica.cshtml aggiungendo un controllo sul contenuto dei campi (per evitare l’inserimento di campi vuoti) e la query SQL UPDATE per l’aggiornamento del record selezionato. Si evidenzi, quindi, il codice del file dbmodifica.cshtml e lo si sostituisca con il seguente:

@{
    var id=Request["id"];
    var db = Database.Open("Catalogo");
    var NomeProdotto="";
    var NomeScientifico="";
    var Descrizione="";
    
    if(IsPost){        
        NomeProdotto=Request["formNome"];
        if (NomeProdotto.IsEmpty()) {
           ModelState.AddError("formNome", "E' necessario inserire il nome del prodotto.");
        }
        NomeScientifico=Request["formNomescientifico"];
        if (NomeScientifico.IsEmpty()) {
           ModelState.AddError("formNomescientifico", "E' necessario inserire il nome scientifico del prodotto.");
        }        
        Descrizione=Request["formDescrizione"];
        if (Descrizione.IsEmpty()) {
           ModelState.AddError("formDescrizione", "Il campo descrizione non può essere lasciato vuoto.");
        } 
        
        if(ModelState.IsValid) {
            var sqlupdate = "UPDATE Piante SET Nome=@0, Nome_scientifico=@1, Descrizione=@2 WHERE id=@3";
            db.Execute(sqlupdate, NomeProdotto, NomeScientifico, Descrizione,id);
            Response.Redirect(@Href("~/catalogo.cshtml"));
        }    
     } else {
        var sqlquery = "SELECT * FROM Piante WHERE id=@0";
        var record = db.QuerySingle(sqlquery,id);
        NomeProdotto=record.Nome;
        NomeScientifico=record.Nome_scientifico;
        Descrizione=record.Descrizione;
    }
    
}

<h1>Modifica prodotto</h1>

@Html.ValidationSummary("Non è stato possibile procedere con la modifica dei dati a causa dei seguenti errori:")

<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>

Per completare la pagina di modifica dei prodotti, è bene aggiungere un’ulteriore verifica in modo tale da accertarsi che il parametro id sia sempre un numero maggiore di zero. Il codice seguente, che dovrà essere inserito in capo al file, consente di effettuare tale controllo:

    var id=0;
    if (Request["id"].IsInt()) {
        id = Request["id"].AsInt();
    } else {
        Response.Redirect(@Href("~/catalogo.cshtml"));    
    }
    if (id < 1) {
        Response.Redirect(@Href("~/catalogo.cshtml"));    
    }

Più avanti, dopo la riga var record = db.QuerySingle(sqlquery,id);, abbiamo aggiunto quanto segue:

        if (record == null) {
            Response.Redirect(@Href("~/catalogo.cshtml"));
        }

In questo modo, si verificherà che la query SELECT restuisca un record valido. Se un utente si divertisse, infatti, a sostituire il parametro id mostrato nella barra degli indirizzi del browser indicando un numero identificativo di prodotto inesistente, senza l’istruzione appena aggiunta, il server web andrebbe in errore.

Ecco come si presenta il file font face=”courier new,courier”>dbmodifica.cshtml

@{
    var id=0;
    if (Request["id"].IsInt()) {
        id = Request["id"].AsInt();
    } else {
        Response.Redirect(@Href("~/catalogo.cshtml"));    
    }
    if (id < 1) {
        Response.Redirect(@Href("~/catalogo.cshtml"));    
    }
    
    var db = Database.Open("Catalogo");
    var NomeProdotto="";
    var NomeScientifico="";
    var Descrizione="";
    
    if(IsPost){        
        NomeProdotto=Request["formNome"];
        if (NomeProdotto.IsEmpty()) {
           ModelState.AddError("formNome", "E' necessario inserire il nome del prodotto.");
        }
        NomeScientifico=Request["formNomescientifico"];
        if (NomeScientifico.IsEmpty()) {
           ModelState.AddError("formNomescientifico", "E' necessario inserire il nome scientifico del prodotto.");
        }        
        Descrizione=Request["formDescrizione"];
        if (Descrizione.IsEmpty()) {
           ModelState.AddError("formDescrizione", "Il campo descrizione non può essere lasciato vuoto.");
        } 
        
        if(ModelState.IsValid) {
            var sqlupdate = "UPDATE Piante SET Nome=@0, Nome_scientifico=@1, Descrizione=@2 WHERE id=@3";
            db.Execute(sqlupdate, NomeProdotto, NomeScientifico, Descrizione,id);
            Response.Redirect(@Href("~/catalogo.cshtml"));
        }    
     } else {
        var sqlquery = "SELECT * FROM Piante WHERE id=@0";
        var record = db.QuerySingle(sqlquery,id);
        if (record == null) {
            Response.Redirect(@Href("~/catalogo.cshtml"));
        }
        NomeProdotto=record.Nome;
        NomeScientifico=record.Nome_scientifico;
        Descrizione=record.Descrizione;
    }
    
}

<h1>Modifica prodotto</h1>

@Html.ValidationSummary("Non è stato possibile procedere con la modifica dei dati a causa dei seguenti errori:")

<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>