How to Create Dynamic Tab Control With Filter and Condition

The is the step-by-step procedure for creating dynamic tabs using SQL Server 2008 and above with conditions.

Program output

Step 1: Create .dbo (table) and sp (Stored Procedure) that is displayed at the front.

Table City

Table Property

Stored Procedures

Step 2: Write the Business Access Layer (BAL) that is in the App_Code Folder with this code:

public String View_All_HotProperty(String PN, String PS, String PB)
{
try
{
output = String.Empty;
dt = new DataTable();
DataTable dt11 = new DataTable();
DataTable dt1 = new DataTable();
DataTable dt2 = new DataTable();
DataTable dt3 = new DataTable();
DataTable dt4 = new DataTable();
DataTable dt5 = new DataTable();
DataTable dt6 = new DataTable();
DataTable dt7 = new DataTable();
DataTable duplidt = new DataTable();
int c = 0;
int c1 = 0;
int t = 0;
int jump = 0;
string match = string.Empty;
int count=1;
int ii=0;
dt = objDal.GetDataTableHot(ref dt, "sp_View_All_HotProperty3");
dt1 = objDal.GetDataTableHot(ref dt1, "sp_View_All_HotProperty1");
dt2 = objDal.GetDataTableHot(ref dt2, "sp_View_All_HotProperty2");
dt3 = objDal.GetDataTableHot(ref dt3, "sp_View_All_HotProperty");
dt4 = objDal.GetDataTableHot(ref dt4, "sp_View_All_HotProperty4");
dt5 = objDal.GetDataTableHot(ref dt5, "sp_View_All_HotProperty5");
dt6 = objDal.GetDataTableHot(ref dt6, "sp_View_All_HotProperty6");
dt7 = objDal.GetDataTableHot(ref dt7, "sp_View_All_HotProperty7");
//dt1= dt.Select("sateid like '%"+1+"%'");
output = String.Empty;
output += "<div class=\"container\">";
output += "<ul class=\"tabs\">";
output += "<li><a href=\"#tab1\">Dubai</a></li>";
output += "<li><a href=\"#tab2\">Ajman</a></li>";
output += "<li><a href=\"#tab3\">Al ain</a></li>";
output += "<li><a href=\"#tab4\">Abu dhabi</a></li>";
output += "<li><a href=\"#tab5\">Fujairah</a></li>";
output += "<li><a href=\"#tab6\">Ras al kahimah</a></li>";
output += "<li><a href=\"#tab7\">Sharjah</a></li>";
output += "<li><a href=\"#tab8\">Umm al quwain</a></li>";
output += "</ul>";
output += "<div class=\"tab_container\">";
//For Tab1
output += "<div id=tab1 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For Abudhabi
output += "<div id=propheading><u>Dubai Properties For Sale and Rent</u> </div>";
// output += "<div id=propheading><hr></hr></div>";
output += "<div class=\"pan_tab1\">";
//for (int i = dt.Rows.Count; ; i++)
for (ii = dt.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0; j < dt.Rows.Count; j++)
{
if (c == int.Parse(dt.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt.Rows[0]["cityid"].ToString() + "&for=" + dt.Rows[0]["PropFor"].ToString() + "'>" + dt.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result:

First Tab

match = dt.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt.AcceptChanges();
count = dt.Rows.Count;
ii = count;
output += "</div>";
//For Abudhabi
output += "</div>";
output += "</div>";
//For Tab2
output += "<div id=tab2 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For sale start
output += "<div id=propheading><u>Ajman Properties For Sale and Rent</u> </div>";
output += "<div class=\"pan_tab1\">";
for (ii = dt1.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt1.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0; j < dt1.Rows.Count; j++)
{
if (c == int.Parse(dt1.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt1.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt1.Rows[0]["cityid"].ToString() + "'>" + dt1.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt1.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result:

Second Tab

//For matching
match = dt1.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt1.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt1.AcceptChanges();
count = dt1.Rows.Count;
ii = count;
}
output += "</div>";
//For sale End
output += "</div>";
output += "</div>";
//For Tab3
output += "<div id=tab3 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For Abudhabi
output += "<div id=propheading><u>Al ain Properties For Sale and Rent</u> </div>";
output += "<div class=\"pan_tab1\">";
for (ii = dt2.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt2.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0;j < dt2.Rows.Count; j++)
{
if (c == int.Parse(dt2.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt2.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt2.Rows[0]["cityid"].ToString() + "'>" + dt2.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt2.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result:

Third Tab

match = dt2.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt2.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt2.AcceptChanges();
count = dt2.Rows.Count;
ii = count;
}
output += "</div>";
//For Abudhabi
output += "</div>";
output += "</div>";
//For Tab4
output += "<div id=tab4 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For Abudhabi
output += "<div id=propheading><u>Abu Dhabi Properties For Sale and Rent</u> </div>";
output += "<div class=\"pan_tab1\">";
for (ii = dt3.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt3.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0; j < dt3.Rows.Count; j++)
{
if (c == int.Parse(dt3.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt3.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt3.Rows[0]["cityid"].ToString() + "'>" + dt3.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt3.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result:

Fourth Tab

match = dt3.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt3.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt3.AcceptChanges();
count = dt3.Rows.Count;
ii = count;
}
output +="</div>";
//For Abudhabi
output += "</div>";
output += "</div>";
//For Tab5
output += "<div id=tab5 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For Abudhabi
output += "<div id=propheading><u>Fujairah Properties For Sale and Rent</u> </div>";
output += "<div class=\"pan_tab1\">";
for (ii = dt4.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt4.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0; j < dt4.Rows.Count; j++)
{
if (c == int.Parse(dt4.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt4.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt4.Rows[0]["cityid"].ToString() + "'>" + dt4.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt4.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result :

Fifth Tab

match = dt4.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt4.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt4.AcceptChanges();
count = dt4.Rows.Count;
ii = count;
}
output += "</div>";
//For Abudhabi
output += "</div>";
output += "</div>";
//For Tab6
output += "<div id=tab6 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For Abudhabi
output += "<div id=propheading><u>Ras al kahimah Properties For Sale and Rent</u> </div>";
output += "<div class=\"pan_tab1\">";
for (ii = dt5.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt5.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0; j < dt5.Rows.Count; j++)
{
if (c == int.Parse(dt5.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt5.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt5.Rows[0]["cityid"].ToString() + "'>" + dt5.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt5.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result :

Six Tab

match = dt5.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt5.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt5.AcceptChanges();
count = dt5.Rows.Count;
ii = count;
}
output += "</div>";
//For Abudhabi
output += "</div>";
output += "</div>";
//For Tab7
output += "<div id=tab7 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For Abudhabi
output += "<div id=propheading><u>Sharjah Properties For Sale and Rent</u> </div>";
output += "<div class=\"pan_tab1\">";
for (ii = dt6.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt6.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0; j < dt6.Rows.Count; j++)
{
if (c == int.Parse(dt6.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt6.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt6.Rows[0]["cityid"].ToString() + "'>" + dt6.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt6.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result:

Seventh Tab

match = dt6.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt6.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt6.AcceptChanges();
count = dt6.Rows.Count;
ii = count;
}
output += "</div>";
//For Abudhabi
output += "</div>";
output += "</div>";
//For Tab8
output += "<div id=tab8 class=\"tab_content\">";
output += "<div class=\"pantool\">";
//For Abudhabi
output += "<div id=propheading><u>Umm al quwain Properties For Sale and Rent</u> </div>";
output += "<div class=\"pan_tab1\">";
for (ii = dt7.Rows.Count - 1; ii >= 0; ii--)
{
c = int.Parse(dt7.Rows[0]["cityid"].ToString());
t = 0;
for (int j = 0; j < dt7.Rows.Count; j++)
{
if (c == int.Parse(dt7.Rows[j]["cityid"].ToString()))
{
t = t + 1;
jump = int.Parse(dt7.Rows[j]["cityid"].ToString());
}
}
output += "<div class=\"pan_tab\">› <a href='SearchwithLocation.aspx?id=" + dt7.Rows[0]["cityid"].ToString() + "'>" + dt7.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">‹ " + dt7.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result:

Eighth Tab

match = dt7.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt7.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt7.AcceptChanges();
count = dt7.Rows.Count;
ii = count;
}
output += "</div>";
//For Abudhabi
output += "</div>";
output += "</div>";
//End Any Tab
output += "</div>";
output += "</div>";
return output;
}
catch (Exception ex)
{
}
return output;
}

Note: This code also covers the deletion of duplicate data from a column with a condition.

match = dt7.Rows[0]["cityname"].ToString();
foreach (DataRow dr in dt7.Rows)
{
if (dr["cityname"].ToString() == match)
{
dr.Delete();
}
}
dt7.AcceptChanges();

Match and delete data from a row and update the datatable.

Step 3: Call the above function at the .cs page with the following code:

if (!IsPostBack)
output = objProject.View_All_HotProperty("1", "25", "5");

Step 4: Call the above function at the .cs page with the following code:

Step 5: For Tab decoration use this jQuery and CSS:

<script type="text/javascript">
$(document).ready(function () {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<link href="TABSheet.css" rel="stylesheet" type="text/css" />

TABSheet.css

.container {width:auto; margin: 0px 0px 0px 0px;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 34px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #1383A6;
width:630px;
background-color :#1383A6;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #1383A6;
border-left: none;
margin-bottom:5px;
background:#1383A6;
/*background-image:url(images/banner-Head.png);*/
overflow: hidden;
position: relative;
width:auto;
}
ul.tabs li a {
text-decoration: none;
color: #FFFFFF;
display:block;
font-size: 1.2em;
padding: 0 8px;
border: 1px solid #1383A6;
outline: none;
}
ul.tabs li a:hover {
background:white;
color:Black ;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background:#999;
color:#000000;
border-bottom:1px solid #fff;
}
.tab_container{
border: 0.1em solid #C0C0C0;
border-top: none;
clear: both;
float: left;
width: 100%;
background:#fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.toolbar ul {
display:table-row;
}
.toolbar ul li
{
display: table-cell;
height:auto;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.toolbar ul li a {
display:table-cell;
vertical-align: middle;
height:auto;
}
.toolbar ul li.button a {
height:50px;
border: solid 1px black;
}
.pantool
{
width:600px;
float:left;
height:210px;
border:solid 0px black;
}
.tab2_pan
{
width:200px;
height:auto;
float:left;
border:solid 0px black;
}
.pan_tab
{
width:150px;
float:left;
text-align:left;
}
.pan_tab1
{
height:200px;
float:left;
}
#propheading
{
float:none;
color:#1383A6;
font-family:Verdana;font-size:medium;text-decoration:uderline;
text-align :left;
}
.PropFor
{
width:150px;
float :left;
text-align :left;
color:#1383A6;
}

Output

This output string variable provides this final result with select first tab:

To see all the tab results, click one tab for the opt specific output by location.

Note: This code will make 8 tabs with conditions that you gave from the SQL Server side.

I hope this article is very valuable and profitable for making attractive dynamic tabs using SQL Server.

2 Comments

Join the conversation! Your thoughts help the community grow.

Rohatash Kumar13y ago
Dileep, nice article. I have only problem that when we select tab and refresh whole page. It show first tab not selected tab.
- Dileep Kumar Patel13y ago
  This is complete implemented article.May be you are missing in Style Sheet correct it .Its will run fine.Thanks for Appreciating me.