Load d'un UserControl dans un UpdatePanel, problème d'événement

Version imprimable

25/09/2013, 14h42
antrax2013

Load d'un UserControl dans un UpdatePanel, problème d'événement

Bonjour,

j'ai besoin de pouvoir loader un usercontrol dans un UpdatePanel, si possible en javascript/jquery.

J'ai réussi à m'en sortir en passant par un handler web et c'est bien là tout mon soucis. Clairement ça ne semble pas être la bonne solution. D'autant plus que pour inclure des controls entrainant des post back, j'ai besoin de mettre mon usercontrol dans un Html form. Ce qui a pour conséquence de "briser" le mécanisme des UpdatePanel.

Y a t'il une solution pour ne pas à avoir à inclure dans un formulaire mon usercontol ? Et donc m'attacher au "formulaire" de la page ayant déclenché le chargement et donc ne pas perdre mon mécanisme de post-back et update panel.

Sinon y a t'il une solution pour pouvoir "s'attacher" au formulaire de la page principal malgré le fait le chargement se fasse en JQuery ? Et donc rétablir le mécanisme de post-back et update panel.

Sinon y a t'il un autre moyen de loader un usercontrol en Javascript qu'en passant par un handler ? Et donc pourvoir s’appuyer sur le formulaire de la page principale.

D'avance merci de vos réponses.
29/09/2013, 08h47
antrax2013
1. Y a t'il une solution pour ne pas à avoir à inclure dans un formulaire mon usercontol ?
Oui j'ai trouvé une solution. En dérivant la classe UI.Page. Elle est dotée d'une méthode

Code:

VerifyRenderingInServerForm

qu'il suffit de redéfinir pour que la vérification ne se fasse pas. C'est moche mais à défaut d'autre chose...

Par contre ça ne règle pas mon soucis. J'ai essayé de déclencher par webmethode et reflexion un événement du Usercontrol ça fonctionne bien tant que l'on a pas besoin d'agir sur la contenu de la page.

Ensuite, en m'appuyant sur le post-back naturel de la page, les événements de mon usercontrol déclenche un post-back global et on obtient une erreur javascript puisque les éléments du Usercontrol ne sont pas "référencés" dans le viewstate.

Je vais essayé les pistes suivantes:
- Après le post-back suite à un événement d'un élément du usercontrol loadé côté client, essayé d'ajouter à la page, cette fois-ci côté serveur, le usercontrol et de déclencher manuelle l'événement à l'origine du post-back. Le hic aurais-je toutes les informations nécessaires :
- . l'"url" du control
  . le sender de l'événement
  . l'événement (click...)
- Loader dès le début le usercontrol côté serveur. Car au final en y regardant de plus près le code dont j'ai hérité, je dois pouvoir trouver les informations sur les usercontrols à loader lors de l'init de la page.

En ce qui concerne cette piste:
1. Sinon y a t'il une solution pour pouvoir "s'attacher" au formulaire de la page principal malgré le fait le chargement se fasse en JQuery ? Et donc rétablir le mécanisme de post-back et update panel.
Je n'ai pas trouvé d'élément concluant.
29/09/2013, 12h32
youtpout978

Je ne comprends pas exactement pourquoi tu veux faire ça, mais une solution serait d'inclure ton usercontrol dans la page dès le départ avec un display:none pour qu'il ne soit pas visible et de faire un show en jquery.
Ou tu peux mettre un boutton dans ta page qui n'est pas visible et tu fait ton bouton.click en jquery pour faire ton postback et inclure ton usercontrol en code.
30/09/2013, 09h20
antrax2013

Citation:

Envoyé par youtpout978

Je ne comprends pas exactement pourquoi tu veux faire ça, mais une solution serait d'inclure ton usercontrol dans la page dès le départ avec un display:none pour qu'il ne soit pas visible et de faire un show en jquery.
Ou tu peux mettre un boutton dans ta page qui n'est pas visible et tu fait ton bouton.click en jquery pour faire ton postback et inclure ton usercontrol en code.

Effectivement. Merci de ta réponse. Si s'était si simple :aie:.

J'ai hérité d'une situation (assez chaotique) où j'ai X panels qui correspondent à d'anciennes frames. C'est une vielle application dont je n'ai plus personne qui maîtrise le code existant. Il est très volumineux et très "complexe".

Lors de l'exécution, je n'ai connaissance qu'au cours des load_page successifs des usercontrol que je doit charger.

Ma mission est de shooter les frames et de les remplacer par des divs. Les frames étant loadées par "open.windows" j'ai voulu conservé le mécanisme de chargement par JS mais là est mon problème. Je me suis également dit que le plus simple pour rester proche du comportement des frames c'est de passer par des updatePanels.
30/09/2013, 10h11
youtpout978

Tu veux donc ouvrir de nouvelle pages où tu afficheras tes usercontrols à l'intérieur ?
J'ai l'impression que ton problème est plus simple à résoudre que tu ne le penses mais ta façon de te le représenter te complique la tache.
30/09/2013, 13h57
antrax2013

je veux simplement charger côté client un usercontrol dans un updatepanel et que ses "post-back" soient exécutés comme ceux des autres usercontrol présents dans la page.

Déjà pour charger un usercontrol dans un updatepanel tu dois obligatoirement faire un postback (il peut être asynchrone).
Et il faudra qu'à chaque postback tu recrée cette usercontrol et te réabonne à l'événement pour que celui-ci soit exécuté.

Exemple:

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        function AjouterControlSaisieClient() {
            $(".hdnSaisie input").val("true");
            __doPostBack("", "");
        }
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <div class="hdnSaisie">
            <asp:HiddenField ID="hdnSaisie" runat="server" />
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div onclick="AjouterControlSaisieClient();">
                    Ajouter Control
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

J'ai cette page et je veux donc au click sur cette div ajouter un usercontrol à mon updatepanel.

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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace UpdatePanel
{
    public partial class Accueil : System.Web.UI.Page
    {
        protected SaisieInfoClient ucSaisie;
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
        }
 
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e); 
            if (IsPostBack)
            {
                if (hdnSaisie.Value == "true")
                {
                    ucSaisie = LoadControl("SaisieInfoClient.ascx") as SaisieInfoClient;
                    UpdatePanel1.ContentTemplateContainer.Controls.Add(ucSaisie);
                    ucSaisie.Click += new EventHandler(ucSaisie_Click);
                }
            }
        }
 
 
        protected void Page_Load(object sender, EventArgs e)
        {
 
        } 
 
        void ucSaisie_Click(object sender, EventArgs e)
        {
 
        }
 
    }
}

Donc à partir du moment ou j'ai cliqué sur ma div j'ai la valeur de l'hiddenfield saisie qui est à true et donc je vais recrée l'usercontrol à chaque postback.

Merci. Mais je pense qu'on s'est pas compris. J'ai besoin de charger côté client donc avec jQuery (ou javascript).

Le code que tu m'envoies je l'ai déjà. En gros si je m'appuie sur ton exemple. J'ai :
Code:

1 2 3 4 5 6 <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:PlaceHolder id="PlaceHolder" runat="server"></asp:PlaceHolder> </ContentTemplate> </asp:UpdatePanel>
un script jQuery qui fait ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 jQuery.ajax({ type: 'GET', url: '../Handler/UserControlLoader.ashx?control=' + encodeURI(data["url"]) + param +, cache: false, context: document.body, async: false, dataType: "html", success: function (View) { $placeHolder.empty(); $placeHolder.append(View); });
Ainsi j'ai chargé mon user control dans le placeHolder.

Dans mon ashx je fais entre autre ça
Code:

1 2 3 4 5 6 7 8 9 10 ucSaisie = LoadControl("SaisieInfoClient.ascx") as SaisieInfoClient; ucSaisie.Click += new EventHandler(ucSaisie_Click); ... ' Je l'ajoute au control ... Using writer As New StringWriter() HttpContext.Current.Server.Execute(templatePage, writer, True) return writer.ToString() ' envoie du html dans un wrtiter à destination du jQuery pour intégration End Using
Le truc c'est qu'une fois "ucSaisie_Click" ne sera jamais exécuté. C'est normal et j'en suis bien conscient. D'où ma question comment faire.

30/09/2013, 17h19
youtpout978

Et oui parce qu'il faut que tu l’exécutes à chaque postback ce morceau de code.
Quand tu fais un postback après avoir ajouter ton usercontrol est-ce que celui-ci est toujours présent dans ta page? si c'est le cas tu peux le retrouver et te réabonner sur ton click.

Via ce script je l'ai toujours
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(initializeRequest); prm.add_endRequest(endRequest); var _postBackElement; var content; function initializeRequest(sender, e) { content = jQuery("div[id$=PlaceHolder]").clone(); ... function endRequest(sender, e) { jQuery("div[id$=id$=PlaceHolder]").replaceWith(content); }
Là tu éveille ma curiosité :ccool:. Comment je m'y abonne ? Car là dès le premier chargement les post-back n'aboutissent jamais à l'exécution du "ucSaisie.Click".

30/09/2013, 17h54
youtpout978

Pourrais-tu mettre le code complet ?
Tu as la méthode findcontrol qui permet de retrouver un control par son id: http://msdn.microsoft.com/fr-fr/libr...=vs.85%29.aspx

Le fichier ashx:

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
 
Public Class UserControlLoader
    Implements System.Web.IHttpHandler, System.Web.SessionState.IRequiresSessionState
 
    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
 
        context.Response.ContentType = "text/html"
 
        Try
            Dim ctrl As String = context.Request("control")
 
            If (Not String.IsNullOrEmpty(ctrl)) Then
               context.Response.Write(LoadUserControl(ctrl))
            Else
                ctrl = ""
            End If
 
 
        Catch ex As Exception
 
        End Try
 
Protected Shared Function LoadUserControl(ByVal user_control As String) As String
 
        Dim retour As String = String.Empty
 
        'Verification de l'existance du userControl
        Dim existe As Boolean = System.IO.File.Exists(HttpContext.Current.Server.MapPath(user_control))
        If Not existe Then Return retour
 
        'Creation de la page virtuelle
        Using Page As New TemplatePage
            Page.ProcessRequest(HttpContext.Current)
 
            'si la chaine est un chemin relatif du type "../toto/tata" on vire les .. qu'on rempalce par ~
            If (user_control.StartsWith("../")) Then user_control = (New Regex("^[\.]{2}")).Replace(user_control, "~")
 
            Dim uc As UserControl = Page.LoadControl(user_control)
 
            Dim panel As Panel = New Panel()
            panel.Controls.Add(uc)
            Page.Controls.Add(panel)
 
            Using writer As New StringWriter()
                HttpContext.Current.Server.Execute(Page, writer, True)
                retour = writer.ToString()
            End Using
 
        End Using
 
        Return retour
 
    End Function

Le reste est similaire à ce que tu as écrit. Je le posterais demain car je ne l'ai pas avec moi. La class template est juste une surcharge de la class UI.Page avec une redéfinition de la méthode VerifyRenderingInServerForm qui ne fait rien.