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

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (jesusonline)