Binding Repeater data to Dynamic tab in asp.net

0
votes

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">
                                                    <a href='<%# "FileUpload/Eventpic/"+ Eval("Image") %>' class="hover-zoom mfp-image" style="left: 45%;"><i class="fa fa-search"></i></a>
                                                    <!--<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                                </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"><a href="#">All</a></li>
                            <li data-filter=".2014"><a href="#">2014</a></li>
                            <li data-filter=".2012"><a href="#">2012</a></li>
                           <!-- <li data-filter=".2011"><a href="#">2011</a></li>-->
                            <li data-filter=".2010"><a href="#">2010</a></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">
                                                <a href="images/events/full/2014-1.jpg" class="hover-zoom mfp-image"  style="left:45%;"><i class="fa fa-search"></i></a>
                                                <!--<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="images/events/full/2014-2.jpg" class="hover-zoom mfp-image"  style="left:45%;"><i class="fa fa-search"></i></a>
                                                <!--<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="img/portfolio/full/portfolio_2.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
                                                <a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
                                            </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">
                                                <a href="images/events/full/2012-1.jpg" class="hover-zoom mfp-image"  style="left:45%;"><i class="fa fa-search"></i></a>
                                                <!--<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="images/events/full/2012-2.jpg" class="hover-zoom mfp-image"  style="left:45%;"><i class="fa fa-search"></i></a>
                                                <!--<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="images/events/full/2012-3.jpg" class="hover-zoom mfp-image"  style="left:45%;"><i class="fa fa-search"></i></a>
                                                <!--<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="img/portfolio/full/portfolio_4.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
                                                <a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
                                            </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">
                                                <a href="img/portfolio/full/portfolio_5.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
                                                <a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
                                            </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">
                                                <a href="images/events/full/2010-1.jpg" class="hover-zoom mfp-image"  style="left:45%;"><i class="fa fa-search"></i></a>
                                                <!--<a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="images/events/full/2010-2.jpg" class="hover-zoom mfp-image" style="left:45%;"><i class="fa fa-search"></i></a>
                                               <!-- <a href="portfolio_single.html" class="hover-link alone"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="images/events/full/2010-3.jpg" class="hover-zoom mfp-image"  style="left:45%;"><i class="fa fa-search"></i></a>
                                               <!-- <a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>-->
                                            </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">
                                                <a href="img/portfolio/full/portfolio_7.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
                                                <a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
                                            </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">
                                                <a href="img/portfolio/full/portfolio_8.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
                                                <a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
                                            </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">
                                                <a href="img/portfolio/full/portfolio_2.png" class="hover-zoom mfp-image" ><i class="fa fa-search"></i></a>
                                                <a href="portfolio_single.html" class="hover-link"><i class="fa fa-link"></i></a>
                                            </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

2
asp.net
Your code seems correct. What happen when you run that? – INDIA IT TECH
@Piyush Khatri . when i run the code the images are populated according to the last and latest year .in the image the latest year was 2012 ,so it shows only that pics and data ,ignoring the 2010 data and also since <li> of all is outside the repeater only that shows the output. when i click on the respected year tab like when i click on 2012 tab..Images vanish. – Neerav Poriya
Also i feel it is due to Filter-item property. as in html file it usses class property to fetch the images and data and here i have replaced it with eval and i am not able to fetch data due to it – Neerav Poriya
Do you have html of your code? Please share it here. Because we need to construct repeater according to html so that your filter works. – INDIA IT TECH
@Piyush Khatri i have uploaded the html section in main question – Neerav Poriya

2 Answers

0
votes

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

0
votes

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") %>"><a href="#"><%#Eval("Year") %></a></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.