.net2 - remplir un drop en fonction d'un autre grace au clientcallback

Soyez le premier à donner votre avis sur cette source.

Vue 17 111 fois - Téléchargée 684 fois

Description

Une des questions souvent posé sur le forum, c'est de savoir comment remplir un drop en fonction d'un autre. Ceci en asp.net est relativement simple, mais necessite un postback à chaque selection.

Dans cet exemple, je remplis un drop en fonction d'un autre mais cette fois sans faire aucun postback, ni meme en prechargeant les données dans la page via javascript, j'utilise pour cela .net 2 et le ClientCallBack - Ajax.

En quelques mots, le ClientCallBack est l'adaptation proposé par Microsoft de la méthode Ajax (Asynchronous JavaScript And XML)

Dans le zip, vous trouverez la méthode utilisé en .net 1 avec des postbacks, et surtout la méthode en .net 2

j'ai pas beaucoup expliqué le fonctionnement, pour cela je vous conseille un article de Pierre Lagarde : http://www.techheadbrothers.com/DesktopDefault.aspx?tabindex=1&tabid=7&AId=68

Dans ces 2 exemples, j'ai relativement simplifié la chose, et meme construits les données de facons pas tres jolis, mais j'ai essayé de faire simple.

Source / Exemple :


' NouvelleMethode.aspx

<%@ Page Language="VB" MasterPageFile="~/Master/MasterPage.master" AutoEventWireup="false" CodeFile="NouvelleMethode.aspx.vb" Inherits="NouvelleMethode" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Literal ID="Literal1" runat="server"></asp:Literal><br />
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server">
    </asp:DropDownList>
    <asp:DropDownList ID="DropDownList2" runat="server">
    </asp:DropDownList>
    <br />
    <br />
    <asp:Button ID="Button1"
        runat="server" Text="Valider" /><br />
    <br />
    <asp:Literal ID="Literal2" runat="server"></asp:Literal><br />
    <br />
    <hr />
    <h2>Explication</h2>
    <p>
    Cette approche est certes plus complexe, mais beaucoup plus puissante, en effet,
    lorsque le client change de selection, l'heure ne change pas, donc il n'y a pas
    eu un retour complet du formulaire.</p>
    <p>Malheureusement, il y a pas mal de problèmes, que j'expliquerais tout à l'heure</p>
    <h3>Comment ca marche ? </h3>
    <p>Au niveau HTML + javascript, c'est "assez simple". Quand on change la selection, l'evenement onChange du drop est declenché (coté client toujours). Cet evenement va chercher webform__doCallBack qui demande surtout ce qu'on doit rapporter au serveur.
        la fonction webform__doCallBack est géré par asp.net, elle fait pas mal de petites
        choses, et au final elle appelle une fonction javascript : __onCallbackTermine que
        l'on a écrit, avec en paramètre, le retour du serveur.
    </p>
    <p>
        Coté serveur, ce que l'ont doit faire : le mieux est d'allé voir <a href="http://www.techheadbrothers.com/DesktopDefault.aspx?tabindex=1&tabid=7&AId=68" title="article sur TechHeadBrother de Pierre Lagarde"> l'article de Pierre Lagarde</a></p>
<h3>Les problèmes</h3>
<ul>
<li>Il y a un gros problème avec cette méthode quand on l'utilise sur des drops, c'est que si on fait un postback classique, Me.DropDownList2.SelectedItem
 sera égale à la valeur du dernier postback, ce qui s'explique par le fait que le drop a été construit
    coté javascript, donc on ne peut pas accéder à toute les valeurs du drop, juste
    la valeur selectionné, en faisant un Me.Request(Me.DropDownList2.ClientID)</li>
    <li>Le deuxieme problème qui n'en est pas vraiment un, c'est que cette méthode et relativement
        compliqué à mettre en oeuvre, il est également trés compliqué de faire cohabiter
        une méthode par postback et par un ClientCallBack</li>
</ul>
<h3>La suite ?</h3>
<p>Dans cet exemple, j'ai mis un bouton pour afficher, les resultats de la deuxieme selectionné, ceci dans le but de montrer une facon de faire cohabiter les deux méthodes. Pour voir si vous avez bien compris le fonctionnement, essayez d'afficher la selection lors d'un changement sur le deuxieme drop</p>
</asp:Content>

'NouvelleMethode.aspx.vb

Partial Class NouvelleMethode
    Inherits System.Web.UI.Page
    Implements ICallbackEventHandler

    Private Element(3) As String
    Private SousElement(3)() As String

    Private Sub ConstructTableau()
        If Not Page.IsPostBack Then
            'Construction du tableau de tableau
            For i As Integer = 0 To 3
                Element(i) = "Element" & i.ToString
                ReDim SousElement(i)(9)
                For j As Integer = 0 To 9
                    SousElement(i)(j) = i.ToString & " - " & j.ToString
                Next
            Next

            'On met le tableau de tableau dans la variable de session
            Session("souselement") = SousElement

            Me.DropDownList1.DataSource = Element
            Me.DropDownList1.DataBind()
        End If
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ConstructTableau()

        'Affichage de l'heure de la derniere requete.
        Literal1.Text = "La derniere requete s'est effectué à " & Now.ToLongTimeString
        Session("test") = "test"
        ' Ecriture du ClientCallBack
        Dim cbref As String = Page.ClientScript.GetCallbackEventReference(Me, _
            "document.getElementById ('" & Me.DropDownList1.ClientID & "').value", _
            "__onCallbackTermine", "null", False)
        Me.DropDownList1.Attributes.Add("onchange", cbref + ";return false;")
        Me.ClientScript.RegisterStartupScript(GetType(NouvelleMethode), "__onCallbackTermine", "function __onCallbackTermine (result, context){document.getElementById('" & Me.DropDownList2.ClientID & "').outerHTML = result;}", True)
    End Sub

    Public Function RaiseCallbackEvent(ByVal eventArgument As String) As String Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
        'Recupere le tableau de tableau a partir de la variable de session
        SousElement = Session("souselement")

        Me.DropDownList2.DataSource = SousElement(CInt(Right(eventArgument, 1)))
        Me.DropDownList2.DataBind()
        Dim sw As New System.IO.StringWriter()
        Dim htw As New HtmlTextWriter(sw)
        Me.DropDownList2.RenderControl(htw)
        htw.Flush()
        Return sw.ToString()
    End Function

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Literal2.Text = " Vous avez selectionné l'element N° " & DropDownList1.SelectedIndex & " et le sous element " & DropDownList2.SelectedIndex
        Literal2.Text = Me.Request(Me.DropDownList2.UniqueID)
    End Sub
End Class

Conclusion :


Pour voir l'exemple il suffit de dezipper dans un dossier, puis d'ouvrir le sln avec VS 2005 ou Visual Web Developer, j'ai pas testé en .net 1.1 mais la page anciennemethode.aspx devrait fonctionner.

J'essayerais de mettre a disposition sur le net ces deux exemples, et peut etre d'en rajouter un, un peu plus concret.

Pour les exemples :
http://cyril.dnsalias.com:83/Exemples/ClientCallBack/NouvelleMethode.aspx 'Avec ClientCallBack
ou
http://cyril.dnsalias.com:83/Exemples/ClientCallBack/AncienneMethode.aspx 'Sans ClientCallBack

j'attends vos feedbacks

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_Djedie
Messages postés
18
Date d'inscription
mardi 8 avril 2003
Statut
Membre
Dernière intervention
15 mars 2007
-
Les liens des exemples de sont plus valides :(

Je ne connais aps le VB, aurais-tu une version C# de dispo pour ce code?
Je saurai rajouter les ; mais certians bouts de codes sont trop differents (ex : "Dim cbref As String").

Merci
PuNishieuse
Messages postés
8
Date d'inscription
lundi 6 novembre 2000
Statut
Membre
Dernière intervention
4 septembre 2009
-
@Djedie
Ci-dessous une bonne adresse pour convertir des bouts de codes:
http://www.carlosag.net/Tools/CodeTranslator/Default.aspx

VB.NET: Dim cbref As String
C#: string cbref;

Certaines parties de codes ne sont pas très bien converties mais le gros est bon.
megadmini
Messages postés
4
Date d'inscription
vendredi 31 décembre 2004
Statut
Membre
Dernière intervention
4 avril 2008
-
Merci Beaucoup pour ce source!
Mais quand j'ai l'executé sur mon Pc il m'a donné cette Erreur :
"Class 'NouvelleMethode' doit implémenter 'Function GetCallbackResult() As String' pour l'interface 'System.Web.UI"

Repond Moi SVP car je besoin de ce code!
megadmini
Messages postés
4
Date d'inscription
vendredi 31 décembre 2004
Statut
Membre
Dernière intervention
4 avril 2008
-
Désolés mais j'ai oublié de mettre les autres Erreurs :
Erreur 2 Class 'NouvelleMethode' doit implémenter 'Sub RaiseCallbackEvent(eventArgument As String)' pour l'interface 'System.Web.UI.ICallbackEventHandler'
Erreur 3 'RaiseCallbackEvent' ne peut pas implémenter 'RaiseCallbackEvent', car il n'existe pas de function correspondant pour l'interface 'System.Web.UI.ICallbackEventHandler'

Merci d'avant!
Commenter la réponse de cs_Djedie

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.