Utilisation du TabContainer de l'Ajax Control Toolkit (1.0.20229.20821)

Version imprimable

Bonjour,

J'ai un soucis à l'utilisation du controle Ajax TabContainer.

Je veux rafraichir uniquement le contenu des tabulations lorsque je les sélectionne, et pas toute la page.
Pour ce faire j'utilise un UpdatePanel dans chaque tabulation.

Le rafraichissement de l'UpdatePanel est déclenché par un AsyncPostBack sur un clic sur un bouton (1 bouton par tabulation).

Le clic sur le bouton est simulé lors de l'appel de la méthode clientActiveTabChanged lors du déclenchement de l'évenement OnClientActiveTabChanged du TabContainer.

Je ne comprend pas pourquoi toute la page se rafraichie et pas seulement les tabulations.

Je suis parti de l'exemple suivant : http://mattberseth.com/blog/2007/07/...nels_with.html

Je vous joint mon code de test ci-dessous.

merci de votre aide...

Cordialement,
Sébastien

La page TestTabContainer.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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestTabContainer.aspx.vb" Inherits="GestionEscales.TestTabContainer" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
 
<!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>TabContainer Test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
 
   <script type="text/javascript" language="javascript">
                function clientActiveTabChanged(sender, args) {   
 
                    sender.get_clientStateField().value = sender.saveClientState();
 
                    if(sender.get_activeTabIndex() == 0){                        
                        __doPostBack('<% = Button1.UniqueID %>', '');
                    }
                    else if(sender.get_activeTabIndex() == 1){                        
                        __doPostBack('<% = Button2.UniqueID %>', '');
                    }
                }         
            </script>
 
 
    <br />
    Some text in the page...
    <br />
    That should not blink when switching between Tab1 and Tab2.<br />
 
 
    <br />
    <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button 1" 
                UseSubmitBehavior="False" style="display:none" />
            &nbsp;<asp:Button ID="Button2" runat="server" Text="Button 2" 
                UseSubmitBehavior="False" style="display:none" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
 
 
    <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" 
                Height="100px" Width="95%" 
        OnClientActiveTabChanged="clientActiveTabChanged">
        <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><ContentTemplate>
                        <asp:Label ID="Label1" runat="server" Text="Test Tab 1"></asp:Label>
 
                </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
 
 
 
        </ContentTemplate>
 
</cc1:TabPanel>
        <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        &nbsp;<asp:Label ID="Label2" runat="server" Text="Test Tab 2"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
 
 
        </ContentTemplate>
 
</cc1:TabPanel>
    </cc1:TabContainer>
    </form>
</body>
</html>

La page TestTabContainer.aspx.vb :

Code:

1
2
3
4
5
6
7
8
9
10
11
Public Partial Class TestTabContainer
    Inherits System.Web.UI.Page
 
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        Label1.Text = Label1.Text & ", updated "
    End Sub
 
    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click
        Label2.Text = Label2.Text & ", updated"
    End Sub
End Class

09/01/2009, 18h13
lutecefalco

Je pense que le problème vient de là:
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

Ton bouton1 ne doit pas avoir Button1 comme ID donc ton trigger est mal défini d'où le post pack total
09/01/2009, 19h58
sbaudry

merci, je vérifie Lundi et vous je vous dit si c'est bien ça
---
En fait je vérifierai Lundi prochain, cause grippe et arrêt de travail...

En fait le bouton utilisé pour déclencher le rafraichissement de l'UpdatePanel a bien "Button1" comme id.
Donc je pense que ce n'est pas ça qui pose problème.

Ci dessous le HTML de la page dans le navigateur :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
 
<!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><title>
	TabContainer Test
</title><link href="/GestionEscales/WebResource.axd?d=z_a5oIzsmoeeh1LmnqaxBdZixJlt1fQUImtvjOq7qkEgXdk0SOUh7ZfF1-X8PXRos5nMzEGBqA9l_gRR_tFgyQ2&amp;t=633399140440000000" type="text/css" rel="stylesheet" /></head>
<body>
    <form name="form1" method="post" action="TestTabContainer.aspx" id="form1">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="TabContainer1_ClientState" id="TabContainer1_ClientState" value="{&quot;ActiveTabIndex&quot;:0,&quot;TabState&quot;:[true,true]}" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzAzNTE2MTA0ZBgCBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAQUNVGFiQ29udGFpbmVyMQUNVGFiQ29udGFpbmVyMQ8PZGZkIE7RzS94ewjt3A7LSljO9SG6Jh0=" />
 
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>
 
 
 
<script src="/GestionEscales/ScriptResource.axd?d=_4jm5OMwP81UhWPfyuDXRFzW5TNvrYmHsAy14S5xv-kbO06C0QPymUDxy2aBJWj_7EsScMge7Eoi3DQ-1sVA_PQ3bqOUO5JoBU7Q4XyB2aY1&amp;t=633378917565066407" type="text/javascript"></script>
<script src="/GestionEscales/ScriptResource.axd?d=cwIfRRc900VYDIPTP_UolqMc3i64cCO3nNw8vaw3MwT_cdybbmbcF92FvnDzayqWtse9sZpl8eozOfYRJJzzzA2&amp;t=633399140440000000" type="text/javascript"></script>
<script src="/GestionEscales/ScriptResource.axd?d=cwIfRRc900VYDIPTP_UolqMc3i64cCO3nNw8vaw3MwRg5tJi-PB4GnAiGEeENeav0pHdolnDj3CsgvC4-ND5fpe05wo0-UR0R0nvEsvSmxc1&amp;t=633399140440000000" type="text/javascript"></script>
<script src="/GestionEscales/ScriptResource.axd?d=cwIfRRc900VYDIPTP_UolqMc3i64cCO3nNw8vaw3MwSFM8MOYXhz3rcRNH4vEYVOskJrnlfxOpwhV0cV1Kv97g2&amp;t=633399140440000000" type="text/javascript"></script>
<script src="/GestionEscales/ScriptResource.axd?d=cwIfRRc900VYDIPTP_UolqMc3i64cCO3nNw8vaw3MwQVPqKoWvaC8UZge16YWfGlR6RNClkg_Xy4nP0wipMLpg7FZare_UEa-OiRj6blrKCtV2TIAq2r61BvJwAqXORv0&amp;t=633399140440000000" type="text/javascript"></script>
    <div>
 
    </div>
 
 
   <script type="text/javascript" language="javascript">
                function clientActiveTabChanged(sender, args) {   
 
                    sender.get_clientStateField().value = sender.saveClientState();
 
//                    if(sender.get_activeTabIndex() == 0){                        
//                        __doPostBack('Button1', '');
//                    }
//                    else if(sender.get_activeTabIndex() == 1){                        
//                        __doPostBack('Button2', '');
//                    }
 
                    __doPostBack('TabContainer1',sender.get_activeTab().get_headerText());
                }         
            </script>
 
 
    <br />
    Some text in the page...
    <br />
    That should not blink when switching between Tab1 and Tab2.<br />
 
 
    <br />
    <div id="UpdatePanel3">
 
            <input type="button" name="Button1" value="Button 1" onclick="javascript:__doPostBack('Button1','')" language="javascript" id="Button1" style="display:none" />
            &nbsp;<input type="button" name="Button2" value="Button 2" onclick="javascript:__doPostBack('Button2','')" language="javascript" id="Button2" style="display:none" />
 
</div>
    <br />
 
 
    <div id="TabContainer1" class="ajax__tab_xp" style="width:95%;visibility:hidden;">
	<div id="TabContainer1_header">
		<span id="__tab_TabContainer1_TabPanel1">TabPanel1</span><span id="__tab_TabContainer1_TabPanel2">TabPanel2</span>
	</div><div id="TabContainer1_body" style="height:100px;">
		<div id="TabContainer1_TabPanel1" style="display:none;visibility:hidden;">
 
                <div id="TabContainer1_TabPanel1_UpdatePanel1">
 
                        <span id="TabContainer1_TabPanel1_Label1">Test Tab 1</span>
 
 
			</div>
 
 
 
 
		</div><div id="TabContainer1_TabPanel2" style="display:none;visibility:hidden;">
 
                <div id="TabContainer1_TabPanel2_UpdatePanel2">
 
                        &nbsp;<span id="TabContainer1_TabPanel2_Label2">Test Tab 2</span>
 
			</div>
 
 
 
		</div>
	</div>
</div>
 
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLF9LOiBwKM54rGBgK7q7GGCOpTxP8YErYPEBbTgt+1rerNDQQB" />
 
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_TabPanel1")}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel1"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_TabPanel2")}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel2"));
});
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.TabContainer, {"activeTabIndex":0,"clientStateField":$get("TabContainer1_ClientState")}, {"activeTabChanged":clientActiveTabChanged}, null, $get("TabContainer1"));
});
// -->
</script>
</form>
</body>
</html>

Cordialement,
Sébastien