Introduzione Pagine Web 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 Pagine Web ASP.NET (Razor). Si presuppone che la serie sia stata completata tramite Introduction to Pagine Web ASP.NET Programming ( Introduzione alla programmazione di Pagine Web ASP.NET).

Contenuto dell'esercitazione:

• 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 i comandi SQL in Pagine Web ASP.NET.
• Come personalizzare l'helper WebGrid per modificare la visualizzazione dei dati e aggiungere il paging e l'ordinamento.

Funzionalità/tecnologie descritte:

• Strumenti di database WebMatrix.
• WebGrid aiutante.

Scopo dell'esercitazione

Nell'esercitazione precedente sono stati introdotti Pagine Web ASP.NET (file con estensione cshtml), alle nozioni di base della sintassi 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 cinematografica che consente di visualizzare, aggiungere, modificare ed eliminare informazioni sui film.

Al termine di questa esercitazione, sarà possibile visualizzare un elenco di film simile a questa pagina:

Tuttavia, per iniziare, è necessario creare un database.

Breve introduzione ai database

Questa esercitazione fornirà 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. Si immagini una rubrica tipica. Per ogni voce della rubrica (vale a dire per ogni persona) si dispone di 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 account e così via. Questo valore è noto come chiave primaria della tabella e lo si usa per identificare ogni riga della 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 nel leggere le informazioni dal database e visualizzarlo 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. Nel corso di questa esercitazione verranno illustrate tutte queste operazioni.

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 mentre 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 SQL Server (un file con estensione sdf) con lo stesso nome del sito , WebPagesMovies.sdf. Questa operazione non verrà eseguita, 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 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 nella parte superiore (dove la filigrana indica "Immettere il nome della tabella"), immettere "Movies".

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

Nella casella Nome immettere "ID". L'immissione di un valore attiva qui 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).

Nota

Non lo chiameremo più qui (molto), ma puoi usare i movimenti della tastiera di Windows standard per spostarsi in questa griglia. Ad esempio, è possibile eseguire una scheda tra i campi, è sufficiente iniziare a digitare per selezionare un elemento in un elenco e così via.

Selezionare tabulazioni oltre la casella Valore predefinito , ovvero lasciare vuoto. Selezionare la scheda nella casella di controllo Is Primary Key (Chiave primaria ). 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 (Identità ). 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 (Chiave primaria ).

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 per il valore predefinito, quindi.

Al termine della definizione della nuova colonna ID , la finestra di progettazione avrà un aspetto simile alla seguente:

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 alfabeto o sistema di 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à composto da più 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 senza titolo.

Al termine e si passa alla riga successiva, la finestra di progettazione sarà simile alla seguente:

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 database chiudendo la scheda .

Aggiunta di alcuni dati di esempio

Più avanti in questa serie di esercitazioni verrà creata 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 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 filmato. 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:

Immettere un terzo film ,ad esempio "Ghostbusters", "Comedy"). Come esperimento, lasciare vuota la colonna Year e quindi premere INVIO. Poiché l'opzione Allow Nulls è stata annullata, il database mostra un errore:

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

Compilare diversi film fino a quando non hai 8 o così via. L'immissione di 8 semplifica l'uso del paging in un secondo momento. Ma se è troppo molti, 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 di film 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 dei dati in una pagina tramite l'helper WebGrid

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

Per eseguire la griglia, è necessario scrivere alcune righe di codice. Queste poche righe fungeranno da modello per quasi tutti gli accessi ai dati che si esegue in questa esercitazione.

Nota

In realtà sono disponibili molte opzioni per visualizzare i dati in una pagina; l'helper WebGrid è solo uno. È stato scelto per questa esercitazione perché è il modo più semplice per visualizzare i dati e perché è ragionevolmente flessibile. Nel set di esercitazioni successivo si vedrà come usare un modo più "manuale" per usare i dati nella pagina, che offre un controllo più diretto su come visualizzare i dati.

Nel riquadro sinistro in 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 l'ha creata per il nuovo database. La cartella potrebbe essere stata esistente se sono stati installati in precedenza helpers.

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 denominare la nuova pagina "Movies.cshtml":

Fare clic sul pulsante OK . WebMatrix apre un nuovo file con alcuni elementi di scheletro. Prima di tutto si scriverà un codice per ottenere i dati dal database. Si aggiungerà quindi il markup alla pagina per visualizzare effettivamente i dati.

Scrittura del codice di query 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. Si indica il Database.Open nome del metodo del database da aprire. Si noti che non si include .sdf nel nome. Il Open metodo presuppone che stia cercando un file con estensione sdf ,ovvero WebPagesMovies.sdf, e che il file sdf sia nella cartella App_Data . In precedenza si è notato che la cartella App_Data è riservata; questo scenario è una delle posizioni in cui ASP.NET fa ipotesi su tale nome.

Quando il database viene aperto, viene inserito un riferimento nella 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 come funziona 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 un po' di background su SQL, vedere la spiegazione successiva. Nell'istruzione Movies identifica la tabella da eseguire in 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 cosa.

Infine, la terza riga indica ASP.NET che si vuole usare un'istanza del WebGrid helper. È possibile creare (creare un'istanza) dell'oggetto helper usando la new parola chiave e passarlo ai risultati della query tramite la selectedData variabile. Il nuovo WebGrid oggetto, insieme ai risultati della query di database, viene reso disponibile nella grid variabile. Sarà necessario che in un momento visualizzino 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 è necessario creare il markup nella pagina.

Suggerimento

Structured Query Language (SQL)

SQL è un linguaggio usato nella maggior parte dei database relazionali per la gestione dei dati in un database. Include comandi che consentono di recuperare dati e aggiornarli e che consentono di creare, modificare e gestire i dati nelle tabelle di database. SQL è diverso da un linguaggio di programmazione (ad esempio C#). Con SQL si indica al database cosa si vuole e si tratta del processo del database per capire come ottenere i dati o eseguire l'attività. Ecco alcuni esempi di comandi SQL e di ciò che fanno:

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

La prima Select istruzione ottiene tutte le colonne (specificate da *) dalla tabella Movies .

La seconda Select istruzione recupera le colonne ID, Name e Price nella tabella Product il cui valore della colonna Price è maggiore di 10. Il comando restituisce i risultati in ordine alfabetico in base ai valori della colonna Name. Se non corrispondono ai criteri di prezzo, il comando restituisce un set vuoto.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

Questo comando inserisce un nuovo record nella tabella Product , impostando la colonna Name su "Croissant", la colonna Description su "A flaky delight" e il prezzo su 1,99.

Si noti che quando si specifica un valore non numerico, il valore è racchiuso tra virgolette singole (non virgolette doppie, come in C#). Si usano queste virgolette intorno a valori di testo o di data, ma non intorno ai numeri.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

Questo comando elimina i record nella tabella Product la cui colonna di data di scadenza è precedente al 1° gennaio 2008. Il comando presuppone che la tabella Product abbia una colonna di questo tipo, naturalmente. La data viene immessa qui in formato MM/DD/AAAA, ma deve essere immessa nel formato usato per le impostazioni locali.

I Insert comandi e Delete non restituiscono set di risultati. Restituiscono invece un numero che indica il numero di record interessati dal comando.

Per alcune di queste operazioni , ad esempio l'inserimento e l'eliminazione di record, il processo che richiede l'operazione deve disporre delle autorizzazioni appropriate nel database. Ecco perché per i database di produzione spesso è necessario specificare un nome utente e una password quando ci si connette al database.

Ci sono decine di comandi SQL, ma tutti seguono un modello come i comandi visualizzati qui. È possibile usare i comandi SQL per creare tabelle di database, contare il numero di record in una tabella, calcolare i prezzi ed eseguire molte altre operazioni.

Aggiunta di markup per visualizzare i dati

All'interno dell'elemento impostare il contenuto dell'elemento <head><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>

È tutto. La grid variabile è il valore creato quando è stato creato l'oggetto WebGrid nel codice precedente.

Nella visualizzazione albero WebMatrix fare clic con il pulsante destro del mouse sulla pagina e selezionare Avvia nel browser. Verrà visualizzato un aspetto simile alla pagina seguente:

Fare clic su un collegamento di intestazione di colonna per ordinare in base a tale colonna. La possibilità di ordinare facendo clic su un'intestazione è una funzionalità incorporata nell'helper WebGrid .

Il GetHtml metodo, come suggerisce il nome, genera il 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 del WebGrid helper come hai appena fatto è facile, ma il display risultante è normale. Il WebGrid helper include tutti i tipi di opzioni che consentono di controllare la modalità di visualizzazione dei dati. Questa sezione offre un'idea di alcune di queste opzioni. Alcune opzioni aggiuntive verranno illustrate nelle esercitazioni successive di questa serie.

Specifica di singole colonne 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 al helper da visualizzare le colonne, è 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 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 una visualizzazione simile a quella seguente (si noti che non viene visualizzata alcuna colonna ID):

Modifica dell'aspetto della griglia

Esistono alcune altre opzioni per la visualizzazione delle colonne, alcune delle quali verranno esaminate in esercitazioni successive in questo set. A questo punto, questa sezione illustra i modi in cui è possibile definire la griglia nel suo complesso.

All'interno della <head> sezione della pagina, appena 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 le classi denominate grid, heade così via. È anche possibile inserire queste definizioni di stile in un file css separato e collegarlo alla pagina. In effetti, questa operazione verrà eseguita più avanti in questo set di esercitazioni. Ma per semplificare questa esercitazione, si trovano nella stessa pagina che visualizza i dati.

È ora possibile ottenere l'helper WebGrid per usare queste classi di stile. L'helper ha una serie di proprietà( ad esempio , ) per questo scopo: tableStylesi assegna un nome di classe di stile CSS a loro e tale nome di classe viene eseguito come parte del markup sottoposto a rendering dal helper.

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

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

Novità di seguito è che sono stati aggiunti tableStyleparametri , headerStylee alternatingRowStyle al GetHtml metodo . Questi parametri sono stati impostati sui nomi degli stili CSS aggiunti un momento 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 verrà illustrato in dettaglio qui, ma il punto importante è che specificando parametri come tableStyle, la griglia ha causato la generazione di tag HTML come il seguente:

<table class="grid">

Il <table> tag ha avuto un class attributo aggiunto a esso che fa riferimento a una delle regole CSS aggiunte in precedenza. Questo codice illustra il modello di base : parametri diversi per il GetHtml metodo consentono di fare riferimento alle classi CSS che il metodo genera quindi insieme al markup. Ciò che si fa con le classi CSS è l'utente.

Aggiunta di paging

Come ultima attività per questa esercitazione, si aggiungerà il paging alla griglia. Al momento non è un problema visualizzare tutti i tuoi film in una sola volta. Ma se hai aggiunto centinaia di film, la visualizzazione della pagina sarebbe 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 da 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 visualizzare i film nel database:

Prossima ora

Nell'esercitazione successiva si apprenderà come usare il codice Razor e C# per ottenere l'input 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.

Pagina Completa elenco per i 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 utilizzando la sintassi Razor

IndietroAvanti