Introduzione alle pagine Web di ASP.NET - Visualizzazione dei dati

di Tom FitzMacken

Questa esercitazione illustra come creare un database in WebMatrix e come visualizzare i dati del database in una pagina quando si usa ASP.NET Pagine Web (Razor). Si presuppone che la serie sia stata completata tramite Introduzione alla programmazione di pagine Web ASP.NET.

Cosa si apprenderà:

• Come usare gli strumenti WebMatrix per creare un database e tabelle di database.
• Come usare gli strumenti WebMatrix per aggiungere dati a un database.
• Come visualizzare i dati dal database in una pagina.
• Come eseguire comandi SQL in ASP.NET pagine Web.
• Come personalizzare l'helper WebGrid per modificare la modalità di visualizzazione dei dati e aggiungere paginazione e ordinamento.

Funzionalità/tecnologie descritte:

• Strumenti di database WebMatrix.
• WebGrid aiutante.

Cosa costruirai

Nell'esercitazione precedente, è stato introdotto l'uso delle pagine Web ASP.NET (file con estensione .cshtml), alla sintassi di base di Razor e agli helper. In questa esercitazione si inizierà a creare l'applicazione Web effettiva che verrà usata per il resto della serie. L'app è una semplice applicazione di film che consente di visualizzare, aggiungere, modificare ed eliminare informazioni sui film.

Al termine di questa esercitazione, potrai visualizzare una presentazione di film simile alla seguente:

Ma per iniziare, è necessario creare un database.

Breve introduzione ai database

Questa esercitazione fornisce solo la più breve introduzione ai database. Se si ha esperienza nel database, è possibile ignorare questa breve sezione.

Un database contiene una o più tabelle che contengono informazioni, ad esempio tabelle per clienti, ordini e fornitori o per studenti, insegnanti, classi e voti. Strutturalmente, una tabella di database è simile a un foglio di calcolo. Immagina una tipica rubrica. Per ogni voce della rubrica ,ovvero per ogni persona, sono disponibili diverse informazioni, ad esempio nome, cognome, indirizzo, indirizzo di posta elettronica e numero di telefono.

Le righe vengono talvolta definite record e le colonne vengono talvolta definite campi.

Per la maggior parte delle tabelle di database, la tabella deve avere una colonna contenente un valore univoco, ad esempio un numero cliente, un numero di conto e così via. Questo valore è noto come chiave primaria della tabella e lo si usa per identificare ogni riga nella tabella. Nell'esempio, la colonna ID è la chiave primaria per la rubrica illustrata nell'esempio precedente.

Gran parte del lavoro svolto nelle applicazioni Web consiste nella lettura delle informazioni dal database e nella visualizzazione in una pagina. Spesso si raccolgono informazioni dagli utenti e lo si aggiunge a un database oppure si modificheranno i record già presenti nel database. Verranno illustrate tutte queste operazioni nel corso di questo set di esercitazioni.

Il lavoro del database può essere estremamente complesso e può richiedere conoscenze specializzate. Per questo set di esercitazioni, tuttavia, è necessario comprendere solo i concetti di base, che verranno tutti spiegati man mano che si procede.

Creazione di un database

WebMatrix include strumenti che semplificano la creazione di un database e la creazione di tabelle nel database. La struttura di un database viene definita schema del database. Per questo set di esercitazioni si creerà un database con una sola tabella, ovvero Movies.

Aprire WebMatrix se non è già stato fatto e aprire il sito WebPagesMovies creato nell'esercitazione precedente.

Nel riquadro sinistro fare clic sull'area di lavoro Database .

La barra multifunzione cambia per visualizzare le attività correlate al database. Nella barra multifunzione fare clic su Nuovo database.

WebMatrix crea un database CE di SQL Server (un file con estensione sdf ) con lo stesso nome del sito , WebPagesMovies.sdf. Questa operazione non verrà eseguita qui, ma è possibile rinominare il file in qualsiasi elemento desiderato, purché abbia un'estensione sdf .

Creazione di una tabella

Nella barra multifunzione fare clic su Nuova tabella. WebMatrix apre la finestra di progettazione tabelle in una nuova scheda. Se l'opzione Nuova tabella non è disponibile, assicurarsi che il nuovo database sia selezionato nella visualizzazione albero a sinistra.

Nella casella di testo in alto (dove la filigrana indica "Immettere il nome della tabella"), immettere "Movies".

Il riquadro sotto il nome della tabella è dove si definiscono le singole colonne. Per la tabella Movies in questa esercitazione, verranno create solo alcune colonne: ID, Title, Genre e Year.

Nella casella Nome immettere "ID". Se si immette un valore, vengono attivati tutti i controlli per la nuova colonna.

Accedere all'elenco Tipo di dati e scegliere int. Questo valore specifica che la colonna ID conterrà dati integer (numero).

Utilizzare il tasto Tab per superare la casella Valore predefinito, lascialo vuoto. Premere il tasto Tab fino alla casella di controllo Is Primary Key e selezionarla. Questa opzione indica al database che la colonna ID conterrà i dati che identificano singole righe. Ovvero, ogni riga avrà un valore univoco nella colonna ID che è possibile usare per trovare tale riga.

Scegliere l'opzione Is Identity. Questa opzione indica al database che deve generare automaticamente il numero sequenziale successivo per ogni nuova riga. L'opzione Is Identity funziona solo se è stata selezionata anche l'opzione Is Primary Key .)

Fare clic nella riga della griglia successiva oppure premere TAB due volte per completare la riga corrente. Entrambi i movimenti salvano la riga corrente e avviano quello successivo. Si noti che la colonna Valore predefinito ora indica Null. Null è il valore predefinito del valore predefinito, per così dire.

Al termine della definizione della nuova colonna ID, il progettista avrà l'aspetto mostrato in questa illustrazione:

Per creare la colonna successiva, fare clic nella casella nella colonna Nome . Immettere "Title" per la colonna e quindi selezionare nvarchar per il valore Tipo di dati . La parte "var" di nvarchar indica al database che i dati per questa colonna saranno una stringa la cui dimensione può variare da record a record. Il prefisso "n" rappresenta "national", che indica che il campo può contenere dati di tipo carattere per qualsiasi sistema di alfabeto o scrittura, ovvero il campo contiene dati Unicode.

Quando si sceglie nvarchar, viene visualizzata un'altra casella in cui è possibile immettere la lunghezza massima per il campo. Immettere 50, presupponendo che nessun titolo di film con cui si lavorerà in questa esercitazione sarà più lungo di 50 caratteri.

Ignorare il valore predefinito e deselezionare l'opzione Consenti valori Null . Non si vuole che il database consenta l'immissione di film nel database che non hanno un titolo.

Quando hai finito e passi alla riga successiva, la finestra di progettazione sarà simile a questa illustrazione:

Ripetere questi passaggi per creare una colonna denominata "Genre", ad eccezione della lunghezza, impostarla su solo 30.

Creare un'altra colonna denominata "Year". Per il tipo di dati, scegliere nchar (non nvarchar) e impostare la lunghezza su 4. Per l'anno si userà un numero a 4 cifre, ad esempio "1995" o "2010", quindi non è necessaria una colonna di dimensioni variabili.

Ecco l'aspetto della progettazione completata:

Premere CTRL+S o fare clic sul pulsante Salva sulla barra degli strumenti accesso rapido. Chiudere la finestra di progettazione del database chiudendo la scheda .

Aggiunta di alcuni dati di esempio

Più avanti in questa serie di esercitazioni si creerà una pagina in cui è possibile immettere nuovi film in un modulo. Per il momento, tuttavia, è possibile aggiungere alcuni dati di esempio che è possibile visualizzare in una pagina.

Nell'area di lavoro Database in WebMatrix si noti che è presente un albero che mostra il file con estensione sdf creato in precedenza. Aprire il nodo per il nuovo file con estensione sdf e quindi aprire il nodo Tabelle .

Fare clic con il pulsante destro del mouse sul nodo Film e scegliere Dati. WebMatrix apre una griglia in cui è possibile immettere i dati per la tabella Movies :

Fare clic sulla colonna Titolo e immettere "When Harry Met Sally". Passare alla colonna Genere (è possibile usare il tasto TAB) e immettere "Commedia romantica". Passare alla colonna Year e immettere "1989":

Premere INVIO e WebMatrix salva il nuovo film. Si noti che la colonna ID è stata compilata.

Immettere un altro film (ad esempio, "Gone with the Wind", "Drama", "1939"). La colonna ID viene compilata di nuovo:

Inserire un terzo film (ad esempio, "Ghostbusters", "Commedia"). Come esperimento, lasciare vuota la colonna Year e quindi premere INVIO. Poiché è stata deselezionata l'opzione Consenti valori Null , il database visualizza un errore:

Fare clic su OK per tornare indietro e correggere la voce (l'anno per "Ghostbusters" è 1984) e quindi premere INVIO.

Compila diversi film fino ad averne circa 8. L'immissione di 8 semplifica l'uso del paging in un secondo momento. Ma se questo è un numero eccessivo, immettere solo alcuni per il momento. I dati effettivi non sono importanti.

Se sono stati immessi tutti i film senza errori, i valori ID sono sequenziali. Se si tenta di salvare un record filmato incompleto, i numeri ID potrebbero non essere sequenziali. In tal caso, va bene. I numeri non hanno alcun significato intrinseco e l'unica cosa importante è che sono univoci nella tabella Movies .

Chiudere la scheda contenente la finestra di progettazione database.

È ora possibile passare alla visualizzazione di questi dati in una pagina Web.

Visualizzazione di dati in una pagina tramite l'helper WebGrid

Per visualizzare i dati in una pagina, si userà l'helper WebGrid . Questo helper genera una visualizzazione in una griglia o in una tabella (righe e colonne). Come si vedrà, sarà possibile perfezionare la griglia con la formattazione e altre funzionalità.

Per eseguire la griglia, è necessario scrivere alcune righe di codice. Queste poche righe fungeranno da modello per quasi tutto l'accesso ai dati usato in questa esercitazione.

Nel riquadro sinistro di WebMatrix fare clic sull'area di lavoro File .

Il nuovo database creato si trova nella cartella App_Data . Se la cartella non esiste già, WebMatrix lo ha creato per il nuovo database. La cartella potrebbe essere stata esistente se sono stati installati in precedenza helper.

Nella visualizzazione albero selezionare la radice del sito Web. È necessario selezionare la radice del sito Web; in caso contrario, il nuovo file potrebbe essere aggiunto alla cartella App_Data.

Nella barra multifunzione fare clic su Nuovo. Nella casella Scegli un tipo di file scegliere CSHTML.

Nella casella Nome assegnare alla nuova pagina il nome "Movies.cshtml":

Fare clic sul pulsante OK . WebMatrix apre un nuovo file con alcuni elementi scheletri in esso contenuti. Prima di tutto si scriverà codice per ottenere i dati dal database. Aggiungere quindi markup alla pagina per visualizzare effettivamente i dati.

Scrittura del codice della query di dati

Nella parte superiore della pagina, tra i @{ caratteri e } , immettere il codice seguente. Assicurarsi di immettere questo codice tra le parentesi graffe di apertura e chiusura.

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

La prima riga apre il database creato in precedenza, che è sempre il primo passaggio prima di eseguire un'operazione con il database. Specificare il Database.Open nome del metodo del database da aprire. Si noti che non si include .sdf nel nome. Il Open metodo presuppone che sia alla ricerca di un file con estensione sdf (ovvero WebPagesMovies.sdf) e che il file con estensione sdf si trova nella cartella App_Data . In precedenza si è notato che la cartella App_Data è riservata. Questo scenario è uno dei luoghi in cui ASP.NET presuppone tale nome.

Quando il database viene aperto, viene inserito un riferimento alla variabile denominata db. (Che potrebbe essere denominato qualsiasi elemento). La db variabile è la modalità di interazione con il database.

La seconda riga recupera effettivamente i dati del database usando il Query metodo . Si noti il funzionamento di questo codice: la db variabile ha un riferimento al database aperto e si richiama il Query metodo usando la db variabile (db.Query).

La query stessa è un'istruzione SQL Select . Per informazioni di base su SQL, vedere la spiegazione più avanti. Nell'istruzione Movies identifica la tabella su cui eseguire la query. Il * carattere specifica che la query deve restituire tutte le colonne della tabella. È anche possibile elencare le colonne singolarmente, separate da virgole.

I risultati della query, se presenti, vengono restituiti e resi disponibili nella selectedData variabile . Anche in questo caso, la variabile potrebbe essere denominata qualsiasi elemento.

Infine, la terza riga indica ASP.NET che si vuole usare un'istanza dell'helper WebGrid . Crea un'istanza dell'oggetto helper utilizzando la new e passandogli i risultati della query tramite la variabile selectedData. Il nuovo WebGrid oggetto, insieme ai risultati della query di database, viene reso disponibile nella grid variabile . Questo risultato sarà necessario in un momento per visualizzare effettivamente i dati nella pagina.

In questa fase, il database è stato aperto, sono stati ottenuti i dati desiderati ed è stato preparato l'helper WebGrid con tali dati. Successivamente, creare il markup nella pagina.

Aggiunta di markup per visualizzare i dati

All'interno dell'elemento <head> impostare il contenuto dell'elemento <title> su "Movies":

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

All'interno dell'elemento <body> della pagina aggiungere quanto segue:

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

Questo è tutto. La grid variabile è il valore creato durante la creazione dell'oggetto WebGrid nel codice precedente.

Nella visualizzazione albero WebMatrix fare clic con il pulsante destro del mouse sulla pagina e scegliere Avvia nel browser. Verrà visualizzata una pagina simile alla seguente:

Fare clic sul titolo della colonna per ordinare in base a quella colonna. La possibilità di ordinare facendo clic su un'intestazione è una funzionalità integrata nell'helper WebGrid .

Il GetHtml metodo, come suggerisce il nome, genera markup che visualizza i dati. Per impostazione predefinita, il GetHtml metodo genera un elemento HTML <table> . Se si vuole, è possibile verificare il rendering esaminando l'origine della pagina nel browser.

Modifica dell'aspetto della griglia

L'uso dell'helper WebGrid come hai appena fatto è facile, ma lo schermo risultante è semplice. L'helper WebGrid include tutti i tipi di opzioni che consentono di controllare la modalità di visualizzazione dei dati. In questa esercitazione sono presenti troppi elementi da esplorare, ma questa sezione offre un'idea di alcune di queste opzioni. Alcune opzioni aggiuntive verranno illustrate nelle esercitazioni successive di questa serie.

Specifica colonne individuali da visualizzare

Per iniziare, è possibile specificare che si desidera visualizzare solo determinate colonne. Per impostazione predefinita, come si è visto, la griglia mostra tutte e quattro le colonne della tabella Movies .

Nel file Movies.cshtml sostituire il @grid.GetHtml() markup appena aggiunto con quanto segue:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Per indicare all'helper quali colonne visualizzare, è necessario includere un columns parametro per il GetHtml metodo e passare una raccolta di colonne. Nella raccolta specificare ogni colonna da includere. Specificare una singola colonna da visualizzare includendo un grid.Column oggetto e passare il nome della colonna di dati desiderata. Queste colonne devono essere incluse nei risultati della query SQL. L'helper WebGrid non può visualizzare colonne non restituite dalla query.

Avviare di nuovo la pagina Movies.cshtml nel browser e questa volta si ottiene un display simile al seguente (si noti che non viene visualizzata alcuna colonna ID):

Modifica dell'aspetto della griglia

Sono disponibili altre opzioni per la visualizzazione delle colonne, alcune delle quali verranno esaminate nelle esercitazioni successive in questo set. Per il momento, questa sezione illustra i modi in cui è possibile applicare lo stile della griglia nel suo complesso.

All'interno della <head> sezione della pagina, subito prima del tag di chiusura </head> , aggiungere l'elemento seguente <style> :

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

Questo markup CSS definisce classi denominate grid, heade così via. È anche possibile inserire queste definizioni di stile in un file di .css separato e collegarlo alla pagina. Questa operazione verrà eseguita più avanti in questo set di esercitazioni. Tuttavia, per semplificare questa esercitazione, si trovano nella stessa pagina in cui vengono visualizzati i dati.

È ora possibile ottenere l'helper WebGrid per usare queste classi di stile. L'helper ha una serie di proprietà (ad esempio, tableStyle) per questo scopo, ovvero si assegnano nomi di classi di stile CSS a esse, e quei nomi di classe vengono inclusi nel markup reso dall'helper.

Modificare il grid.GetHtml markup in modo che sia ora simile al codice seguente:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Sono state aggiunte le novità che includono i parametri tableStyle, headerStyle e alternatingRowStyle al metodo GetHtml. Questi parametri sono stati impostati sui nomi degli stili CSS aggiunti un attimo fa.

Eseguire la pagina e questa volta viene visualizzata una griglia che sembra molto meno semplice di prima:

Per visualizzare il GetHtml metodo generato, è possibile esaminare l'origine della pagina nel browser. Non verranno descritti in dettaglio qui, ma il punto importante è che specificando parametri come tableStyle, la griglia ha generato tag HTML come il seguente:

<table class="grid">

Al <table> tag è stato aggiunto un class attributo che fa riferimento a una delle regole CSS aggiunte in precedenza. Questo codice illustra il modello di base, ovvero parametri diversi per il GetHtml metodo, che consentono di fare riferimento alle classi CSS generate dal metodo insieme al markup. Ciò che si fa con le classi CSS dipende dall'utente.

Aggiunta del paging

Come ultima attività per questa esercitazione, si aggiungerà il paging alla griglia. Al momento non c'è alcun problema per visualizzare tutti i tuoi film in una sola volta. Ma se hai aggiunto centinaia di film, la visualizzazione della pagina risulterebbe lunga.

Nel codice della pagina modificare la riga che crea l'oggetto WebGrid nel codice seguente:

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

L'unica differenza rispetto a prima è che è stato aggiunto un rowsPerPage parametro impostato su 3.

Eseguire la pagina. La griglia visualizza 3 righe alla volta, oltre ai collegamenti di spostamento che consentono di scorrere i film nel database:

Prossimo passaggio

Nell'esercitazione successiva si apprenderà come usare il codice Razor e C# per ottenere l'input dell'utente in un modulo. Si aggiungerà una casella di ricerca alla pagina Film in modo che sia possibile trovare film in base al titolo o al genere.

Elenco Completo dei Film

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

Risorse aggiuntive

• Introduzione alla programmazione Web ASP.NET tramite la sintassi Razor