具有动态页数的 C# ASP.NET 服务器端轮播滑块答案

【问题标题】：C# ASP.NET Server Side Carousel Slider with Dynamic Number of Pages具有动态页数的 C# ASP.NET 服务器端轮播滑块
【发布时间】：2015-12-17 18:20:51
【问题描述】：

我目前正在使用服务器端轮播滑块，并且很难处理滑块的手动滚动。虽然，自动滑动正在使用 bootstrap css 和 js 的data-interval="5000" data-ride="carousel"。 我想知道如何使幻灯片像在客户端滚动中一样工作。我设法从服务器获取数据，但滑块控件<a href=""...next/> and prev 不起作用。

代码：

Slider.aspx

<asp:Panel runat="server" id="myCarousel" class="carousel slide" 
           data-interval="5000" data-ride="carousel">                  
              <ol class="carousel-indicators"></ol>                  
              <asp:Panel runat="server" ID="carousel_inner" class="carousel-inner">                                           
              </asp:Panel>
               <%--- These won't work.---%>
              <a class="left carousel-control" runat="server" href="#myCarousel" 
                 role="button" data-slide="prev" style="text-decoration:none;"><</a>
              <a class="right carousel-control" runat="server" href="#myCarousel" 
                 role="button" data-slide="next" style="text-decoration:none;">></a>
</asp:Panel>

Slider.aspx.cs

//Sample data
int items = 8;

//Initial class
static string cssclass = "active item";
protected void ShowSlides()
{
    DataTable dt = SlideManager.GetSlidesDynamically(items);
    Literal str = new Literal();
    str.Visible = true;
    str.Text = "<br/>";
    if (dt.Rows.Count > 0)
    {
        foreach (DataRow dr in dt.Rows)
        {
            Panel item = new Panel();
            item.Visible = true;
            item.CssClass = cssclass;            
            Literal img = new Literal();
            img.Visible = true;
            img.Text = "<img runat='server' " + 
                       "src='data:image/jpeg;base64," +
                        dr[0].ToString() + 
                       "' class='carouselImage' />";              
            item.Controls.Add(img);                
            Panel caption = new Panel();
            caption.Visible = true;
            caption.CssClass = "carousel-caption";
            Literal title = new Literal();
            title.Visible = true;
            title.Text = "<h3 runat='server'>" + dr[2].ToString() + "</h3>";
            Literal capt = new Literal();
            capt.Visible = true;
            capt.Text = "<p runat='server'>" + dr[3].ToString() + "</p>";
            caption.Controls.Add(title);
            caption.Controls.Add(capt);
            item.Controls.Add(caption);

            //Invoke all controls to slider
            carousel_inner.Controls.Add(item);
            cssclass = "item";    
        }
    }
}

【问题讨论】：

确保carousel div的id是myCarousel。在 ASP 中，ID 被更改。如果 ID 不同，则为轮播面板添加此行 ClientIDMode=static。
@JSantosh ClientIDMode=static 就像一个魅力。谢谢！
哦，发帖就是答案

标签： javascript c# jquery asp.net twitter-bootstrap

【解决方案1】：

确保 carousel div 的 id 为myCarousel。 在 ASP 中，ID 会发生变化。如果 ID 不同，则添加此行 ClientIDMode=static 用于轮播面板

【讨论】：