utilisation des Scriptmanager et Updatepanel

Version imprimable

02/06/2010, 17h03
rita87

utilisation des Scriptmanager et Updatepanel

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

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 :cry:

Merci.
02/06/2010, 18h28
Nicolas Esprit

Bonjour,

Tu as tous les tutos que tu veux sur MSDN.
02/06/2010, 21h35
rita87

merci beaucoup Nicolas:) de votre aide je vais essayer avec ce lien merci de votre réponse

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:

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..

03/06/2010, 12h29
Nicolas Esprit

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é.
03/06/2010, 12h41
calagan99

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.

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:

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..

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:

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:

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

04/06/2010, 15h30
rita87

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..
04/06/2010, 15h33
calagan99

Glisse ta Dropdownlist dans ton updatepanel.

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

Code:

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:

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 :(

04/06/2010, 19h02
Nicolas Esprit

Si tu mets ta DropDownList dans le UpdatePanel.. du coup plus besoin du UpdateMode à Conditionnal et du Trigger...
07/06/2010, 10h11
rita87

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é :(
07/06/2010, 10h16
Nicolas Esprit

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" ?
07/06/2010, 11h27
rita87

Citation:

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 :(

Ceci fonctionne très bien :

Code:

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>

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

Code:

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

07/06/2010, 12h34
Nicolas Esprit

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...) :roll:
07/06/2010, 13h01
rita87

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 :oops: 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 ;)

Bon j'ai trouvé la réponse à mon problème 8-), 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:

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 :ccool: