Visitatori: 1325

Nelle precedenti Lezioni abbiamo visto come visualizzare i dati di una Tabella di un Database Sql Server in una GridView. In particolare abbiamo creato un database sqlServer con all'interno una tabella News.

In questa Lezione aggiungeremo una nuova Tabella al nostro database che conterrà le Categorie di New disponibili e che chiameremo appunto Categories. Lo scopo che vogliamo raggiungere è quello di collocare sopra la GridView che visualizza le News una DropDownList che consente di visualizzare le Categorie. Selezionando la Categoria verranno visualizzate nelle GridView solo le News corrispondenti.

Comiciamo col creare la nostra Tabella:

La Tabella Categories dovrà avere i seguienti campi:

- ID_CATEGORIA (INTEGER PRIMARY KEY IDENTITY)

- DESCRIZIONE VARCHAR(150)

Ricordatevi di impostare la proprietà "Specifica Identità" della chiave primaria ID_CATEGORIA, come abbiamo fatto per la tabella News nelle precedenti lezioni. Per fare ciò andiamo nelle proprietà della colonna e nella sezione "Identità" scegliamo SI, lasciando inalterato l'incremento proposto automaticamente di 1 unità:

Adesso clicchiamo col tasto destro del mouse sulla Tabella creata e selezioniamo "Apri Tabella". Inseriremo qualche categoria:

 

Nella Tabella News aggiungiamo una colonna ID_CATEGORIA di tipo int.

A questo punto siamo pronti per aggiungere la Drop Down List alla nostra pagina News.aspx. Trascinate dalla Casella degli strumenti una DropDownList al di sopra della GridView delle News. Aggiungete inoltre una label alla sua sinistra e settate la proprietà Text di quest'ultima a "Seleziona la Categoria: ".

Cercate di ottenere questa situazione:

A questo punto dobbiamo configurare la DataSource della DropDownList. Attraverso il menu contestuale selezionate "Scegli origine Dati" e dalla schermata successiva seleziona "Database".

Vi verrà chiesto di selezionare una ConnectionString (se già presente nel sitosarà selezionabile) o crearne una nuova. Selezionate "TestDbConnectionString" che abbiamo creato nelle lezioni precedenti.

Nella schermata successiva selezionate la Tabella Categories:

Cliccate su avanti, quindi su "Fine". A questo punto VWD vi chiederà di selezionare quale campo visualizzare nella DropDownList e quale campo utilizzare come valore da attribuire alla selezione effettuata:

A questo punto dobbiamo modificare il DataSource della GridView per aggiungere un parametro nella query di selezione. Attualmente vengono selezionate tutte le News. Aggiungeremo un parametro @id_categoria e diremo alla GridView che quel parametro deve essere ricavato dal valore selezionato nella dropdownList. vediamo come fare:

Dal menu contestuale della gridView selezionate "Configura origine Dati". Andate avanti nella prima schermata lasciando invariata la ConnectionString. Nella schermata successiva, dove si imposta la query di selezione, cliccate sul bottone "WHERE.."

Questo ci consente di specificare una condizione di selezione:

Una volta configuara la WHERE come mostrato in figura sopra cliccate sul bottone Aggiungi per creare la condizione:

Cliccate su ok per confermare. Verrà riproposta la pagina di impostazione della Select quindi cliccate su avanti e su Fine per completare la procedura. VWD, avvertendo che la query su cui si basa la GridView è stata modificata vi chiede se volete rigenerare i campo cliccate su "no" in quanto abbiamo solo aggiunto il campo ID_CATEGORIA e non vogliamo visulizzarlo nella GridView. Mandiamo in esecuzione il progetto e avremo questo risultato:

Tuttavia vi accorgerete che selezionando un'altra categoria la Griglia delle News non si aggiorna automaticamente. Manca ancora un ultimo passaggio, ovvero dobbiamo impostare la proprietà "autoPostback" della DropDownList a true:

A questo punto il gioco è fatto.

Nel prossimo articolo vedremo come aggiungere un campo calcolato alla GridView per visualizzare la Descrizione della Categoria (e non l'ID_CATEGORIA).

Lezione precedente | Indice degli articoli | Lezione Successiva