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.