Microsoft Expression Web - Origine dati SQL

Expression Web dispone di molti strumenti per lavorare con pagine HTML statiche, ma include anche strumenti per la creazione di pagine più dinamiche. Le pagine dinamiche spesso recuperano dati o contenuti da una fonte di dati. In questo capitolo impareremo come creare un'origine dati SQL da utilizzare nelle pagine dinamiche.

Esempio

Diamo un'occhiata a un semplice esempio in cui creiamo un elenco a discesa e riempiamo l'elenco recuperando i dati dal database utilizzando SQL DataSource.

Step 1 - Inizia creando un nuovo sito web vuoto.

Chiamiamolo SQLDataSource. Fare clic su OK.

Step 2- Vedrai che expression web ha creato una cartella per noi. Tuttavia, poiché abbiamo scelto di creare un progetto vuoto, non abbiamo ancora alcun file.

Expression Web non deve essere utilizzato solo per creare siti HTML statici; possiamo creare siti dinamici utilizzando pagine e controlli con molta facilità.

Step 3- Expression web ci consente anche di creare molti contenuti dinamici senza dover necessariamente essere uno sviluppatore. Quindi aggiungiamo un file ASPX dal fileFile → New Pageopzione di menu. Seleziona ASPX nel modello centrale e fai clic su OK.

Step 4 - Qui creeremo un controllo nel nostro modulo che deve accedere ai dati da un database per creare un sito web dinamico.

In questo caso particolare, creeremo un'origine dati SQL che recupererà i dati dal database.

Step 5 - Vai alla casella degli strumenti e trascina il file DropDownList e rilasciarlo all'interno del file <form>tag nella vista codice oppure puoi anche rilasciarlo nella sezione del modulo in vista struttura. Vedrai che il codice viene aggiunto da Expression Web.

Qui, vogliamo collegare alcuni dati dal nostro database e memorizzarli nel nostro elenco a discesa. Quindi, la prima cosa di cui abbiamo bisogno è il database.

Step 6 - Crea una nuova cartella nella cartella del progetto andando nel file New → Folder opzione di menu.

Step 7 - Chiama questa cartella App_Data.

Step 8 - Dobbiamo importare un database nel nostro progetto utilizzando il file File → Import → File… opzione di menu.

Step 9 - Si aprirà il file Importfinestra di dialogo, come mostrato di seguito. Fare clic sul pulsante Aggiungi file… che aprirà la finestra di dialogo Apri file.

Step 10 - Naviga nel database (*.mdf file) che si desidera includere nel sito Web e fare clic su Apri.

Step 11- Apri MyTestDatabase.mdf. Verrà visualizzata la seguente finestra di dialogo. Fare clic su OK.

Step 12- Ora puoi vedere che il file del database viene aggiunto nella cartella App_Data. Quando si dispone di un controllo come un elenco a discesa ed Expression Web consente di associare i dati ad esso, verrà visualizzata una piccola freccia nell'angolo in alto a destra nella visualizzazione struttura.

Step 13- Questo è il menu contestuale corrente che può permetterci di svolgere un'attività molto specifica per quel particolare controllo e uno di questi è scegliere un'origine dati. Quindi facciamo clic suChoose Data Source… e questo aprirà la procedura guidata di configurazione dell'origine dati.

Step 14- Al momento non abbiamo un'origine dati. Selezioniamo l'opzione Nuova origine dati dal menu.

Qui importeremo un database SQL. Selezioniamo il database e facciamo clic su OK.

Step 15- Ora, dobbiamo specificare la stringa di connessione. Facciamo clic sul pulsante Nuova connessione.

Step 16 - Selezionare il file di database di Microsoft SQL Server e fare clic su OK.

Step 17 - Fare clic sul pulsante Sfoglia per individuare il file di database.

Step 18 - Selezionare il file di database e fare clic sul pulsante Apri o fare doppio clic sul file di database.

Step 19 - Per testare la connessione, fare clic sul pulsante Test connessione.

Verrà visualizzata la seguente schermata. Fare clic sul pulsante OK.

Step 20- Ora configureremo l'origine dati. Fare clic su Avanti nella schermata successiva.

Seleziona la casella di controllo e fai di nuovo clic su Avanti.

Step 21- Qui vedrai tutte le tabelle del tuo database. Selezioniamo il fileStudent tavolo.

Step 22- E vedrai tutte le colonne nella casella di riepilogo. SelezionareID e LastName. In fondo, puoi vedere che sta effettivamente creando una query. Puoi anche usare il fileWhere o ORDER BY clauses. Una volta terminata la query, fare clic su Avanti.

Step 23 - Fare clic su Test Querypulsante. Visualizzerà il filequery result come mostrato di seguito.

Step 24- Nella seguente finestra di dialogo, l'origine dati è selezionata per impostazione predefinita. "Selezionare un campo dati da visualizzare in DropDownList" è il campo che verrà effettivamente visualizzato. Selezioniamo LastName e selezioniamo l'ID da "Seleziona un campo dati per il valore di DropDownList" e fai clic su Ok.

Come puoi vedere nello screenshot seguente, DataSource viene aggiunto nella visualizzazione struttura.

Di seguito è riportato il codice completo nel file ASPX, creato da Expression Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language = "C#" %> 
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">  
   <head runat = "server"> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body>  
      <form id = "form1" runat = "server"> 
         <asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"  
            DataTextField = "LastName" DataValueField = "ID"> 
         </asp:DropDownList> 

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"   
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"  
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]"> 
         </asp:SqlDataSource> 
      </form>  
   </body>  
</html>

Step 25 - Salviamo la pagina web premendo Ctrl + S.

Chiama questa pagina SQLDatasource.aspx e fai clic su Salva.

Step 26- Vediamo in anteprima questa pagina in un browser. Verrà visualizzato un elenco a discesa che contiene il cognome degli studenti del fileStudent tavolo.