Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Suis le coach...pour ajouter une option dans une liste déroulante liée à une source de données
Idee L’idée est d’ajouter une option supplémentaire, par exemple d'aide à la saisie comme "Sélectionnez une option dans la liste", en tête d'une liste déroulante (DropDownList) en plus du contenu issu d’une liaison de données (databinding) à l’intérieur d’un contrôle d’affichage de données ASP.NET 2.0 du type FormView, GridView ou DetailsView.

Sur le principe, rien de plus simple que d’ajouter une option à une liste déroulante, sauf que dans ce cas, la liste étant remplie automatiquement de part sa liaison avec une source de données, la nouvelle option que vous ajoutez est systématiquement écrasée par la liaison de données.

Prenons l'exemple d'une liste déroulante (cf. Figures 1 et 2) qui affiche des rubriques de bonnes affaires à partir d'une source de données contenant une table [Rubriques]. L'objectif est d'ajouter une option par défaut "Sélectionnez une rubrique" pour inviter l'utilisateur à faire un choix parmi les options proposées.

Copie d'écran DDL 02 Figure 1 - Vue de la liste déroulante par défaut

 Copie d'écran DDL 01 Figure 2 - Vue de la liste déroulante complète

Antenne Marche à suivre :
Pour construire la liste, il vous faut :

  • un contrôle de source de données de type SqlDataSource (ou ObjectDataSource) qui pointe vers la base de données des bonnes affaires. La chaîne de connexion (nommée csAffairesSansRisque dans l'exemple) est lue à partir du fichier de configuration web.config.
  • un contrôle d'affichage de type DropDownList lié au contrôle précédent via l'attribut DataSourceID.
    • L'attribut DataTextField donne le champ de la table dans la source de données qui est assigné au texte de chaque option.
    • L'attribut DataValueField donne le champ de la table dans la source de données qui est assigné à la valeur de chaque option.

<asp:SqlDataSource ID="SqlLstRubriques" runat="server" 
                   ConnectionString="<% ConnectionStrings:csAffairesSansRisque%>"
                   SelectCommand="SELECT * FROM [Rubriques]">
</asp:SqlDataSource>
Rubrique :
<asp:DropDownList ID="ddlRubriques" runat="server" AutoPostBack="True" 
                                 DataSourceID="SqlLstRubriques"
                                 DataTextField="Rub_Nom" DataValueField="Rub_Id">
</asp:DropDownList>

Pour ajouter l'option d'aide en tête de liste, vous pouvez soit le faire par programmation, soit en déclaratif tout simplement comme ceci :

<asp:SqlDataSource ...></asp:SqlDataSource>
Rubrique :
<asp:DropDownList ID="ddlRubriques" runat="server" AutoPostBack="True" 
                             DataSourceID="SqlLstRubriques"
                             DataTextField="Rub_Nom" DataValueField="Rub_Id">
              <asp:ListItem Value="">Sélectionnez une rubrique</asp:ListItem>
</asp:DropDownList>

Malheureusement, l'option est écrasée au moment de la liaison de données. Pour prévenir ASP.NET qu'il doit préserver les options que vous avez pu insérer par vous-même, il suffit d'ajouter l'attribut AppendDataBoundItems au contrôle DropDownList à la valeur true.

<asp:SqlDataSource ...></asp:SqlDataSource>
Rubrique :
<asp:DropDownList ID="ddlRubriques" runat="server" AutoPostBack="True" 
                             DataSourceID="SqlLstRubriques" AppendDataBoundItems="true"
                             DataTextField="Rub_Nom" DataValueField="Rub_Id">
              <asp:ListItem Value="">Sélectionnez une rubrique</asp:ListItem>
</asp:DropDownList>

 Creuser Allons un peu plus loin...
Supposons maintenant que cette liste déroulante est elle-même dans un formulaire (cf. Figure 3) de saisie d’une petite annonce, construit à l’aide du contrôle serveur FormView d’ASP.NET 2.0.

Copie d'&#233;cran DDL 03 
Figure 3 - Vue du contrôle FormView en mode d’insertion

Dans ce cas, il y a deux contextes de liaison de données :

  • un premier, sur le formulaire qui est lié à une source de données pointant sur une table [Annonces] contenant le texte de l'annonce, la rubrique etc...
  • un second, sur la liste déroulante qui est liée à la source de données pointant sur la table [Rubriques] vue précédemment. Mais attention ! La liste déroulante est aussi liée au premier contexte de liaison. En effet, la valeur sélectionnée donne l'Id de la rubrique à mémoriser avec l'annonce.

Dans la base de données, la table [Annonces] ne contient pas directement évidemment de champ <nom> pour la rubrique. Elle contient en réalité un ID (clé étrangère) rapatrié de la table [Rubriques]. Mais on ne peut pas raisonnablement demander à l'utilisateur de connaître l'id de la rubrique dans laquelle il souhaite publier son annonce. L'idéal est donc de remplacer l’ID par le nom de la rubrique associée, c'est-à-dire à remplacer la zone de texte (qui est la représentation par défaut du champ dans le formulaire en mode d'insertion) par une liste déroulante pour proposer une aide à la saisie à l’utilisateur.
Du coup, on retrouve la même définition de la liste déroulante que précédemment excepté que cette fois elle est encapsulée dans le modèle InsertItemTemplate du FormView. Et surtout, elle est liée à la source de données du FormView via l'attribut SelectedValue='<%# Bind("Rub_Id")%> qui charge le champ Rub_Id de l'enregistrement Annonce avec la valeur sélectionnée dans la liste.

<asp:SqlDataSource ID="SqlAnnonces" runat="server" 
         ConnectionString="<%$ ConnectionStrings:csAffairesSansRisque %>"
         InsertCommand="INSERT INTO [Annonces] ([Ann_Texte], [Rub_Id]) 
                                      VALUES (@Ann_Texte, @Rub_Id)"
        SelectCommand="SELECT * FROM [Annonces]" >
     <InsertParameters>
          <asp:Parameter Name="Ann_Texte" Type="String" />
          <asp:Parameter Name="Rub_Id" Type="Int32" />
     </InsertParameters>
</asp:SqlDataSource>
<asp:FormView ID="FormView1" runat="server" DataKeyNames="Ann_Id"
                          DataSourceID="SqlAnnonces" DefaultMode="Insert">
 <InsertItemTemplate>
   Texte de l'annonce:
   <asp:TextBox ID="txtTexteAnnonce" runat="server"
                          Text='<%# Bind("Ann_Texte") %>' 
                          TextMode="MultiLine" Height="50px"></asp:TextBox>
   <br /><br />
   <asp:SqlDataSource ID="SqlLstRubriques" runat="server"
               ConnectionString="<%$ ConnectionStrings:csAffairesSansRisque %>"
               SelectCommand="SELECT * FROM [Rubriques]"></asp:SqlDataSource>
   Rubrique :
   <asp:DropDownList ID="ddlRubriques" runat="server" AutoPostBack="True"   
                          DataSourceID="SqlLstRubriques" DataTextField="Rub_Nom"  
                          DataValueField="Rub_Id" SelectedValue='<%# Bind("Rub_Id") %>'
                          AppendDataBoundItems="true">
                  <asp:ListItem Value="">Sélectionnez une rubrique</asp:ListItem>
   </asp:DropDownList>
   <br /><br />
   <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True"
                               CommandName="Insert" Text="Insérer"></asp:LinkButton>
   <asp:LinkButton ID="InsertCancelButton" runat="server"
                               CausesValidation="False" CommandName="Cancel"
                               Text="Annuler"></asp:LinkButton>
   </InsertItemTemplate>
</asp:FormView>

Se pose alors un dernier souci, lié au fait qu'on a donc configuré une liaison de données sur la liste déroulante. Que se passe-t-il lorsque l'option sélectionnée est celle que l'on a rajouté en tête de liste ? Et oui, la valeur de cette option ne correspond à aucun Id de rubrique valide dans la base de données.
La solution est :

  1. de configurer la valeur de l'option rajoutée à une valeur vide :
    <asp:ListItem Value="">Sélectionnez une rubrique</asp:ListItem>
  2. d'ajouter un contrôle de validation ASP.NET 2.0 de type RequiredFieldValidator pour empêcher l'insertion si une valeur vide est sélectionnée dans la liste déroulante.

   <asp:DropDownList ID="ddlRubriques" runat="server" AutoPostBack="True"   
                          DataSourceID="SqlLstRubriques" DataTextField="Rub_Nom"  
                          DataValueField="Rub_Id" SelectedValue='<%# Bind("Rub_Id") %>'
                           AppendDataBoundItems="true">
                  <asp:ListItem Value="">Sélectionnez une rubrique</asp:ListItem>
   </asp:DropDownList>
   <asp:RequiredFieldValidator ID="valControleListeVide" runat="server"
                         ErrorMessage="Vous devez sélectionnez une rubrique" 
                         Text="*" ControlToValidate="ddlRubriques" Display="Dynamic">
   </asp:RequiredFieldValidator>

Notez que si vous utilisez l'attribut ErrorMessage pour afficher le message en cas d'erreur au lieu de l'attribut Text, il vous faut ajouter un contrôle de type ValidationSummary, par exemple en haut de la page, pour afficher les messages d'erreur de validation de données :
<asp:ValidationSummary ID="valResume" runat="server"
                                          ShowMessageBox="true" ShowSummary="false" />

Et le tour est joué !

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: vendredi 10 novembre 2006 16:00 par bianca
Classé sous : ,

Commentaires

themit a dit :

Tiens, Live Writer fonctionne ? :)

# novembre 10, 2006 16:15
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01