Formulaire de recherche Ajax Update Panel

Version imprimable

Bonjour,

Je suis débutant en développement asp.Net et je rencontre un problème surement simple mais je n'y arrive pas :?

J'ai une page Search.aspx, dans laquelle jai une text box dans laquelle je saisie un mot à rechercher en BDD et une drop down list afin de choisir si ma recherche se base sur un nom ou sur un prénom et un bouton afin de lancer la recherche.

Jusque la pas de problème la recherche s'effectue bien.

Le soucis que je rencontre, c'est que j'aimerai que le résultat de ma recherche saffiche dans une grid en dessous, afin d'avoir la ou les personnes correspondants à la donnée saisie pour ma recherche.

Par ex si je rentre DURAND et que je sélectionne Nom dans la liste déroulante sa peut me retourner: DURAND Adrien, DURAND Claude, DURAND Amélie ... ou un seul élément si dans la base il n'y a qu'un seul DURAND.

Je sais qu'il faut que j'utilise de l'Ajax couplé a un update panel et afin d'utiliser l'update panel je doit utiliser un script manager mais je ne vois pas du tout comment l'implémenter.

De plus j'utilise déja un script manager dans ma master page, donc quand je veut mettre le script manager dans ma page Search.aspx, une erreure me dit que il y a déja un script manager (dans ma masterpage).

Voici mon code source :

Search.aspx

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<asp:Label ID="Lbl_Recherche" runat="server" Text="Rechercher : "></asp:Label> 
<asp:TextBox ID="txt_bx_Recherche" runat="server"></asp:TextBox>
 
    <asp:DropDownList ID="ddl_Recherche" runat="server">
        <asp:ListItem Selected="True" Value="nom"> nom </asp:ListItem>
        <asp:ListItem Value="prenom"> prenom </asp:ListItem>
    </asp:DropDownList>
 
    </br>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </br>
    <asp:Button ID="btn_Recherche" runat="server" Text="Rechercher" 
        onclick="btn_Recherche_Click" />
 
    <asp:UpdatePanel ID="UpdatePanel_Grid_Recherche" runat="server">
 
    </asp:UpdatePanel>

Search.aspx.cs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 protected void btn_Recherche_Click(object sender, EventArgs e)
    {
        SqlConnection mySqlConnection = new SqlConnection();
        //mySqlConnection.ConnectionString = "Data Source=.\\SQLEXPRESS;" + "Initial Catalog=Projet_Agenda;" + "Integrated Security=True";
        mySqlConnection.ConnectionString = "Data Source=.\\;" + "Initial Catalog=Projet_Agenda;" + "Integrated Security=True";
        mySqlConnection.Open();
       // SqlCommand sql_recherche = new SqlCommand("SELECT idPersonne, nom, prenom FROM Personne WHERE nom = '" + txt_bx_Recherche + "'", mySqlConnection);
        SqlCommand sql_recherche = new SqlCommand("SELECT idPersonne, nom, prenom FROM Personne WHERE (" + ddl_Recherche.SelectedItem.Value + " LIKE '%" + txt_bx_Recherche.Text + "%')", mySqlConnection);
 
        SqlDataReader dr_recherche;
        dr_recherche = sql_recherche.ExecuteReader();
 
        if (dr_recherche.Read())
        {
            Label1.Text = dr_recherche["idPersonne"].ToString();
        }
        else
        {
            Label1.Text = "Pas de résultat";
        }
    }

MasterPage.master qui contient deja un script manager pour mon menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="menu">
                 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
                 </asp:ToolkitScriptManager>
 
                    <asp:Accordion ID="Accordion1" 
                        CssClass="accordion"  
                        HeaderCssClass="accordionHeader"  
                        HeaderSelectedCssClass="accordionHeaderSelected"  
                        ContentCssClass="accordionContent"   
                        runat="server">  
                        <Panes>  
                            <asp:AccordionPane ID="AccordionPane1" runat="server">  
                                <Header>Planning personnel</Header>  
                                <Content>          
                                    <ul>
                                        <li><a href="~/Index.aspx" runat="server">Affichage planning</a></li>
                                        <li><a href="~/Index.aspx" runat="server">Filtres</a></li>
                                    </ul>    
                                </Content>  
                            </asp:AccordionPane>  
                    </asp:Accordion>                    
            </div>

Si quelqu'un pouvait m'éclairer un petit peu se serait nice :ccool:

Le scriptManager déjà présent dans ta MasterPage est suffisant. Pas besoin de l'ajouter sur chaque page (tant que cette page hérite de ta Master).

Ensuite, si tu veux un postback partiel de ta page, il faut que tes contrôles sont intégrés au milieu de ton UpdatePanel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <asp:UpdatePanel ID="UpdatePanel_Grid_Recherche" runat="server"> <ContentTemplate> <asp:Label ID="Lbl_Recherche" runat="server" Text="Rechercher : "></asp:Label> <asp:TextBox ID="txt_bx_Recherche" runat="server"> </asp:TextBox> <asp:DropDownList ID="ddl_Recherche" runat="server"> <asp:ListItem Selected="True" Value="nom"> nom </asp:ListItem> <asp:ListItem Value="prenom"> prenom </asp:ListItem> </asp:DropDownList> </br> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </br> <asp:Button ID="btn_Recherche" runat="server" Text="Rechercher" onclick="btn_Recherche_Click" /> <%-- Ici, ta grid avec Visible = False; --> </ContentTemplate> </asp:UpdatePanel>
De la sorte, à chaque postback provoqué par un élément contenu dans l'updatePanel, seul ton updatePanel sera mis à jour.

Au clic sur ton bouton, tu vas chercher tes données, tu les stockes dans un objet (datatable par exemple) et tu bindes ta grid à cet objet puis tu la rends visible.

28/05/2010, 14h13
Invité

Merci pour ta réponse rapide et ton complément d'information, je test sa et je post en conséquence :)

Re,

je suis un peu dans le flou :(

j'ai crée un datagrid dans mon Search.aspx

Code:

1
2
3
4
 
 
<asp:DataGrid ID="Grid_Recherche" runat="server" Visible="false">
            </asp:DataGrid>

dans le code behind j'ai crée une datatable :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
DataTable dt_recherche = new DataTable("Recherche");
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
           dt_recherche.Columns.Add(new DataColumn("Nom", typeof(string)));
           dt_recherche.Columns.Add(new DataColumn("Prénom", typeof(string)));
 
        }
    }

et ensuite dans la fonction button_click

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
        SqlConnection mySqlConnection = new SqlConnection();
        mySqlConnection.ConnectionString = "Data Source=.\\;" + "Initial Catalog=Projet_Agenda;" + "Integrated Security=True";
        mySqlConnection.Open();
        SqlCommand sql_recherche = new SqlCommand("SELECT idPersonne, nom, prenom FROM Personne WHERE (" + ddl_Recherche.SelectedItem.Value + " LIKE '%" + txt_bx_Recherche.Text + "%')", mySqlConnection);
 
        SqlDataReader dr_recherche;
        dr_recherche = sql_recherche.ExecuteReader();
 
        while (dr_recherche.Read())
        {
 
            Grid_Recherche.DataSource = dr_recherche;
 
        }
        GridView_Recherche.Visible = true;

Je n'ai ni message d'erreur, mais rien ne s'affiche à l'ecran.

29/05/2010, 11h16
Nicolas Esprit
Bonjour,

Déjà ça :
Code:

1 2 while (dr_recherche.Read()) { Grid_Recherche.DataSource = dr_recherche;}
A bannir ! Tu associes la DataSource une seule fois, pas pour chaque ligne.

Ensuite, il te faut appeller la méthode DataBind() de ta GridView après lui avoir assigné la DataSource. Tu as un exemple ici.

En espérant t'avoir aidé.

Merci, grâce à vous je suis arrivé à un résultat assez convenable :ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
 
public partial class Edtion_Search : System.Web.UI.Page
{
    DataTable dataTable_Search = new DataTable();
    DataRow dataRow;
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
        }
    }
 
    protected void btn_Search_Click(object sender, EventArgs e)
    {
        SqlConnection mySqlConnection = new SqlConnection();
        //mySqlConnection.ConnectionString = "Data Source=.\\SQLEXPRESS;" + "Initial Catalog=Projet_Agenda;" + "Integrated Security=True";
        mySqlConnection.ConnectionString = "Data Source=.\\;" + "Initial Catalog=Projet_Agenda;" + "Integrated Security=True";
        mySqlConnection.Open();
        SqlCommand sql_Search = new SqlCommand("SELECT idPersonne, nom, prenom FROM Personne WHERE (" + ddl_Search.SelectedItem.Value + " LIKE '%" + txt_bx_Search.Text + "%')", mySqlConnection);
 
        SqlDataReader dr_Search = sql_Search.ExecuteReader();
 
        dtg_Search.DataSource = CreateDataSource(dr_Search);
        dtg_Search.DataBind();
 
    }
    ICollection CreateDataSource(SqlDataReader dr_Search)
    {
        dataTable_Search.Columns.Add(new DataColumn("Nom", typeof(string)));
        dataTable_Search.Columns.Add(new DataColumn("Prénom", typeof(string)));
 
        int number_rows = 0;
        while(dr_Search.Read())
        {
            dataRow = dataTable_Search.NewRow();
 
            dataRow[0] = dr_Search["nom"];
            dataRow[1] = dr_Search["prenom"];
 
            dataTable_Search.Rows.Add(dataRow);
            number_rows++;
        }
 
        Label1.Visible = true;
 
        if (number_rows > 0)
        {
            Label1.Text = "Votre recherche a retournée " + number_rows.ToString() + " résultats";
            dtg_Search.Visible = true;
        }
        else
        {
            Label1.Text = "Votre recherche n'a retournée aucun résultats";
            dtg_Search.Visible = false;
        }
 
        DataView dataView = new DataView(dataTable_Search);
        return dataView;
    }
}

Je pense que mon code n'est pas très propre, car dans ma fonction de création de datasource je fais appel à des actions sur un Label qui n'a pas vraiment de rapport avec la fonction proprement dite :?

De plus je n'utilise pas l'évènement IsPostBack, je ne vois pas comment dans mon cas je pourrais l'utiliser afin d'optimiser ma page.

J'aurai besoin de vos lumières sur ce sujet :oops:

Merci