Procédure pas à pas : création d'une application de données compatible AJAX

  • Article

Mise à jour : novembre 2007

Cette procédure pas à pas explique comment créer une application Web AJAX qui peut fonctionner comme une liste de tâches. Elle permet de créer une interface utilisateur de base pour la création, la gestion et la suppression de listes et des éléments de ces listes. Toutes les opérations d'insertion, de mise à jour, de suppression, de tri et de pagination sont effectuées au sein d'un contrôle UpdatePanel qui utilise AJAX.

Vous pouvez utiliser le contrôle UpdatePanel pour autoriser les publications asynchrones dans une page. Par défaut, ASP.NET actualise l'intégralité de la page à chaque publication (postback). Cependant, lorsque vous utilisez le contrôle UpdatePanel pour créer des publications (postback) asynchrones, seuls les éléments de page de ce contrôle UpdatePanel sont modifiés. Cela rend la page plus dynamique et permet une exécution plus rapide, ainsi qu'une expérience utilisateur plus riche.

Cette procédure pas à pas décrit les tâches suivantes :

  • Création d'une base de données SQL et ajout de données.

  • Ajout d'un contrôle LinqDataSource à une page.

  • Ajout d'un fichier Classes LINQ to SQL.

  • Utilisation du contrôle ListView pour l'affichage, la modification et la suppression de données.

  • Utilisation du contrôle LinqDataSource pour la connexion à une base de données à l'aide de LINQ (Language-Integrated Query). Pour plus d'informations, consultez LINQ (Language-Integrated Query).

  • Utilisation du contrôle UpdatePanel pour l'ajout des fonctionnalités AJAX à la page.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des éléments suivants :

  • Microsoft Visual Studio 2008 ou Visual Web Developer 2008 Express. Pour obtenir les informations de téléchargement, consultez le site Web du centre de développement Visual Studio

  • SQL Server Express Edition installé sur votre ordinateur. Si SQL Server est installé, vous pouvez l'utiliser, mais vous devrez apporter de légères modifications à certaines des procédures.

Création d'un site Web

Dans cette partie de la procédure pas à pas, vous allez créer un site Web et lui ajouter une nouvelle page. Dans la section suivante, vous vous connecterez à une base de données. Si vous avez déjà créé un site Web (par exemple, en suivant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site Web et passer à l'étape suivante de cette procédure pas à pas. Sinon, créez un site Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

  1. Dans Visual Web Developer, sélectionnez Nouveau Site Web dans le menu Fichier.

    La boîte de dialogue Nouveau site Web s'affiche.

  2. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  3. Dans la zone Emplacement, cliquez sur Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages du site Web.

  4. Dans la liste Langage, sélectionnez Visual Basic ou Visual C#, puis cliquez sur OK.

    Remarque :

    Le langage de programmation sélectionné constitue la valeur par défaut pour le site Web, mais vous pouvez définir le langage de programmation de manière individuelle pour chaque page.

    Visual Web Developer crée le dossier et une nouvelle page nommée Default.aspx.

Création d'une base de données SQL Server

Maintenant que vous disposez d'un site Web, vous pouvez créer une base de données et ajouter une référence à cette dernière dans l'Explorateur de serveurs (dans Visual Web Developer 2008 Express, l'Explorateur de bases de données correspond à l'Explorateur de serveur). L'ajout d'une base de données à l'Explorateur de serveurs permet d'utiliser Visual Studio pour ajouter des tables, des procédures stockées, des vues, etc. Vous pouvez également consulter des données de table ou créer vos propres requêtes manuellement ou graphiquement à l'aide de la fenêtre Générateur de requêtes.

Pour ajouter une base de données au projet

  1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, puis cliquez sur Ajouter un nouvel élément.

    La boîte de dialogue Ajouter un nouvel élément s'affiche.

  2. Sélectionnez Base de données SQL, nommez la base de données Tasks.mdf, puis cliquez sur OK.

  3. Lorsque Visual Studio demande si la base de données doit être stockée dans le dossier App_Data, cliquez sur Oui.

Création d'un schéma et d'exemples de données pour la base de données

Vous pouvez utiliser les fonctions de conception et d'édition de la base de données pour créer un schéma pour la nouvelle table qui contient les tâches.

Pour créer un schéma et des exemples de données pour la base de données

  1. Dans l'Explorateur de solutions, ouvrez le dossier App_Data et double-cliquez sur Tasks.mdf.

    L'arborescence de la base de données Tasks s'affiche dans l'Explorateur de serveurs (ou Explorateur de bases de données).

  2. Cliquez avec le bouton droit sur le dossier Tables, puis cliquez sur Ajouter une nouvelle table.

  3. Dans l'éditeur de table de la base de données, créez les colonnes suivantes dans la table:

    Nom de la colonne

    Type de données

    Propriétés

    taskId

    int

    Null autorisé : Non

    taskName

    nvarchar(50)

    Null autorisé : Non

    dateCreated

    datetime

    Null autorisé : Non

    isComplete

    bit

    Null autorisé : Non

  4. Cliquez avec le bouton droit sur la ligne qui contient taskid, puis cliquez sur Définir la clé primaire.

  5. Avec la ligne taskid toujours sélectionnée, dans l'onglet Propriétés des colonnes, ouvrez la section Spécification du compteur, puis affectez la valeur Oui à (Est d'identité).

  6. Enregistrez la table et nommez-la TasksList.

  7. Dans l'Explorateur de serveurs, cliquez avec le bouton droit sur la table, puis cliquez sur Afficher les données de la table.

    Une fenêtre s'affiche pour vous permettre de consulter et d'ajouter des données.

  8. Ajoutez quatre ou cinq enregistrements à la table, puis fermez le concepteur de bases de données.

    Vous n'avez pas besoin de spécifier de valeur pour taskid car il s'agit d'une colonne d'identité dont la valeur est affectée automatiquement. Vous devez spécifier False ou True pour le champ isComplete.

Création des contrôles d'accès aux données

Dans cette section, vous utiliserez le contrôle LinqDataSource et créerez les classes qui représentent des entités de base de données. Le contrôle et les classes créés constituent la couche d'accès aux données utilisée dans cette procédure pas à pas.

Le contrôle LinqDataSource présente LINQ (Language-Integrated Query) aux développeurs Web via l'architecture de contrôle de source de données ASP.NET. Le contrôle LinqDataSource crée le code de sélection, d'insertion, de mise à jour et de suppression des objets de la base de données. LINQ applique les principes de programmation orientée objet aux données relationnelles. Il fournit un modèle de programmation unifié pour l'interrogation et la mise à jour de données de différents types de source de données et étend directement les fonctions de données des langages C# et Visual Basic. Pour plus d'informations sur LINQ, consultez LINQ (Language-Integrated Query).

Mappage de la base de données Tasks à un objet de contexte de données SQL

Pour commencer la création de la couche d'accès aux données, ajoutez un groupe de données typé au projet.

Pour créer une classe pour la table TasksList

  1. Si le site Web ne possède pas déjà un dossier App_Code, dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site Web, sélectionnez Ajouter le dossier ASP.NET, puis cliquez sur App_Code.

  2. Cliquez avec le bouton droit sur le dossier App_Code, puis cliquez sur Ajouter un nouvel élément.

  3. Sous Modèles Visual Studio installés, sélectionnez Classes LINQ to SQL, renommez le fichier Tasks.dbml, puis cliquez sur Ajouter.

    Le Concepteur Objet/Relationnel s'affiche.

  4. Dans l'Explorateur de serveurs, faites glisser la table TasksList dans la fenêtre Concepteur Objet/Relationnel.

  5. Enregistrez le fichier Tasks.dbml.

    Lors de l'enregistrement du fichier, Visual Studio crée deux fichiers dans le dossier App_Code sous Tasks.dbml. Le nom du premier fichier est Tasks.dbml.layout. Le nom du deuxième fichier est Tasks.designer.cs ou Tasks.designer.vb, selon le langage sélectionné lors de la création du fichier Tasks.dbml.

  6. Dans l'Explorateur de solutions, ouvrez le fichier Tasks.designer.cs ou Tasks.designer.vb.

    Notez que le code contient les classes TasksDataContext et TasksList. La classe TasksDataContext représente la base de données et la classe TasksList la table de la base de données. Le constructeur sans paramètre de la classe TasksDataContext lit la chaîne de connexion du fichier Web.config.

  7. Ouvrez le fichier Web.config.

    Notez qu'une chaîne de connexion de la base de données Tasks.mdf a été ajoutée à l'élément connectionStrings.

  8. Fermez le fichier de classe, la fenêtre Concepteur Objet/Relationnel, ainsi que le fichier Web.config.

Création et configuration d'un contrôle LinqDataSource

Vous disposez désormais d'une table de base de données et de classes qui représentent les entités de base de données, vous pouvez donc utiliser un contrôle LinqDataSource dans une page Web ASP.NET pour accéder à la base de données.

Pour créer et configurer un contrôle LinqDataSource

  1. Ouvrez ou basculez vers la page Default.aspx.

  2. Basculez en mode Design.

  3. Faites glisser un contrôle LinqDataSource sur la page.

    Vous pouvez conserver la valeur LinqDataSource1 pour la propriété ID.

  4. Dans le panneau des balises actives Tâches LinqDataSource, sélectionnez Configurer la source de données.

    Remarque :

    Si le panneau des balises actives n'est pas ouvert, cliquez avec le bouton droit sur le contrôle LinqDataSource, puis sélectionnez Afficher la balise active.

  5. Dans la liste Choisissez votre objet de contexte, sélectionnez TasksDataContext, puis cliquez sur Suivant.

  6. Dans la liste Table, sélectionnez TasksLists(Table<TasksList>), puis cliquez sur Terminer.

  7. Dans le menu Tâches LinqDataSource, sélectionnez Activer la suppression, Activer l'insertion et Activer la mise à jour.

    Notez que vous n'avez pas eu à spécifier de commandes de base de données pour sélectionner les données.

  8. Enregistrez la page.

Utilisation des contrôles de source de données

Dans cette section, vous ajouterez à la page les contrôles qui utilisent le fichier Classes LINQ to SQL utilisé pour mapper la table de base de données aux classes. Vous utiliserez également le contrôle LinqDataSource pour créer une application de données de base.

Vous ajouterez un contrôle ListView pour afficher les données d'une base de données SQL Server. Vous ajouterez ensuite un contrôle DropDownList pour filtrer les données du contrôle ListView. Plus loin dans cette procédure pas à pas, vous placerez les contrôles dans un contrôle UpdatePanel pour ajouter des fonctionnalités de publication (postback) asynchrone.

Affichage de données à l'aide d'un contrôle ListView

Le contrôle ListView s'avère utile pour l'affichage de données dans les structures à répétition, tout comme les contrôles DataList et Repeater. Cependant, contrairement à ces contrôles, le contrôle ListView prend en charge les opération d'édition, d'insertion et de suppression, ainsi que le tri et la pagination.

Vous ajouterez un contrôle ListView qui présente toutes les tâches. Vous ajouterez également une liste déroulante pour filtrer les données. Le contrôle ListView met en forme la présentation des données et affiche les boutons à utiliser pour modifier et mettre à jour le contenu ou insérer un nouveau contenu.

Pour ajouter un contrôle ListView à la page

  1. Accédez à la page à laquelle vous avez ajouté le contrôle LinqDataSource.

  2. À partir de l'onglet Données de la Barre d'outils, faites glisser un contrôle ListView dans la page

  3. Dans la liste Choisir la source de données du menu Tâches ListView, sélectionnez LinqDataSource1.

    Cela entraîne la liaison de ListView au contrôle LinqDataSource configuré précédemment au cours de cette procédure pas à pas.

  4. Dans le panneau des balises actives Tâches ListView, sélectionnez Configurer ListView.

  5. Dans la boîte de dialogue Configurer ListView, sélectionnez Activer la modification, Activer l'insertion, Activer la suppression et Activer la pagination.

  6. Cliquez sur OK.

  7. Enregistrez la page.

Ajout d'un contrôle DropDownList pour filtrer les données

Vous pouvez filtrer les données affichées dans le contrôle ListView en créant une liste déroulante pour sélectionner les tâches à afficher. Pour cet exemple, vous allez créer une liste qui affiche les tâches actives ou les tâches terminées.

Vous pouvez insérer du code dans le contrôle ListView afin de générer automatiquement une clause Where pour afficher uniquement les enregistrements correspondant à la sélection indiquée dans le contrôle DropDownList.

Pour ajouter un contrôle permettant de filtrer les données

  1. Basculez vers la page Default.aspx ou ouvrez-la, puis basculez en mode Source.

  2. Dans l'élément form et au-dessus du contrôle ListView, ajoutez le balisage suivant :

    <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. Dans le contrôle LinqDataSource, affectez la valeur true à la propriété AutoGenerateWhereClause, comme dans l'exemple suivant :

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

  4. Ajoutez le balisage suivant pour les paramètres Where entre les balises d'ouverture et de fermeture du contrôle LinqDataSource.

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

  5. Enregistrez la page.

Vous pouvez désormais tester la page pour vérifier que les données sélectionnées s'affichent.

Pour tester la page

  1. Appuyez sur CTRL+F5 pour afficher la page dans le navigateur.

  2. Sélectionnez Terminé dans la liste déroulante.

    Si vous avez des tâches marquées comme terminées, seules ces tâches s'affichent.

Ajout des fonctionnalités AJAX à la page

Dans cette section, vous allez ajouter un contrôle ScriptManager à la page pour activer les fonctionnalités AJAX d'ASP.NET. Vous ajouterez également un contrôle UpdatePanel à cette page afin de pouvoir exécuter des tâches dans le contrôle ListView, sans publication (postback) de page entière.

Ajout d'un contrôle ScriptManager

Pour utiliser les fonctionnalités ASP.NET AJAX, telles que le contrôle UpdatePanel, vous devez ajouter un contrôle ScriptManager à la page.

Pour ajouter un contrôle ScriptManager à la page

  1. Basculez vers la page Default.aspx ou ouvrez-la, puis basculez en mode Source.

  2. Dans l'onglet Extensions AJAX de la Boîte à outils, double-cliquez sur le contrôle ScriptManager pour l'ajouter à la page dans l'élément form.

Insertion du contrôle ListView dans un contrôle UpdatePanel

Pour cet exemple, vous insérerez ListView dans un contrôle UpdatePanel. Les modifications apportées au contrôle ListView ne nécessitent pas de publication (postback) complète.

Pour insérer le contrôle ListView dans un contrôle UpdatePanel

  1. Ajoutez le balisage suivant dans la page Default.aspx, directement après la balise <form> d'ouverture :

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

  2. Ajoutez le code suivant juste avant la balise </form> de fermeture :

    </ContentTemplate>
</asp:UpdatePanel>

    Ce code insère un contrôle UpdatePanel autour du contrôle ListView et du contrôle DropDownList.

  3. Enregistrez la page.

Vous pouvez tester la page de nouveau.

Pour tester la page

  • Appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

    Notez que lorsque vous sélectionnez Actif ou Terminé dans le filtre de la liste, aucune publication (postback) complète ne s'effectue et ListView affiche la liste de données à jour sans scintillement.

Étapes suivantes

Cette procédure pas à pas vous a indiqué comment ajouter ListView à une page à l'aide d'un contrôle LinqDataSource permettant d'ajouter, de modifier et de supprimer des tâches d'une base de données. Vous avez ensuite ajouté les fonctionnalités AJAX à l'aide du contrôle UpdatePanel.

Vous trouverez davantage d'informations sur l'utilisation des bases de données dans d'autres procédures pas à pas, par exemple Procédure pas à pas : liaison de données à un objet métier personnalisé et Procédure pas à pas : création de pages Web maître/détail dans Visual Studio.

Voir aussi

Concepts

Vue d'ensemble du contrôle serveur Web LinqDataSource

Vue d'ensemble d'ASP.NET AJAX

Vue d'ensemble du rendu de page partielle