如何在 ASP 网络上使用中继器数据绑定进行引导轮播幻灯片

Question

我从 sharepoint 2013 获取项目并通过中继器调用它们。

<asp:Repeater ID="repeater_slideshow" runat="server">
     <ItemTemplate>
           <div class="<%# Container.ItemIndex == 0 ? "item active" : "item" %> row hidden-xs col-sm-12 slideshowItem">
                 <div class="wrapGallery col-sm-4">
                       <img class="img-responsive slideimage" src="<%# DataBinder.Eval(Container.DataItem, "Image") %>">
                       <div class="imgGalleryDescription">
                           <%# DataBinder.Eval(Container.DataItem, "HTMLField") %>
                       </div>
                 </div>
           </div>
     </ItemTemplate>
</asp:Repeater>

从代码隐藏中我只是得到列表，我在转发器上使用数据源和数据绑定方法：

Collection<HighLights> l = ContentHelper.ExecuteQuery<HighLights>(Portal.Lists.Highlight, ServerRelativeURL);                
this.repeater_slideshow.DataSource = l;
this.repeater_slideshow.DataBind();

在我的列表中有 3 个项目，在输出中，幻灯片仅显示每张幻灯片 1 个项目，而不是所有 3 个项目...经过一些谷歌搜索后，我发现我必须使用转发器内的转发器项目数据绑定来自我向您展示的上面的代码（中继器内的中继器）...问题是我不知道如何使用中继器 itemdatabound... 以及如何使列表中的 3 个项目出现在每张幻灯片上，而不是只显示 1 个项目！！！ 任何帮助表示赞赏

PS：抱歉，如果这是转载。

编辑： 找到了解决方案:-)

<asp:Repeater ID="repeater"runat="server"OnItemDataBound="repeater_ItemDataBound">
                    <ItemTemplate>
                        <div class="<%# Container.ItemIndex == 0 ? "item active" : "item" %> row col-sm-12 slideshowItem">
                            <asp:Repeater ID="repeater_slideshow" runat="server">
                                <ItemTemplate>
                                    <div class="col-sm-4">
                                        <div class="wrapGallery">
                                            <img class="img-responsive slideimage" src="<%# DataBinder.Eval(Container.DataItem, "Image") %>">
                                            <div class="imgGalleryDescription">
                                                <%# DataBinder.Eval(Container.DataItem, "HTMLField") %>
                                            </div>
                                        </div>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>

代码隐藏：

如果 (!this.IsPostBack) {

            Collection<HighLights> d = ContentHelper.ExecuteQuery<HighLights>(Portal.Lists.Highlight, ServerRelativeURL);
              if (d != null && d.Count > 0)
            {
                this.Visible = true;

                int num1 = d.Count;
                int num2 = 3;
                decimal result = Convert.ToDecimal(num1) / Convert.ToDecimal(num2);

                int quociente = (int)Math.Ceiling(result);

                List<int> list = new List<int>(); ;

                for (int i = 1; i <= quociente; i++)
                {
                    list.Add(i);
                }
                this.repeater.DataSource = list;
                this.repeater.DataBind();

            }

上面的代码在page_load里面；

页面加载后：

  protected void repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {

            Collection<HighLights> l = ContentHelper.ExecuteQuery<HighLights>(Portal.Lists.Highlight, ServerRelativeURL);
            Repeater rpt = e.Item.FindControl("repeater_slideshow") as Repeater;

            int aux = (int)e.Item.DataItem * 3;

            if (aux <= 3)
            {
                rpt.DataSource = l.Take(3);
            }

            else
            {
                rpt.DataSource = l.Skip(aux - 3).Take(3);
            }

            rpt.DataBind();
        }
    }

Answer 1

我曾经在 SharePoint 2010 中做过同样的事情，我实际上使用了 bxslider，它是让您定义每张幻灯片的元素数量的滑块（因此不需要中继器内部的中继器）。

这是我的中继器代码：

<div id="slider" class="slider1">
       <asp:Repeater ID="repeater_slideshow" runat="server">
              <ItemTemplate>
                    <div class="slide">
                           // 1 item here
                   </div>
             </ItemTemplate>
        </asp:Repeater>
 </div>

希望对你有帮助！