Hi ashish007,
Check this example. Now please take its reference and correct your code.
HTML
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
window.onload = function () {
document.getElementsByClassName("tabcontent")[0].style.display = "block";
};
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<style type="text/css">
.style21 {
width: 251px;
}
.style23 {
width: 70px;
}
.style22 {
width: 180px;
}
.table {
border: 1px solid #ccc;
-webkit-border-radius: 6px;
}
.lblcolor {
font-family: Verdana;
font-size: 8pt;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table style="width: 100%" class="pimg">
<tr>
<td style="height: 40px;">Friends(<asp:Label ID="lblfcnt" runat="server"></asp:Label>)</td>
</tr>
<tr>
<td>
<div class="tab">
<button type="button" class="tablinks" onclick="openCity(event, 'ALL Friends')">ALL Friends</button>
<button type="button" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button type="button" class="tablinks" onclick="openCity(event, 'Birthday')">Birthday</button>
</div>
</td>
</tr>
<tr>
<td>
<div id="ALL Friends" class="tabcontent" style="display: none;">
<h3>All Friends</h3>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" Width="100%"
HorizontalAlign="Center" RepeatDirection="Horizontal"
CellSpacing="3">
<ItemStyle />
<ItemTemplate>
<table style="width: 100%;" class="table">
<tr style="margin: 10px;" class="pimg">
<td class="style23" rowspan="2">
<asp:Image ID="Image7" runat="server" ImageUrl='<%#Eval("imagedata") %>' CssClass="img12" />
</td>
<td class="style22" colspan="2">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("First_name") %>' Font-Names="verdana" Font-Size="8pt"></asp:Label>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Last_name") %>' Font-Names="verdana" Font-Size="8pt"></asp:Label>
<br />
<br />
<asp:LinkButton ID="lnlmfriend" runat="server" Text="Mutual Friend" ForeColor="Black" Font-Size="8pt" Font-Names="Verdana"></asp:LinkButton>
<asp:Button ID="btnfrnd" runat="server" Text="Friend" CssClass="pimg" Height="30px" Width="60px" />
</td>
</tr>
<tr>
<td class="style22"></td>
<td> </td>
</tr>
<tr>
<td class="style23"> </td>
<td class="style22"> </td>
<td> </td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</td>
</tr>
<tr>
<td>
<div id="Paris" class="tabcontent" style="display: none;">
<h3>Paris</h3>
<table style="width: 100%">
<tr>
<td colspan="2">
<asp:DataList ID="DataList2" runat="server" RepeatColumns="2" Width="100%"
HorizontalAlign="Center" RepeatDirection="Horizontal"
CellSpacing="3">
<ItemStyle />
<ItemTemplate>
<table style="width: 100%;" class="table">
<tr style="margin: 10px;" class="pimg">
<td class="style23" rowspan="2">
<asp:Image ID="Image7" runat="server" ImageUrl='<%#Eval("imagedata") %>' CssClass="img12" />
</td>
<td class="style22" colspan="2">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("First_name") %>' Font-Names="verdana" Font-Size="8pt"></asp:Label>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Last_name") %>' Font-Names="verdana" Font-Size="8pt"></asp:Label>
<br />
<br />
<asp:LinkButton ID="lnlmfriend" runat="server" Text="Mutual Friend" ForeColor="Black" Font-Size="8pt" Font-Names="Verdana"></asp:LinkButton>
<asp:Button ID="btnfrnd" runat="server" Text="Friend" CssClass="pimg" Height="30px" Width="60px" />
</td>
</tr>
<tr>
<td class="style22"></td>
<td> </td>
</tr>
<tr>
<td class="style23"> </td>
<td class="style22"> </td>
<td> </td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="Birthday" class="tabcontent" style="display: none;">
<h3>Birthday</h3>
</div>
</td>
</tr>
</table>
</asp:Content>
Namespaces
C#
using System.Data;
using System.Linq;
VB.Net
Imports System.Data
Imports System.Linq
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] {
new DataColumn("First_name"),
new DataColumn("Last_name"),
new DataColumn("imagedata") });
dt.Rows.Add("Janet", "Leverling", "Pictures/3.jpg");
dt.Rows.Add("Andrew", "Fuller", "Pictures/2.jpg");
dt.Rows.Add("Steven", "Buchanan", "Pictures/5.jpg");
dt.Rows.Add("Laura", "Callahan", "Pictures/8.jpg");
lblfcnt.Text = dt.Rows.Count.ToString();
DataList1.DataSource = dt;
DataList1.DataBind();
DataList2.DataSource = dt.AsEnumerable().Take(2).CopyToDataTable();
DataList2.DataBind();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn(2) {
New DataColumn("First_name"),
New DataColumn("Last_name"),
New DataColumn("imagedata")})
dt.Rows.Add("Janet", "Leverling", "Pictures/3.jpg")
dt.Rows.Add("Andrew", "Fuller", "Pictures/2.jpg")
dt.Rows.Add("Steven", "Buchanan", "Pictures/5.jpg")
dt.Rows.Add("Laura", "Callahan", "Pictures/8.jpg")
lblfcnt.Text = dt.Rows.Count.ToString()
DataList1.DataSource = dt
DataList1.DataBind()
DataList2.DataSource = dt.AsEnumerable().Take(2).CopyToDataTable()
DataList2.DataBind()
End If
End Sub
Screenshot
