c# – 在内容滑块中从asp.net中的转发器加载数据？

发布时间：2020-12-15 22:15:55 所属栏目：百科来源：网络整理

导读：我正在创建一个内容滑块,在其中从asp.net的转发器控件中的表中获取信息.我能够加载数据,但当页面加载时,它不会给我频繁的加载方式.后来这开始顺利加载,但首先它显示包含在DataSet中的所有值,并且这些值一个接一个地显示. 语言：lang-js $("#slideshowinfo di

我正在创建一个内容滑块,在其中从asp.net的转发器控件中的表中获取信息.我能够加载数据,但当页面加载时,它不会给我频繁的加载方式.后来这开始顺利加载,但首先它显示包含在DataSet中的所有值,并且这些值一个接一个地显示.

语言：lang-js

$("#slideshowinfo > div:gt(0)").hide();
            setInterval(function () {
                $('#slideshowinfo > div:first')

                  .fadeOut(1000)
                  .next()
                  .fadeIn(1000)
                  .end()
                  .appendTo('#slideshowinfo');

            },10000);

.aspx

<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"),"Eligibility: ",Eval("Eligibility"),"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代码背后

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

在用户屏幕上呈现的输出

解决方法

虽然我建议使用现有的jQuery Slide Show插件,但我修改了一些代码以实现您实际需要的内容.我还使您可以在同一页面上显示多个幻灯片(但请注意,它们将同时旋转).我不认为我提供的JavaScript代码修改是生产级别的,但它们证明了这一点.请注意我添加了一些CSS以确保幻灯片的初始可见性显示窗格与页面加载时的对应关系.你需要修改一下Repeater代码,以解释我是否预先填充了幻灯片放映的第一个窗格的class属性(你需要确保在页面上物理填充class属性) .

在我提供的内容中,我已经删除了您的ASP.Net代码,以使我的示例更清晰.

这是代码：

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!