Conserver le "tab" courant en cas de postback avec JQuery UI Tabs

Nous souhaitons souvent amener un caractère sexy à notre page... Le framework à la mode est JQuery et il a intégré dans son plugin UI le composant permettant d’afficher une zone sous forme de 'tabs'. Néanmoins, l'utilisation d'ASP.NET amène parfois des problèmes. En effet, le moindre "changement" dans une dropdown en autopostback provoque un rechargement de la page. Evidement, JQuery UI Tabs étant 100% côté client, il est impossible de revenir sur le tab "courant" qui a déclenché le PostBack...

Cependant, nous pouvons facilement ajouter ce type de fonctionnalité dans notre code. Cet article l'explique.

Prenons par exemple une page ASP.NET de base héritant d'une MasterPage.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div class="tabs">
        <ul>
            <li><a href="#tabs1">Tab 1</a></li>
            <li><a href="#tabs2">Tab 2</a></li>
        </ul>
        <div id="tabs1">
            Tab 1
            <asp:Button runat="server" Text="Click from tab 1" />
        </div>
        <div id="tabs2">
            Tab 2
            <asp:Button runat="server" Text="Click from tab 2" />
        </div>
    </div>
</asp:Content>


Nous ajoutons les script JQuery et JQuery UI via CDN. Nous ajoutons également la mise en place du mécanisme de tabs sous JQuery UI, à savoir l'utilisation de la méthode tabs() sur notre div.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css" />
    <script type="text/javascript" language="javascript">
        $(function () {
            $("div.tabs").tabs();
         });
    </script>
</asp:Content>

Notre page s'affiche et les div sont correctement rendus avec des tabs. Nous devons maintenant ajouter la possibilité de retenir le tab courant. Nous allons donc ajouter dans notre page un input field de type hidden:

<asp:HiddenField runat="server" ID="currentTab" />

Nous allons également modifier notre code javascript pour retenir le tab courant:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css" />
    <script type="text/javascript" language="javascript">
        $(function () {
            $("div.tabs").tabs();
            var currentTabId = $("#<%= currentTab.ClientID %>");
            $("div.tabs").tabs('select', currentTabId.val());
            $("div.tabs").bind('tabsselect'function (event, ui) {
                currentTabId.val(ui.panel.id);
            });
        });
    </script>
</asp:Content>

A partir de ce moment, nous avons une page qui s'affiche sur le bon tab en cas de postback. Nous pouvons donc accéder en C# à l'information via le hiddenfield.Value ou via JS.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet

Page top