locked
Trying dynamic carousel slider using repeater asp.net web forms RRS feed

  • Question

  • User-471420332 posted

    Below is my carousel slider inside repeater which is not working.

               <div class="col-md-4">
                      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                      <div class="upload-h4">
                      <h4>Mark Attendance</h4>
                      </div>
                      <div class="carousel-inner">
                      <asp:Repeater ID="Repeater_Attendance" runat="server">
    
                      <ItemTemplate>
                      <div class="item active">
                       <img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
                      <div class="carousel-caption caption-bg">
                      <div class="row">
                      <div class="col-md-12">
                      <div class="col-md-4">Submitted Date:</div>
                      <div class="col-md-8">01/11/2019</div>
                      <div class="col-md-4">Latitude:</div>
                      <div class="col-md-8">17.4428449</div>
                      <div class="col-md-4">Longitute:</div>
                      <div class="col-md-8">78.47995379999998</div>
                      <div class="col-md-4">Event Type:</div>
                       <div class="col-md-8">Mark Attendance</div>
    
                      </div>
    
                      </div>
    
                      </div>
                     </div>
                     </ItemTemplate>
                     <AlternatingItemTemplate>
                     <div class="item">
                     <img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
                     <div class="carousel-caption caption-bg">
                     <div class="row">
                     <div class="col-md-12">
                    <div class="col-md-4">Submitted Date:</div>
                     <div class="col-md-8">02/11/2019</div>
                     <div class="col-md-4">Latitude:</div>
                     <div class="col-md-8">17.4428449</div>
                      <div class="col-md-4">Longitute:</div>
                      <div class="col-md-8">78.47995379999998</div>
    
    
                      <div class="col-md-4">Event Type:</div>
                      <div class="col-md-8">Mark Attendance</div>
                      </div>
    
                      </div>
    
                       </div>
                    </div>
                   </AlternatingItemTemplate>
    
                   </asp:Repeater>
    
    
    
                    </div>
    
                   <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                 <span class="sr-only">Previous</span>
                    </a>
                 <a class="right carousel-control" href="#myCarousel" data-slide="next">
                 <span class="glyphicon glyphicon-chevron-right"></span>
                 <span class="sr-only">Next</span>
                 </a>
                  </div>
                </div>

    Below is my html slider which working fine.

       <div class="col-md-4">
                                     <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    
                                          <div class="upload-h4">
                                             <h4>Mark Attendance</h4>
                                           </div>
    
                                          <div class="carousel-inner">
    
                                                            <div class="item active">
                                              <img src="Trainer_Images/attendance1.jpg" class="img-responsive" alt="">
                                              <div class="carousel-caption caption-bg">
                                                 <div class="row">
                                                   <div class="col-md-12">
    
                                                       <div class="col-md-4">Submitted Date:</div>
                                                      <div class="col-md-8">01/11/2019</div>
    
                                                      <div class="col-md-4">Latitude:</div>
                                                      <div class="col-md-8">17.4428449</div>
                                                      <div class="col-md-4">Longitute:</div>
                                                      <div class="col-md-8">78.47995379999998</div>
                                                       <div class="col-md-4">Event Type:</div>
                                                      <div class="col-md-8">Mark Attendance</div>
    
                                                   </div>
    
                                                 </div>
    
                                               </div>
                                            </div>
    
                                            <div class="item">
                                              <img src="Trainer_Images/attendance2.jpg" class="img-responsive" alt="">
                                              <div class="carousel-caption caption-bg">
                                                 <div class="row">
                                                   <div class="col-md-12">
                                                       <div class="col-md-4">Submitted Date:</div>
                                                      <div class="col-md-8">02/11/2019</div>
                                                      <div class="col-md-4">Latitude:</div>
                                                      <div class="col-md-8">17.4428449</div>
                                                      <div class="col-md-4">Longitute:</div>
                                                      <div class="col-md-8">78.47995379999998</div>
    
    
                                                       <div class="col-md-4">Event Type:</div>
                                                      <div class="col-md-8">Mark Attendance</div>
                                                   </div>
    
                                                 </div>
    
                                               </div>
                                            </div>
    
    
                                          </div>
    
                                          <!-- Left and right controls -->
                                          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>
                                            <span class="sr-only">Previous</span>
                                          </a>
                                          <a class="right carousel-control" href="#myCarousel" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>
                                            <span class="sr-only">Next</span>
                                          </a>
                                        </div>
                                   </div>

    I am getting below image out when i will use using repeater but using html working fine.

    enter image description here

    Please help i am trying using repeater for dynamic fetching data of images please help to output this issue thank you very much.

    Monday, November 18, 2019 5:54 AM

Answers

  • User665608656 posted

    Hi mazhar,

    According to your description, what you need to know is that repeater is a control that binds data dynamically. You cannot assign fixed values directly, otherwise it will not display data.

    If your data is fixed , I suggest you use your work method instead of repeater, which will be simpler. If your data is dynamic, you can use the following code to realize the combination of repeater and dynamic carousel slider.

    If other data is also dynamic, you can add fields as needed.

      public class BindDataClass
        {
            public string src { get; set; }
    
            public string SubmittedDate { get; set; }
    
        }
    protected void Page_Load(object sender, EventArgs e)
            {
                List<BindDataClass> list = new List<BindDataClass>(){
                new BindDataClass { src ="../Images1/pic2.PNG",SubmittedDate="01/11/2019"},
                new BindDataClass { src ="../Images1/pic4.jpg",SubmittedDate="02/11/2019"},
                };
                Repeater_Attendance.DataSource = list;
                Repeater_Attendance.DataBind();
            }
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
     
    </head>
    <body>
        <form id="form1" runat="server"> 
            <div class="col-md-4">
                <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                    <div class="upload-h4">
                        <h4>Mark Attendance</h4>
                    </div>
                    <div class="carousel-inner">
                        <asp:Repeater ID="Repeater_Attendance" runat="server"> 
                            <ItemTemplate>
    <%-- This statement hides or displays the module by judging the index--%> <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>"> <img src='<%# Eval("src") %>' class="img-responsive" alt=""> <div class="carousel-caption caption-bg"> <div class="row"> <div class="col-md-12"> <div class="col-md-4">Submitted Date:</div> <div class="col-md-8"><%# Eval("SubmittedDate") %></div> <div class="col-md-4">Latitude:</div> <div class="col-md-8">17.4428449</div> <div class="col-md-4">Longitute:</div> <div class="col-md-8">78.47995379999998</div> <div class="col-md-4">Event Type:</div> <div class="col-md-8">Mark Attendance</div> </div> </div> </div> </div> </ItemTemplate> </asp:Repeater> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </form> </body> </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 19, 2019 3:14 AM

All replies

  • User-775646050 posted

    Use your browser's developer tools to inspect the html for the version that works and then compare to the one that doesn't. Usually these types of problems occur because the Asp.net controls add additional html or because they mess with the naming of your ids which breaks javascript/css.

    Monday, November 18, 2019 5:41 PM
  • User665608656 posted

    Hi mazhar,

    According to your description, what you need to know is that repeater is a control that binds data dynamically. You cannot assign fixed values directly, otherwise it will not display data.

    If your data is fixed , I suggest you use your work method instead of repeater, which will be simpler. If your data is dynamic, you can use the following code to realize the combination of repeater and dynamic carousel slider.

    If other data is also dynamic, you can add fields as needed.

      public class BindDataClass
        {
            public string src { get; set; }
    
            public string SubmittedDate { get; set; }
    
        }
    protected void Page_Load(object sender, EventArgs e)
            {
                List<BindDataClass> list = new List<BindDataClass>(){
                new BindDataClass { src ="../Images1/pic2.PNG",SubmittedDate="01/11/2019"},
                new BindDataClass { src ="../Images1/pic4.jpg",SubmittedDate="02/11/2019"},
                };
                Repeater_Attendance.DataSource = list;
                Repeater_Attendance.DataBind();
            }
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
     
    </head>
    <body>
        <form id="form1" runat="server"> 
            <div class="col-md-4">
                <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                    <div class="upload-h4">
                        <h4>Mark Attendance</h4>
                    </div>
                    <div class="carousel-inner">
                        <asp:Repeater ID="Repeater_Attendance" runat="server"> 
                            <ItemTemplate>
    <%-- This statement hides or displays the module by judging the index--%> <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>"> <img src='<%# Eval("src") %>' class="img-responsive" alt=""> <div class="carousel-caption caption-bg"> <div class="row"> <div class="col-md-12"> <div class="col-md-4">Submitted Date:</div> <div class="col-md-8"><%# Eval("SubmittedDate") %></div> <div class="col-md-4">Latitude:</div> <div class="col-md-8">17.4428449</div> <div class="col-md-4">Longitute:</div> <div class="col-md-8">78.47995379999998</div> <div class="col-md-4">Event Type:</div> <div class="col-md-8">Mark Attendance</div> </div> </div> </div> </div> </ItemTemplate> </asp:Repeater> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </form> </body> </html>

    Here is the result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 19, 2019 3:14 AM
  • User-471420332 posted

    i have three sliders in same page, i have added but next previous is not working for second and third sliders, because if i will do next and previous then first slider images are changing, next and previous for second and third logic?

    Tuesday, November 19, 2019 4:54 AM
  • User665608656 posted

    Hi mazhar, 

    For this issue, I hope you can check whether the href attribute corresponding to the next previous button of your second and third sliders corresponds to the ID of your current div.

       <div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="false">
                     <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel1" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel1" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>

    The div id of each sliders should be consistent with the href attribute of the next and previous button.

    Best Regards,

    YongQing.

    Tuesday, November 19, 2019 6:21 AM