Condividi tramite

Procedura dettagliata: creazione di un'applicazione dati abilitata per AJAX

  • Articolo

Aggiornamento: novembre 2007

In questa procedura dettagliata viene descritto come creare un'applicazione Web con supporto AJAX che possa essere utilizzata come elenco attività. Consente di creare un'interfaccia utente di base per la creazione, la gestione e l'eliminazione di elenchi e per le voci di tali elenchi. Tutte le operazioni di inserimento, aggiornamento, eliminazione, ordinamento e spostamento vengono eseguite all'interno di un controllo UpdatePanel che utilizza AJAX.

È possibile utilizzare il controllo UpdatePanel per attivare i postback asincroni in una pagina. Per impostazione predefinita, quando in ASP.NET si verifica un postback, viene aggiornata l'intera pagina. Tuttavia, quando si utilizza il controllo UpdatePanel per creare postback asincroni, vengono modificati solo gli elementi della pagina che si trovano nel controllo UpdatePanel. In tal modo l'aspetto della pagina diventa più dinamico e le prestazioni risultano più veloci, oltre a offrire un'esperienza utente più dettagliata.

Di seguito vengono illustrate le attività incluse nella procedura dettagliata:

  • Creazione di un database SQL e aggiunta di dati.

  • Aggiunta di un controllo LinqDataSource a una pagina.

  • Aggiunta di un file Classi LINQ to SQL.

  • Utilizzo del controllo ListView per visualizzare, modificare ed eliminare i dati.

  • Utilizzo del controllo LinqDataSource per connettersi a un database utilizzando LINQ (Language-Integrated Query). Per ulteriori informazioni, vedere LINQ (Language-Integrated Query).

  • Utilizzo del controllo UpdatePanel per aggiungere funzionalità AJAX alla pagina.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei seguenti elementi:

  • Microsoft Visual Studio 2008 o Visual Web Developer 2008 Express Edition. Per informazioni sul download, vedere il sito Web Visual Studio Development Center (informazioni in lingua inglese).

  • SQL Server Express Edition installato nel computer. È anche possibile utilizzare SQL Server, se già installato, ma sarà necessario apportare piccole modifiche ad alcune procedure.

Creazione di un sito Web

In questa parte della procedura dettagliata, viene creato un sito Web al quale viene aggiunta una pagina. Nella sezione successiva si esegue la connessione a un database. Se si è già creato un sito Web, ad esempio seguendo la procedura indicata in Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzarlo per questa procedura dettagliata. In caso contrario, creare un nuovo sito Web nuovi attenendosi alla seguente procedura.

Per creare un nuovo sito Web di file system

  1. In Visual Web Developer, scegliere Nuovo sito Web dal menu File.

    Verrà visualizzata la finestra di dialogo Nuovo sito Web.

  2. In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.

  3. Nella casella Percorso fare clic su File system e digitare il nome della cartella in cui salvare le pagine del sito Web.

  4. Nell'elenco Linguaggio selezionare Visual Basic o Visual C#, quindi fare clic su OK.

    Nota:

    Il linguaggio di programmazione scelto sarà quello predefinito per il sito Web; tuttavia è possibile impostare il linguaggio di programmazione per ogni pagina singolarmente.

    In Visual Web Developer viene creata la cartella e una nuova pagina denominata Default.aspx.

Creazione di un nuovo database di SQL Server

Ora che si dispone di un sito Web, il passaggio successivo consiste nel creare un database e aggiungere un riferimento al database in Esplora server. In Visual Web Developer 2008 Express Edition, Esplora serverè detto Esplora database. Quando si aggiunge un database a Esplora server, è possibile utilizzare Visual Studio per aggiungere tabelle, stored procedure, visualizzazioni e così via. È inoltre possibile visualizzare i dati di tabella o creare le query manualmente oppure graficamente utilizzando la finestra Generatore di query.

Per aggiungere un database al progetto

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

    Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

  2. Selezionare Database SQL, denominare il database Tasks.mdf e scegliere OK.

  3. Quando in Visual Studio viene chiesto se il database deve essere archiviato nella cartella App_Data, scegliere Sì.

Creazione di uno schema e dei dati di esempio per il database

È possibile utilizzare la progettazione del database e le funzionalità di modifica per creare uno schema per la nuova tabella che contiene gli elementi attività.

Per creare uno schema e i dati di esempio per il database

  1. In Esplora soluzioni aprire la cartella App_Data e fare doppio clic su Tasks.mdf.

    La gerarchia della struttura ad albero del database Tasks viene visualizzata in Esplora server (o Esplora database).

  2. Fare clic con il pulsante destro del mouse sulla cartella Tabelle e scegliere Aggiungi nuova tabella.

  3. Nell'editor di tabelle di database, creare le colonne seguenti nella tabella:

    Nome colonna

    Tipo di dati

    Proprietà

    taskId

    int

    Ammetti Null: No

    taskName

    nvarchar(50)

    Ammetti Null: No

    dateCreated

    datetime

    Ammetti Null: No

    isComplete

    bit

    Ammetti Null: No

  4. Fare clic con il pulsante destro sulla riga che contiene taskId e scegliere Imposta chiave primaria.

  5. Con la riga taskid ancora selezionata, nella scheda Proprietà colonne aprire la sezione Specifica identità e impostare (Identità) su Sì.

  6. Salvare la tabella e denominarla TasksList.

  7. Fare clic con il pulsante destro del mouse in Esplora server e scegliere Mostra dati tabella.

    Viene visualizzata una finestra nella quale è possibile visualizzare e aggiungere i dati.

  8. Aggiungere quattro o cinque record alla tabella e quindi chiudere la finestra di progettazione del database.

    Non è necessario specificare un valore per taskid, perché è una colonna di identità il cui valore viene assegnato automaticamente. È necessario specificare False o True per il campo isComplete.

Creazione di controlli per l'accesso ai dati

In questa sezione si utilizzerà il controllo LinqDataSource e si creeranno classi che rappresentano entità di database. Il controllo e le classi create sono il livello di accesso ai dati che verrà utilizzato in questa procedura dettagliata.

Il controllo LinqDataSource espone LINQ (Language Integrated Query) agli sviluppatori Web tramite l'architettura dei controlli origine dati di ASP.NET. Il controllo LinqDataSource crea il codice per la selezione, l'inserimento, l'aggiornamento e l'eliminazione di oggetti nel database. LINQ applica ai dati relazionali i principi della programmazione orientata agli oggetti. Fornisce un modello di programmazione unificato per l'esecuzione di query e l'aggiornamento dei dati da tipi diversi di origini dati ed estende le funzionalità correlate ai dati direttamente nei linguaggi C# e Visual Basic. Per ulteriori informazioni su LINQ, vedere LINQ (Language-Integrated Query).

Mapping del database delle attività a un oggetto contesto dati SQL

Per iniziare la creazione del livello di accesso ai dati, aggiungere un dataset tipizzato al progetto.

Per creare una classe per la tabella TasksList

  1. Se nel sito Web non è già presente una cartella App_Code, in Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, scegliere Aggiungi cartella ASP.NET, quindi fare clic su App_Code.

  2. Fare clic con il pulsante destro del mouse sulla cartella App_Code, quindi scegliere Aggiungi nuovo elemento.

  3. In Modelli Visual Studio installati selezionare Classi LINQ to SQL, rinominare il file come Tasks.dbml, quindi fare clic su Aggiungi.

    Verrà visualizzata la finestra Object Relational Designer.

  4. In Esplora server trascinare la tabella TasksList nella finestra Object Relational Designer.

  5. Salvare il file Tasks.dbml.

    Quando si salva il file, Visual Studio crea due file nella cartella App_Code in Tasks.dbml. Il primo file è Tasks.dbml.layout. Il secondo file è Tasks.designer.cs o Tasks.designer.vb, a seconda del linguaggio selezionato quando si è creato il file Tasks.dbml.

  6. In Esplora soluzioni aprire il file Tasks.designer.cs o Tasks.designer.vb.

    Il codice contiene le classi denominate TasksDataContext e TasksList. La classe TasksDataContext rappresenta il database, mentre la classe TasksList rappresenta la tabella di database. Il costruttore senza parametri per la classe TasksDataContext legge la stringa di connessione dal file Web.config.

  7. Aprire il file Web.config.

    Nell'elemento connectionStrings è stata aggiunta una stringa di connessione al database Tasks.mdf.

  8. Chiudere il file della classe, la finestra Object Relational Designer e il file Web.config.

Creazione e configurazione di un controllo LinqDataSource

Dopo avere creato una tabella di database e le classi che rappresentano le entità del database, è possibile utilizzare un controllo LinqDataSource in una pagina Web ASP.NET per accedere al database.

Per creare e configurare un controllo LinqDataSource

  1. Aprire la pagina Default.aspx oppure passare a questa pagina.

  2. Passare alla visualizzazione Progettazione.

  3. Trascinare un controllo LinqDataSource nella pagina.

    È possibile lasciare la proprietà ID come LinqDataSource1.

  4. Scegliere Configura origine dati nel pannello smart tag Attività LinqDataSource.

    Nota:

    Se il pannello smart tag non viene visualizzato, fare clic con il pulsante destro del mouse sul controllo LinqDataSource e scegliere Mostra smart tag.

  5. Nell'elenco Scegli oggetto di contesto personale selezionare TasksDataContext, quindi scegliere Avanti.

  6. Nell'elenco Tabella selezionare TasksLists(Tabella<TasksList>), quindi fare clic su Fine.

  7. Dal menu Attività LinqDataSource scegliere Attiva Delete, Attiva Inserte Attiva Update.

    Per selezionare i dati non è stato necessario specificare comandi di database.

  8. Salvare la pagina.

Utilizzo dei controlli origine dati

In questa sezione si aggiungeranno alla pagina controlli che utilizzano il file Classi LINQ to SQL con cui la tabella di database è stata mappata alle classi. Si utilizzerà inoltre il controllo LinqDataSource per creare un'applicazione dati di base.

Si aggiungerà un controllo ListView per visualizzare i dati del database di SQL Server. Si aggiungerà quindi un controllo DropDownList per filtrare i dati che sono visualizzati nel controllo ListView. Più avanti nella procedura dettagliata si inseriranno i controlli in un controllo UpdatePanel per aggiungere la funzionalità di postback asincrono.

Visualizzazione dei dati con un controllo ListView

Il controllo ListView è utile per la visualizzazione dei dati in una struttura ripetuta, analogamente ai controlli DataList e Repeater. Tuttavia, a differenza di tali controlli, ListView supporta le operazioni di modifica, inserimento ed eliminazione, così come l'ordinamento e lo spostamento.

Si aggiungerà un controllo ListView che mostra tutte le attività. In un secondo momento si aggiungerà un elenco a discesa che consente di filtrare i dati. Il controllo ListView formatta la presentazione dei dati e visualizza i pulsanti che possono essere utilizzati per modificare e aggiornare il contenuto o per inserire contenuto nuovo.

Per aggiungere un controllo ListView alla pagina

  1. Aprire o passare alla pagina in cui è stato aggiunto il controllo LinqDataSource.

  2. Dalla scheda Dati della Barra degli strumenti, trascinare un controllo ListView nella pagina.

  3. Nell'elenco Scegli origine dati del menu Attività ListView scegliere LinqDataSource1.

    L'oggetto ListView viene associato al controllo LinqDataSource configurato precedentemente nella procedura dettagliata.

  4. Nel pannello smart tag Attività ListView fare clic su Configura ListView.

  5. Nella finestra di dialogo Configura ListView selezionare Attiva modifica, Attiva inserimento, Attiva eliminazione e Attiva paging.

  6. Scegliere OK.

  7. Salvare la pagina.

Aggiunta di un controllo DropDownList per il filtraggio dei dati

È possibile filtrare i dati visualizzati nel controllo ListView creando un elenco a discesa che consente di selezionare le attività da mostrare. Per questo esempio, si creerà un elenco che visualizza le attività attive o completate.

È possibile inserire il codice nel controllo ListView per generare automaticamente una clausola Where per visualizzare solo i record che corrispondono alla selezione nel controllo DropDownList.

Per aggiungere un controllo per filtrare i dati

  1. Aprire o passare alla pagina Default.aspx e passare alla visualizzazione Origine.

  2. Aggiungere il markup seguente nell'elemento form e sopra al controllo ListView:

    <span id="filter">
  Current List Filter: 
  <asp:DropDownList ID="DropDownList1" 
    AutoPostBack="true" 
    >
  <asp:ListItem Text="Active" Value="False" />
  <asp:ListItem Text="Completed" Value="True" />
  </asp:DropDownList>
</span>
<hr id="separator" />

  3. Nel controllo LinqDataSource, impostare la proprietà AutoGenerateWhereClause su true, come illustrato nell'esempio seguente:

    <asp:LinqDataSource ID="LinqDataSource1"  
  ContextTypeName="TasksDataContext" 
  TableName="TasksLists" 
  EnableDelete="True" 
  EnableInsert="True" 
  EnableUpdate="True" 
  AutoGenerateWhereClause="true" >

  4. Aggiungere il markup seguente per i parametri Where tra i tag di apertura e chiusura del controllo LinqDataSource.

    <WhereParameters>
  <asp:ControlParameter 
    Name="isComplete" 
    ControlID="DropDownList1" 
    Type="Boolean" />
</WhereParameters>

  5. Salvare la pagina.

È ora possibile testare la pagina per assicurarsi che vengano visualizzati i dati che si selezionano.

Per testare la pagina

  1. Premere CTRL+F5 per visualizzare la pagina nel browser.

  2. Dalla casella di riepilogo a discesa selezionare Completato.

    Se vi sono attività contrassegnate come complete, vengono visualizzate solo tali attività.

Aggiunta di funzionalità AJAX alla pagina

In questa sezione si attiveranno le funzionalità AJAX di ASP.NET mediante l'aggiunta di un controllo ScriptManager alla pagina. Si aggiungerà quindi alla pagina un controllo UpdatePanel, che consente di eseguire attività nel controllo ListView senza un postback dell'intera pagina.

Aggiunta di un controllo ScriptManager

Per utilizzare le funzionalità ASP.NET AJAX, come il controllo UpdatePanel, è necessario aggiungere un controllo ScriptManager alla pagina.

Per aggiungere un controllo ScriptManager alla pagina

  1. Aprire o passare alla pagina Default.aspx e passare alla visualizzazione Origine.

  2. Nella scheda Estensioni AJAX della casella degli strumenti fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina all'interno dell'elemento form.

Inserimento del controllo ListView in un controllo UpdatePanel

Per questo esempio, si inserirà il controllo ListView all'interno di un controllo UpdatePanel. Le modifiche al controllo ListView non richiederanno un postback completo.

Per inserire il controllo ListView in un controllo UpdatePanel

  1. Nella pagina Default.aspx aggiungere direttamente il markup seguente dopo il tag <form> di apertura:

    <asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>

  2. Aggiungere il seguente codice immediatamente prima del tag </form> di chiusura:

    </ContentTemplate>
</asp:UpdatePanel>

    Questo codice inserisce un controllo UpdatePanel che ingloba i controlli ListView e DropDownList.

  3. Salvare la pagina.

A questo punto è possibile testare nuovamente la pagina.

Per testare la pagina

  • Premere CTRL+F5 per visualizzare la pagina in un browser.

    Quando si seleziona Attivo o Completato dal filtro dell'elenco, non si verifica un postback completo e ListView visualizza l'elenco aggiornato dei dati senza sfarfallio.

Passaggi successivi

In questa procedura dettagliata è stato illustrato come aggiungere un oggetto ListView a una pagina con un controllo LinqDataSource per aggiungere, modificare ed eliminare attività da un database. Si è aggiunta quindi la funzionalità AJAX utilizzando il controllo UpdatePanel.

Per ulteriori informazioni sull'utilizzo dei database nelle procedure dettagliate, vedere Procedura dettagliata: associazione ai dati a un oggetto business personalizzato e Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio.

Vedere anche

Concetti

Cenni preliminari sul controllo server Web LinqDataSource

Cenni preliminari su ASP.NET AJAX

Cenni preliminari sul rendering a pagina parziale