Dynamic database driven jQuery Tabs in asp.net

In this post we will go through database driven, dynamic jQuery Tabs implementation. To start with lets first check how the tabs HTML looks like.

The basic structure of the HTML that is needed for Tabs implementation looks like this-

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Now to implement a data base driven or a dynamic tab, we need to find some repeated sequences of content. If we analyze the HTML structure above, we can see two repeated sequences. First is the UL LI with anchor. Each LI is nothing but a repeat of the other. Only difference is the content of the anchor and the href. Secondly, the repeated sequence is the divs below UL. Only difference is the id and content of the div. So, here is another repeated sequence. So to make dynamic or database driven Tabs we, need to make the tow sets of repetitions.

Now here is a implementation using asp.net repeater control-

http://forums.asp.net/p/1693184/4474572.aspx/1?Re+how+to+interact+this+jquery+with+asp+net+codes+

In this link I am little lazy to write the database code. So I have taken the help of in memory datasource. This can be easily changed and the content can be made database driven and its left up to you. If you notice, the connection between the tab item and the content item is done through ListID. In the anchor href we have the following code href="#fragment-<%#Eval("ListID") %>". And in the div id we have id="fragment-<%#Eval("ListID") %>".

We can see another post below-

http://forums.asp.net/p/1663415/4345867.aspx/1?Re+Tabs+creation+using+Jquery+at+runtime

In this post I have created using jQuery and an array rendered to the page using ClientScript.RegisterClientScriptBlock. This also we can make database driven. We can also get the content of the Tabs using jQuery ajax and asp.net pagemethod or webmethod.