utilisation des Scriptmanager et Updatepanel

**rita87** · 02/06/2010, 17h03

Salut tout le monde
J'ai besoin de votre aide SVP

C'est la premier fois que je travail avec les extensions Ajax en Asp.net (VB) et je veux intégrer le scriptmanager et l'updatepanel dans mon formulaire d'inscription d'utilisateur ,afin de faciliter le rafraîchissement partiel des 2 contrôles (un dropdownlist et un textbox ).
Je veux charger le dropdownlist avec les noms ville du [table ville]de ma base donnée qui est liée à une [table délégation]. C'est à dire chaque ville est liée a une délégation qui le concerne, chaque délégation peut concerner une ou plusieurs villes.
Brièvement le résultat que je veux atteindre est lors du sélectionnement d'une ville du dropdownlist le nom de la delegation concernée s'affiche automatiquement dans le textbox .

SVP quelqu'un peut m'aider à réaliser cette tache ou me donner les démarches que je dois suivre

Merci.

**Nicolas Esprit** · 02/06/2010, 18h28

Bonjour,

Tu as tous les tutos que tu veux sur MSDN.

**rita87** · 02/06/2010, 21h35

merci beaucoup Nicolas

de votre aide je vais essayer avec ce lien merci de votre réponse

**rita87** · 03/06/2010, 12h22

j'ai cherché sur MSDN et j'ai trouvé des trucs plus compliquée par rapport a ce que j cherche

ET j'ai essayé ce code là Mais ca ne marche pas

DEFAULT.ASPX :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ Page Language="VB" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Label ID="Label2" runat="server" Text="Ville :"></asp:Label>&nbsp; 
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList></div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Délégation  :" Width="45px"></asp:Label><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aplineConnectionString %>"
            SelectCommand="SELECT ville.n_ville, ville.n_deleguation FROM ville INNER JOIN deleguation ON ville.n_deleguation = deleguation.n_deleguation"></asp:SqlDataSource>
    </form>
</body>
</html>

Aidez moi SVP et Merci d'avance..

**Nicolas Esprit** · 03/06/2010, 12h29

Bonjour,

Tu y es presque. Déjà la DataSource, il faut la relier à la DropDownList pour que cette dernière soit alimentée par le nom des villes.

Ensuite, il faut capturer l'event SelectedIndexChanged de ta DropDownList. Dans la fonction C# correspondant à l'event tu mets à jour la textbox1. (ne pas oublier la property AutoPostBack à true sur le DropDownList).

Enfin, pour le partial rendering, tu devrais mettre ton UpdatePanel en UpdateMode Conditionnal et ajouter un trigger qui pointe sur l'event SelectedIndexChanged de ta DropDownList.

A défaut si tu veux pas t'embêter (mais il faut bien apprendre un peu), tu entoures tous des contrôles avec ton UpdatePanel et tu oublie le paragraphe précédent.

En espérant t'avoir aidé.

**calagan99** · 03/06/2010, 12h41

Si ta dropdownlist est correctement remplie.
Abonnes-toi à son événement "OnSelectedIndexChanged".
Dans cet évènement, utilises la selectedValue de ta Dropdownlist pour aller chercher la délégation qui convient dans ta bdd.
Ta requête te renverra une délégation, délegation qui tu affiches dans ton textbox.

**rita87** · 03/06/2010, 15h44

Merci Nicolas et merci Calagan de votre réponse
j'ai essayé ce que vous avez dit mais j'ai rien écrit dans (default.aspx.vb) car je sais pas comment j vais renvoyer le nom délégation au textbox puisque je suis connecté a la base de donnée via le contrôle (sqldatasource) car normalement j'utilise le Dataset et je fais la programmation en (VB)

voila le code avec les modification :

Default.aspx :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Page sans titre</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        &nbsp;
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="n_ville" DataValueField="n_ville" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
        </asp:DropDownList></div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><asp:TextBox ID="TextBox1" runat="server" Height="15px"></asp:TextBox><br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
                &nbsp;
            </ContentTemplate>
               <Triggers >
            <asp:AsyncPostBackTrigger ControlID="dropdownlist1" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aplineConnectionString %>"
            SelectCommand="SELECT ville.n_ville, ville.n_deleguation FROM ville INNER JOIN deleguation ON ville.n_deleguation = deleguation.n_deleguation">
        </asp:SqlDataSource>
    </form>
</body>
</html>

j'attend votre réponse SVP et Merci d'avance..

**calagan99** · 04/06/2010, 14h41

Rita87, pas la peine de passer par les MP, utilises plutôt ton topic

Alors, il va te falloir mettre un peu les mains dans le cambouis, tu ne pourras pas tout faire avec des sqlDataSource...

Primo : est-ce que ta dropdownlist est bien remplie ?

Secundo : ce que tu me mets dans ton MP est correct (presque):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
Partial Class _Default
    Inherits System.Web.UI.Page
    Dim ds As New SqlDataSource
    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
        If Me.DropDownList1.SelectedValue = ds.SelectParameters(0).DefaultValue Then
            Me.TextBox1.Text = ds.SelectParameters(1).DefaultValue
        End If
 
    End Sub
End Class

Je ne sais pas comment tu te connectes à ta bdd ni de quelle bdd il s'agit donc je te donne quelques pistes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
Partial Class _Default
    Inherits System.Web.UI.Page
    Dim ds As New SqlDataSource
    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
        Dim Delegation as String
        Dim Ville as String =Me.DropDownList1.SelectedValue;
//Maintenant, tu as récupéré ta ville dans la variable Ville.
//Il faut donc que tu te connectes à ta base de données pour récupérer la délégation qui va bien.
//Crée une connexion, crée une sqlcommand, passe lui ta requête, passe lui la variable Ville en paramètre
//puis, affecte le résultat de ta requête(sqlcommand.ExecuteNonQuery()) à la variable Delegation
//enfin, Textbox1.value = Delegation
 
    End Sub
End Class

**rita87** · 04/06/2010, 15h30

oui c bon ca marche merci Calagan c'est très gentil de ta part j'ai pensé qu'il fallait utiliser Sqldatasource.

MAIS le problème qu'il me reste l'objectif de tous ça c que toute la page se rafraichit et moi j veux un rafraichissement partiel

si vous avez une idée rependez moi SVP et je vous remercie infiniment..

**calagan99** · 04/06/2010, 15h33

Glisse ta Dropdownlist dans ton updatepanel.

**rita87** · 04/06/2010, 16h25

Ça ne marche pas ça reste le même problème!!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
    Inherits System.Web.UI.Page
    Dim ds As New DataSet
    Public c As New SqlConnection("server=localhost;database=apline;integrated security=sspi")
 
    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
        Dim Delegation As String
        Dim Ville As String = Me.DropDownList1.SelectedValue
        c.Open()
        Dim da As New SqlDataAdapter("select n_deleguation from ville where n_ville='" & Me.DropDownList1.SelectedValue & "'", c)
        da.Fill(ds, "ville")
        Delegation = ds.Tables("ville").Rows(0).Item(0)
        Me.TextBox1.Text = Delegation
        c.Close()
    End Sub

voila mon code default.aspx

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Page sans titre</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        &nbsp;</div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="n_ville" DataValueField="n_ville" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
        </asp:DropDownList><br />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="TextBox1" runat="server" Height="23px"></asp:TextBox>
 
 
            </ContentTemplate>
               <Triggers >
            <asp:AsyncPostBackTrigger ControlID="dropdownlist1" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:aplineConnectionString %>"
            SelectCommand="SELECT ville.n_ville, ville.n_deleguation FROM ville INNER JOIN deleguation ON ville.n_deleguation = deleguation.n_deleguation">
        </asp:SqlDataSource>
        &nbsp;
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></form>
</body>
</html>

pas de rafraichissement partiel

**Nicolas Esprit** · 04/06/2010, 19h02

Si tu mets ta DropDownList dans le UpdatePanel.. du coup plus besoin du UpdateMode à Conditionnal et du Trigger...

**rita87** · 07/06/2010, 10h11

J'ai fais ce que tu as dis Nicolas en c qui concerne le Trigger et le Updatemode mais pas de changement ,Je suis bloké

**Nicolas Esprit** · 07/06/2010, 10h16

Bonjour,

Dans ce cas essaye de retirer le DropDownList de ton UpdatePanel en laissant un Trigger.

Mais juste pour vérifier : qu'entends tu par "toute la page se rafraichit et moi j veux un rafraichissement partiel" ?

**rita87** · 07/06/2010, 11h27

Mais juste pour vérifier : qu'entends tu par "toute la page se rafraichit et moi j veux un rafraichissement partiel" ?

CAD :j veux que juste mon Textbox(DELEGATION) se rafraichi lors du sélectionement du ville à partir du Dropdownlist et pas toute la page web car quand j selectionne la ville du dropdowlist toute les autre textbox s'initialise a nouveau (donc toute la page se rafraichit)

tu vois Nicolas !!!

j'ai retirer le Dropdownlist du update panel et j'ai laisser le Trigger mais il reste le même problème

**Nicolas Esprit** · 07/06/2010, 11h51

Ceci fonctionne très bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <asp:ScriptManager ID="ScriptManager1" runat="server" />
 
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="lbl" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
               <Triggers >
            <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
 
 
         <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Value="Value1" Selected="True">Item1</asp:ListItem>
            <asp:ListItem Value="Value2">Item2</asp:ListItem>
            <asp:ListItem Value="Value3">Item3</asp:ListItem>
         </asp:DropDownList>

**rita87** · 07/06/2010, 12h27

pas de rafraîchissement partiel même il me renvoi pas les données malgré que j'ai récrit le code

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Imports System.Data
Imports System.Data.sqlclient
Partial Class _Default
    Inherits System.Web.UI.Page
    Dim ds As New DataSet
    Dim dr As DataRow
    Public c As New SqlConnection("server=localhost;database=apline;integrated security=sspi")
 
    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
 
        c.Open()
 
        Dim da As New SqlDataAdapter("select n_deleguation from ville where n_ville='" & Me.DropDownList1.Selectedvalue & "'", c)
        da.Fill(ds, "ville")
        For i As Integer = 0 To ds.Tables("ville").Rows.Count - 1
            Me.TextBox1.Text = ds.Tables("ville").Rows(i).Item(0)
        Next
 
        c.Close()
    End Sub

**Nicolas Esprit** · 07/06/2010, 12h34

Le problème de rafraîchissement partiel en est un, celui des données en est un autre.

Concernant le premier, le petit bout de code que j'ai posté fonctionne parfaitement, et on ne peut faire plus simple. As-tu au moins essayé de voir si ça fonctionnait ?

Ensuite concernant la requête qui ne fonctionne pas, cela ne concerne pas l'ASP.NET, tu peux voir cela sur le forum prévu à cet effet. As-tu au moins essayé de mettre un breakpoint pour voir quelle requête tu faisais exactement. As-tu une exception ? Parce que avec une indication du type "il me renvoi po les donnée", on va pas aller loin (sans parler des fautes d'orthographe...)

**rita87** · 07/06/2010, 13h01

Oui j'ai essayé le code que vous m'avez donné biensur mais ca ne fonctionne plus

d'après ce code j'ai compris que je dois remplir le dropdownlist en html et pas du base donnée et c'est ce que j'ai fais
et oui en ce qui concerne les données ca n'a rien avoir avec les extension Ajax comme vous avez dit et c'est vrais

mais c juste pour vous donné une idée ,et sans parler des fautes d'orthographe

l'essentiel que vous comprenez ce que je veux dire malgré que vous faites un effort pour comprendre mais je vous remercie infiniment

**rita87** · 08/06/2010, 14h16

Bon j'ai trouvé la réponse à mon problème

, et je vous remercie beaucoup pour votre aide. et voila la réponse peut être ca peut aider quelqu'un , il ne faut pas oublier d'ajouter dans le web.config :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<system.web>
<httpHandlers>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
    <httpModules>
      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </httpModules>
</system.web>

et voila problème résolu

utilisation des Scriptmanager et Updatepanel

ASP.NET Ajax

Discussions similaires

Partager

Partager