CODEWITHSUNDEEP
c#jqueryasp.net
RaviKant Hudda
RaviKant Hudda

Reputation: 1042

Loading data from repeater in asp.net in content slider?

I am creating a content slider in which information is fetched from table in asp.net's repeater control. I am able to load data but when page gets load it doesn't give me frequent way of loading. Later this starts to get load smoothly but very first it show the all value containing in DataSet and those are shown one upon other.

language: lang-js

$("#slideshowinfo > div:gt(0)").hide();
            setInterval(function () {
                $('#slideshowinfo > div:first')
                
                  .fadeOut(1000)
                  .next()
                  .fadeIn(1000)
                  .end()
                  .appendTo('#slideshowinfo');
                
            }, 10000);

.aspx Page

<div id="templatemo_banner_content">
                            <div id="slideshowinfo">
                                <asp:Repeater ID="rptrNewsUpdates" runat="server">
                                    <ItemTemplate>
                                <div>
                                   <div class="header_01"><asp:Label ID="lblNewsHeading" runat="server" Text='<% #Eval("OrgName") %>' /></div>
                                   <p><asp:Label Id="lblNewsDescription" runat="server" Text='<%# string.Concat("Last Date:  ",Eval("Last Date"),"<br/>","Total Post: ",Eval("TotalPost"),"<br/>","Eligibility: ",Eval("Eligibility"),"<br/>","Description: ",Eval("description")) %>' /></p>
                                    <div class="button_01"><asp:LinkButton ID="linkReadMore" runat="server" PostBackUrl='<%# Eval("url") %>'>Read more</asp:LinkButton></div>
                                </div>
                                        </ItemTemplate>
                                    </asp:Repeater>                             
                            </div>
                        </div>

.cs Code Behind

rptrNewsUpdates.DataSource = ds.Tables[0];
rptrNewsUpdates.DataBind();

Output rendered on user's screen enter image description here

Upvotes: 4

Views: 2003

Answers (1)

Lawrence
Lawrence

Reputation: 111

While I would recommend using an existing jQuery Slide Show plugin, I've modified some of your code to achieve what you're essentially looking for. I also made it possible for you to have multiple slide shows on the same page (be aware, though, that they will rotate at the same time). I wouldn't consider the JavaScript code modifications I've provided to be production-grade, but they demonstrate the point. Take note of the fact that I've added a bit of CSS to make sure that the initial visibility of the slide shows panes are as they should be right at the load of the page. You'd need to modify a bit of your Repeater code to account for the fact that I'm pre-populating the class attribute of the first pane of a slide show (you need to make sure the class attribute is populated physically on the page.

In what I've provided, I've stripped out your ASP.Net code to make my example clearer.

Here's the code:

<html>
<head>
  <!--these style rules should be moved to a separate file -->
  <style type="text/css">
    .slideshow .pane {
      display: none;
    }
    .slideshow .pane.active {
      display: block;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

  <!--
  This JS code should be moved to a separate file, and its purpose is simply to be instructive for answering the question
  by refining the JS supplied in the question.

  This modified code is not production grade.

  Assumptions:
  -If multiple slide shows on a page, they rotate at the same time
  -No slideshow controls.

  -->
  <script type="text/javascript">

  (function($) {

    setInterval(function () {
        var fadeSpeed = 1000;

        $(".slideshow").each(function(){
          var $this = $(this);
          var $activeSlide = $this.find('div.active');
          var $nextSlide = $activeSlide.next();

          if($nextSlide.length == 0) {
            $nextSlide = $this.find("div.pane:first");
          }

          $activeSlide.fadeOut(fadeSpeed, function() {
            $(this).removeClass("active");
            $nextSlide.fadeIn(fadeSpeed).addClass("active");
          });


        });


    }, 10000);

  })(jQuery);

  </script>
</head>

<body>
<h1>Slide Show Example</h1>

  <div id="templatemo_banner_content">
    <h2>Slide Show 1</h2>
        <div class="slideshow">
          <!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
          <div class="pane active">

              <div class="header_01">Org Name 1</div>
               <p>Description 1</p>
                <div class="button_01"><input type="button" value="Read More" /></div>
          </div>
          <div class="pane">

              <div class="header_01">Org Name 2</div>
               <p>Description 2</p>
                <div class="button_01"><input type="button" value="Read More" /></div>
          </div>

        </div>

      <h2>Slide Show 2</h2>

      <div class="slideshow">
        <!--insert ASP.Net Repeater code here in order to output each pane based on data in the datasource -->
        <div class="pane active">

            <div class="header_01">Org Name 3</div>
             <p>Description 3</p>
              <div class="button_01"><input type="button" value="Read More" /></div>
        </div>
        <div class="pane">

            <div class="header_01">Org Name 4</div>
             <p>Description 4</p>
              <div class="button_01"><input type="button" value="Read More" /></div>
        </div>

      </div>

</div>

</body>

</html>

Upvotes: 1

Related Questions