How to Create Dynamic Tab Control With Filter and Condition

Dileep Kumar Patel
11y
5.9k
0
0

Article

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\">&rsaquo;  <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\">&lsaquo;  " + 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>";

//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\">&rsaquo;  <a href='SearchwithLocation.aspx?id=" + dt1.Rows[0]["cityid"].ToString() + "'>" + dt1.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";

output += "<div class=\"PropFor\">&lsaquo;  " + dt1.Rows[0]["PropFor"].ToString() + "</div>";

Output

This output string variable provides this result:

Second Tab

//For mathcing

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>";

//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\">&rsaquo;  <a href='SearchwithLocation.aspx?id=" + dt2.Rows[0]["cityid"].ToString() + "'>" + dt2.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";

output += "<div class=\"PropFor\">&lsaquo;  " + 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>";

//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\">&rsaquo; <a href='SearchwithLocation.aspx?id=" + dt3.Rows[0]["cityid"].ToString() + "'>" + dt3.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";
output += "<div class=\"PropFor\">&lsaquo;  " + 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>";

//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\">&rsaquo;  <a href='SearchwithLocation.aspx?id=" + dt4.Rows[0]["cityid"].ToString() + "'>" + dt4.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";

output += "<div class=\"PropFor\">&lsaquo;  " + 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>";

//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\">&rsaquo;  <a href='SearchwithLocation.aspx?id=" + dt5.Rows[0]["cityid"].ToString() + "'>" + dt5.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";

output += "<div class=\"PropFor\">&lsaquo;  " + 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>";

//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\">&rsaquo;  <a href='SearchwithLocation.aspx?id=" + dt6.Rows[0]["cityid"].ToString() + "'>" + dt6.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";

output += "<div class=\"PropFor\">&lsaquo;  " + 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>";

//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\">&rsaquo;  <a href='SearchwithLocation.aspx?id=" + dt7.Rows[0]["cityid"].ToString() + "'>" + dt7.Rows[0]["cityname"].ToString() + "(" + t + ")" + "</a></div>";

output += "<div class=\"PropFor\">&lsaquo;  " + 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>";

//End Any Tab

output += "</div>";

return output;

}

catch (Exception ex)

{

}

return output;

}

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

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:

$(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>

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.

Up Next

Ebook Download

View all

Hands on ASP.NET GridView

Read by 12k people

Download Now!

Learn

View all