Binding Repeater data to Dynamic tab in asp.net - asp.net

Question

I wanted to bind the repeater's data to Dynamic tab of year the image for which i am attaching
enter image description here
the repeater code is as below:
<!--begin isotope -->
<div class="isotope col-lg-12">
<!--begin portfolio filter -->
<ul id="filter" class="option-set clearfix">
<li data-filter="*" class="selected"><a>All</a></li>
<asp:Repeater ID="rpYear" runat="server" OnItemDataBound="rpYear_ItemDataBound">
<ItemTemplate>
<li data-filter='<%#Eval("Year") %>'>
<a>
<asp:Label ID="lbl" runat="server" Text='<%#Eval("Year") %>'></asp:Label>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<ul id="list" class="portfolio_list clearfix">
<asp:Repeater ID="rpImagedetails" runat="server">
<ItemTemplate>
<li class="list_item col-lg-4 col-md-4 col-sm-4 <%#Eval("Year") %> ">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src='<%# "FileUpload/Eventpic/"+ Eval("Image") %>' alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!--<i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5><%#Eval("Title") %></h5>
<span><%#Eval("Date") %>
<br>
<%#Eval("Stallno") %>
<br>
<%#Eval("Location") %></span>
</figcaption>
</figure>
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
<!--./span12-->
</div>
the code behind file is as below:
protected void Page_Load(object sender, EventArgs e)
{
GetYear();
BindEventVideo1();
}
public void GetYear()
{
DataSet ds = EventVideo.GetYear();
if (ds.Tables[0].Rows.Count > 0)
{
rpYear.DataSource = ds;
rpYear.DataBind();
}
}
protected void rpYear_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
Repeater rpImages = (Repeater)e.Item.FindControl("rpImagedetails");
Label item = (Label)e.Item.FindControl("lbl");
string Year = item.Text;
ViewState["Year"] = Year;
}
}
public void BindEventVideo1()
{
DataSet ds = EventVideo.GetyearImages(ViewState["Year"].ToString());
if (ds.Tables[0].Rows.Count > 0)
{
rpImagedetails.DataSource = ds.Tables[0];
rpImagedetails.DataBind();
}
}
I am new to asp.net so kindly help.
Thanks in advance.
the Html code is
<div class="isotope col-lg-12">
<!--begin portfolio filter -->
<ul id="filter" class="option-set clearfix">
<li data-filter="*" class="selected">All</li>
<li data-filter=".2014">2014</li>
<li data-filter=".2012">2012</li>
<!-- <li data-filter=".2011">2011</li>-->
<li data-filter=".2010">2010</li>
</ul>
<!--end portfolio filter -->
<!--begin portfolio_list -->
<ul id="list" class="portfolio_list clearfix">
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2014">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2014-1.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!--<i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2014</h5>
<span>Date : 8th - 12th Jan '2014. <br>
Stall No: H2A55
<br>
BIEC,
Bangalore, India</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2014">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2014-2.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!--<i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2014</h5>
<span>Date : 8th - 12th Jan '2014. <br>
Stall No: H2A55
<br>
BIEC,
Bangalore, India</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<!--<li class="list_item col-lg-4 col-md-4 col-sm-4 2012">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="img/portfolio/portfolio_2.png" alt="" />
<div class="hovers">
</i>
<i class="fa fa-link"></i>
</div>
</div>
<figcaption class="item-description">
<h5>Power & Electricity World Africa 2012</h5>
<span>Date : 27th - 28th March '2012<br>
Stall No: ZNB-9 IND 10,
Sandton Convention Centre,
Johannesburg, South Africa</span>
</figcaption>
</figure>
</div>
</li>-->
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2012">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2012-1.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!--<i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2012</h5>
<span>Date : 18th - 22nd Jan'2012<br>
Stall No: H5 E10R70<br>
Bombay Exhibition Centre,
Mumbai, INDIA</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2012">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2012-2.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!--<i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2012</h5>
<span>Date : 18th - 22nd Jan'2012<br>
Stall No: H5 E10R70<br>
Bombay Exhibition Centre,
Mumbai, INDIA</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2012">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2012-3.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!--<i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2012</h5>
<span>Date : 18th - 22nd Jan'2012<br>
Stall No: H5 E10R70<br>
Bombay Exhibition Centre,
Mumbai, INDIA</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<!--<li class="list_item col-lg-4 col-md-4 col-sm-4 2012">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="img/portfolio/portfolio_4.png" alt="" />
<div class="hovers">
</i>
<i class="fa fa-link"></i>
</div>
</div>
<figcaption class="item-description">
<h5>Middle East Electricity 2012</h5>
<span>Date : 7th - 9th Feb'2012<br>
Stall No: ZN 18
India Pavalion <br>
International Exhibition Centre,
Dubai, UAE</span>
</figcaption>
</figure>
</div>
</li>-->
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<!--<li class="list_item col-lg-4 col-md-4 col-sm-4 2011">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="img/portfolio/portfolio_5.png" alt="" />
<div class="hovers">
</i>
<i class="fa fa-link"></i>
</div>
</div>
<figcaption class="item-description">
<h5>Middle East Electricity 2011</h5>
<span>Date : 8th - 10th Feb'2011<br>
Stall No: ZQ 58,
India Pavalion <br>
International Exhibition Centre,
Dubai, UAE</span>
</figcaption>
</figure>
</div>
</li>-->
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2010">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2010-1.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!--<i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2010</h5>
<span>Date : 20th - 24th Jan'2010<br>
Stall No: H1 G50<br>
Bombay Exhibition Centre,
Mumbai, INDIA</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2010">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2010-2.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!-- <i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2010</h5>
<span>Date : 20th - 24th Jan'2010<br>
Stall No: H1 G50<br>
Bombay Exhibition Centre,
Mumbai, INDIA</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<li class="list_item col-lg-4 col-md-4 col-sm-4 2010">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="images/events/2010-3.jpg" alt="" />
<div class="hovers">
<i class="fa fa-search"></i>
<!-- <i class="fa fa-link"></i>-->
</div>
</div>
<figcaption class="item-description">
<h5>Elecrama 2010</h5>
<span>Date : 20th - 24th Jan'2010<br>
Stall No: H1 G50<br>
Bombay Exhibition Centre,
Mumbai, INDIA</span>
</figcaption>
</figure>
</div>
</li>
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<!--<li class="list_item col-lg-4 col-md-4 col-sm-4 responsive">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="img/portfolio/portfolio_7.png" alt="" />
<div class="hovers">
</i>
<i class="fa fa-link"></i>
</div>
</div>
<figcaption class="item-description">
<h5>consectetur adipisicing</h5>
<span>Technology</span>
</figcaption>
</figure>
</div>
</li>-->
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<!--<li class="list_item col-lg-4 col-md-4 col-sm-4 branding">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="img/portfolio/portfolio_8.png" alt="" />
<div class="hovers">
</i>
<i class="fa fa-link"></i>
</div>
</div>
<figcaption class="item-description">
<h5>ipsum dolor</h5>
<span>Technology</span>
</figcaption>
</figure>
</div>
</li>-->
<!-- End Portfolio item -->
<!-- Begin Portfolio item -->
<!--<li class="list_item col-lg-4 col-md-4 col-sm-4 branding">
<div class="recent-item">
<figure>
<div class="touching medium">
<img src="img/portfolio/portfolio_9.png" alt="" />
<div class="hovers">
</i>
<i class="fa fa-link"></i>
</div>
</div>
<figcaption class="item-description">
<h5>lorem ipsum</h5>
<span>Technology</span>
</figcaption>
</figure>
</div>
</li>-->
<!-- End Portfolio item -->
</ul> <!--end portfolio_list -->
</div>
Adding the Image from view code
enter image description here

Answer 1

I think you need 2 repeater if you are using ASP.NET(aspx and ascx)
1) for displaying year as a tab
2) another repeater for displaying images with details
Step-to-follow
1) Have this all data in dataset set in session
2) get distinct year and add default tab as 'All' and bind this year data to Repeater as horizontal, each repeater cell contains the link button and on click you have to redirect to server and get the filtered records from the session dataset and show it on 2nd repeater
2)on each 1st repeater-link button click event- get the year and filter out the records from session database and create in-memory dataset and fill it and bind it to 2nd dataset

Answer 2

I finally figured out the reason for it.
<ul id="filter" class="option-set clearfix">
<li data-filter="*" class="selected"><a>All</a></li>
<asp:Repeater ID="rpYear" runat="server">
<ItemTemplate>
<li data-filter=".<%#Eval("Year") %>"><%#Eval("Year") %></li>
</ItemTemplate>
</asp:Repeater>
</ul>
In earlier Question i was missing anchor tag section ,so it was not able to target to repeater and also In this <%#Eval("Year") %> i missed out DOT(.) representing the class.