use bootstrap-4-carousel in asp repeater

Question

I try to use bootstrap-4-carousel as the example in the link bootstrap-4-carousel in asp: repeater so the image will bring form database. I try to select the image in normal function as follow

     SqlDataAdapter da;

        da = new SqlDataAdapter(@"select * from ImageTable
                                                order by NEWID()", constr);

    DataTable dt = new DataTable();
    da.Fill(dt);
    rptImages.DataSource = dt;
    rptImages.DataBind();

and also with paging like follow:

  public int CurrentPageEN
{
    get
    {
        if (this.ViewState["CurrentPageEN"] == null)
            return 0;
        else
            return Convert.ToInt16(this.ViewState["CurrentPageEN"].ToString());
    }

    set { this.ViewState["CurrentPageEN"] = value; }
}
private void doPagingEN()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("PageIndexEN");
    dt.Columns.Add("PageTextEN");
    for (int i = 0; i < pdsEN.PageCount; i++)
    {
        DataRow dr = dt.NewRow();
        dr[0] = i;
        dr[1] = i + 1;
        dt.Rows.Add(dr);
    }
    dlPagingEN.DataSource = dt;
    dlPagingEN.DataBind();

}
protected void BindDataEN()
{

    DataSet ds = new DataSet();
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd;
    con.Open();

    cmd = new SqlCommand(@"select * from imageTable  order by NEWID()", con);

    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    adp.Fill(dt);

    pdsEN.DataSource = dt.DefaultView;
    pdsEN.AllowPaging = true;
    pdsEN.PageSize = 4;
    pdsEN.CurrentPageIndex = CurrentPageEN;



 //   Repeater1.DataSource = pdsEN;
  //  Repeater1.DataBind();

    doPagingEN();


}
protected void dlPaging_ItemCommandEN(object source, DataListCommandEventArgs e)
{
    if (e.CommandName.Equals("lnkbtENagingEN"))
    {
        CurrentPageEN = Convert.ToInt16(e.CommandArgument.ToString());
        BindDataEN();
    }
}

and this is aspx code

<style>
    .blog .carousel-indicators {
        left: 0;
        top: auto;
        bottom: -40px;
    }

        /* The colour of the indicators */
        .blog .carousel-indicators li {
            background: #a3a3a3;
            border-radius: 50%;
            width: 8px;
            height: 8px;
        }

        .blog .carousel-indicators .active {
            background: #707070;
        }
</style>


<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row blog">
        <div class="col-md-12">
            <div id="blogCarousel" class="carousel slide" data-ride="carousel">

                <ol class="carousel-indicators">
                    <asp:Repeater ID="dlPagingEN" runat="server">
                        <ItemTemplate>
                            <li data-target="#blogCarousel" data-slide-to='<%#Eval("PageTextEN") %>'>
                                <asp:LinkButton ID="lnkbtENagingEN" runat="server" CommandName="lnkbtENagingEN" CommandArgument='<%#Eval("PageIndexEN")%>'></asp:LinkButton>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ol>
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <asp:Repeater ID="Repeater1" runat="server">
                                <ItemTemplate>
                                    <div class="col-md-3">
                                        <a href="#">
                                            <img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
                                        </a>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                        <!--.row-->
                    </div>
                </div>
                <!--.carousel-inner-->
            </div>
            <!--.Carousel-->

        </div>
    </div>
</div>

but whatever I did the slider not work as the example in the link. So please if anyone has a solution help me.

Thanks for everyone

We also need to see the ASPX side of things (i.e. the Repeater/HTML declaration) in order to help here. — Stephen Wrighton, Sep 24 '18 at 16:23

score 1 · Answer 1 · edited Aug 29 '19 at 04:47

I have found an asp.net and Bootstrap carousal solution

The trick is for the "IF" to identify the first index as "ACTIVE" then the others are added without the "ACTIVE"

<div id="carousel" class="carousel slide" data-ride="carousel">
 <div class=" container carousel-inner">
  <asp:Repeater ID="rpt_Propiedades" runat="server">
    <ItemTemplate>
      <div class="carousel-item  <%# (If(Container.ItemIndex = 0, "active", ""))%>">
                 <%# Eval("Nombre Columna") %>
    </div>
   </ItemTemplate>
  </asp:Repeater>
 </div>
</div>

score 0 · Answer 2 · answered Sep 25 '18 at 06:05

Basically what's happening is that you have one "slide" for the carousel, and are putting all the images into that one slide.

Now, the link provided at the top of the question has 3 small images per "slide" of the carousel. That's a bit more complicated in regards to the bound control, so let's step back and just get 1 image per slide to start.

To get 1 image, per slide, you'd want to modify the repeater aspx to work like this:

<div class="carousel-inner">
    <asp:Repeater ID="Repeater1" runat="server">
         <ItemTemplate>
              <div class="carousel-item">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>
          </ItemTemplate>
   </asp:Repeater>
</div>

The point there is that each slide is the div with the class of "carousel-item." By including it inside the ItemTemplate of the repeater that means that every image would be a single unique slide.

Now, for the dlPagingEn repeater, you will want to get rid of the linkbutton that's embedded in it. The concept is that all images for the slides should be included on the page, and the dlPagingEn control would allow for client-side access to the various slides. You shouldn't need to perform a round-trip to the server for this behavior.

Now for the bad news. Getting that Repeater to spit out the code for 3 images per slide like in the provided link is significantly harder. Probably the easiest way, and which I've alluded to in the repeater code shown below, is to include a function in the ItemTemplate. What that function needs to do is to keep track of the data item record number and for every 3rd image close the row and carousel-item divs and then re-open them.

<div class="carousel-inner">
    <asp:Repeater ID="Repeater1" runat="server">
         <headerTemplate>
             <div class="carousel-item">
               <div class="row">
         </headerTemplate>
         <ItemTemplate>
             <%# BuildCarouselItemSeperator() %>
              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>
          </ItemTemplate>
          <footerTemplate>
                  </div>
               </div>
          </footerTemplate>
   </asp:Repeater>
</div>

Now, if you can modify the SQL (either the query or the table itself), so that each row of the returned dataset that you're binding to the repeater has 3 distinct image records instead of one, this does become a lot easier. In that case, you would use the below style of repeater declaration:

<div class="carousel-inner">
    <asp:Repeater ID="Repeater1" runat="server">
         <ItemTemplate>
              <div class="carousel-item">
               <div class="row">
              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths_A")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>

              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths_B")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>

              <div class="col-md-3">
                   <a href="#">
                       <img src='<%#Eval("ImagePaths_C")%>' alt="Image" style="max-width: 100%;">
                   </a>
              </div>
                  </div>
               </div>
          </ItemTemplate>
   </asp:Repeater>
</div>

In truth, for getting the 3 images per slide, you may actually have a bit more luck building the HTML using StringBuilder in the code-behind and then putting that into a literal control than attempting to do it using the Repeater.

use bootstrap-4-carousel in asp repeater

2 Answers2