将Repeater数据绑定到asp.net中的Dynamic选项卡

时间:2016-04-15 06:32:40

标签: asp.net

我想将转发器的数据绑定到我附加图像的年份的动态选项卡 enter image description here 转发器代码如下:                   

                <!--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>

代码隐藏文件如下:

protected void Page_Load(object sender,EventArgs e)     {         得到年();         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();
    }
}

我是asp.net的新手,非常友善。

提前致谢。

Html代码

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

从视图代码添加图片 enter image description here

2 个答案:

答案 0 :(得分:0)

如果您使用的是ASP.NET(aspx和ascx),我认为您需要2个转发器 1)用于显示年份作为选项卡 2)另一个用于显示带有细节的图像的转发器

步骤遵循的 1)在会话中设置数据集中的所有数据 2)获取不同年份并将默认选项卡添加为“全部”并将今年数据绑定到Repeater作为水平,每个转发器单元格包含链接按钮,点击后您必须重定向到服务器并从会话数据集中获取过滤后的记录并显示它在第二个中继器上

2)在每个第1个转发器 - 链接按钮单击事件 - 获取年份并过滤掉会话数据库中的记录并创建内存数据集并填充它并将其绑定到第2个数据集

答案 1 :(得分:0)

我终于找到了它的原因。

class

在之前的问题中,i缺少锚标记部分,因此它无法定位到转发器,也无法在此&lt;%#Eval(&#34; Year&#34;)%&gt;我错过了代表班级的DOT(。)。