1) Ajouter la Dll AjaxControlToolkit et ajouter le "Register"
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
2) Mise en place du TabContainer et des TabPanel
<ajaxToolkit:TabContainer ID="tabs"
runat="server"
Width="99%"
ActiveTabIndex="0"
OnClientActiveTabChanged="clientActiveTabChanged">
<%-- Panel 1 --%>
<ajaxToolkit:TabPanel ID="tabPanel1"
runat="server"
HeaderText="Panel 1">
<ContentTemplate>
<asp:UpdatePanel runat="server"
ID="updPnl1"
UpdateMode="Conditional">
<ContentTemplate>
Contenu du pannel 1
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<%-- Panel 2 --%>
<ajaxToolkit:TabPanel ID="tabPanel2"
runat="server"
HeaderText="Panel 2">
<ContentTemplate>
<asp:UpdatePanel runat="server"
ID="updPnl2"
UpdateMode="Conditional">
<ContentTemplate>
Contenu du pannel 2
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
3)Ajouter l'UpdateProgressDiv (Affichage de "Loading...")
<div id="updateProgressDiv" class="updateProgress" style="display: none;
<div align="center" style="margin-top: -200px;">
<img id="imgLoader" src="../../Common/Images/ajax-loader_blue.gif" /><br />
<span>Chargement ...</span>
</div>
</div>
4) Ajout des boutons cachés utilisés pour déclencher les Triggers
<input id="btnTab1Trigger"
runat="server"
type="button"
style="display: none"
onserverclick="BtnTab1Trigger_Click" />
<input id="btnTab2Trigger"
runat="server"
type="button"
style="display: none"
onserverclick="BtnTab2Trigger_Click" />
5) Méthodes associées aux boutons dans le codeBehind
Permet de déclencher une méthode pour charger chaque panel (à partir d'une base de données en général)
protected void BtnTab1Trigger_Click(object sender, EventArgs args)
{
………
………
}
protected void BtnTab2Trigger_Click(object sender, EventArgs args)
{
………
………
}
6) Implantation du JavaScript
<script type="text/javascript" language="javascript">
var _updateProgressDiv;
function pageLoad(sender, args) {
// register for our events
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
_updateProgressDiv = $get('updateProgressDiv');
}
function beginRequest(sender, args)
{
if (_updateProgressDiv != null)
{
// get the gridview element
var tabContainer = $get('<%= this.Tabs.ClientID %>');
// make it visible
_updateProgressDiv.style.display = '';
// get the bounds of both the gridview and the progress div
var tabContainerwBounds = Sys.UI.DomElement.getBounds(tabContainer);
var updateProgressDivBounds=Sys.UI.DomElement.getBounds(_updateProgressDiv);
// center of gridview
var x = tabContainerwBounds.x + Math.round(tabContainerwBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = tabContainerwBounds.y + Math.round(tabContainerwBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
// set the progress element to this position
Sys.UI.DomElement.setLocation(_updateProgressDiv, x, y);
}
}
function endRequest(sender, args)
{
if (_updateProgressDiv != null)
{
// make it invisible
_updateProgressDiv.style.display = 'none';
}
}
function clientActiveTabChanged(sender, args) {
// see if the table elements for the grids exist yet
var isTab1Loaded = $get('<%= this.gvTab1.ClientID %>');
var isTab2Loaded = $get('<%= this.gvTab2.ClientID %>');
// if the tab does not exist and it is the active tab,
// trigger the async-postback
if (!isTab1Loaded & sender.get_activeTabIndex() == 0)
{
// load tab1
__doPostBack('m$CP$btnTab1Trigger', '');
}
else if (!isTab2Loaded & sender.get_activeTabIndex() == 1)
{
// load tab2
__doPostBack('m$CP$btnTab2Trigger', '');
}
}
</script>
7) Modification de la méthode si la détection du chargement se fait autrement qu'avec une GridView
Si aucune GridView n’est présente dans le TabPanel, on peut utiliser un HiddenField qui prendra comme valeur 0 lorsqu’il n’est pas chargé, et 1 dans le cas contraire.
Ces champs peuvent être rajoutés à la suite des HiddenButton comme suivant :
<input id="verifTab1" runat="server" type="text" style="display: none" />
<input id="verifTab2" runat="server" type="text" style="display: none" />
Et la fonction JavaScript :
function clientActiveTabChanged(sender, args) {
var txtTab1 = document.getElementById('<%=verifTab1.ClientID%>').value;
var txtTab2 = document.getElementById('<%=verifTab2.ClientID%>').value;
if (txtTab1 == 1 & sender.get_activeTabIndex() == 0)
{
// load tab1
__doPostBack('m$CP$btnPlanningCopieTrigger', '');
}
else if (txtTab2 == 1 & sender.get_activeTabIndex() == 1)
{
// load tab2
__doPostBack('m$CP$btnPlanningExpeTrigger', '');
}
}
Dans le CodeBehind il faudra modifier la valeur des HiddenField si ils sont chargés ou non
protected void BtnTab1Trigger_Click(object sender, EventArgs args)
{
………
………
verifTab1.Value = "0";
}
protected void BtnTab2Trigger_Click(object sender, EventArgs args)
{
………
………
verifTab2.Value = "0";
}
Et les initialisé à "1" au chargement de la page