使用Repeater和Jquery的新闻自动收报机

时间:2012-03-31 21:09:06

标签: jquery asp.net repeater ticker

我有一个使用jquery和Repeater的自动收报机。但我只获得了10个new_Feed表的最后更新记录。这是源和代码背后。

<ul id="js-news" class="js-hidden">
<li class="news-item">
    <asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
    <asp:Label ID="myLabel" runat="server" Text='<%# Eval("Text") %>' />
    </ItemTemplate>
    </asp:Repeater>
</li>
</ul>

 SqlConnection con = new SqlConnection(Constring);
    con.Open();
    SqlCommand cmd = new SqlCommand("select Text from News_Feed", con);

    SqlDataAdapter sqlDa = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sqlDa.Fill(dt);
    Repeater1.DataSource = dt;
    Repeater1.DataBind();
    SqlDataReader reader = cmd.ExecuteReader();

    while (reader.Read())
    {
        foreach (RepeaterItem ri in Repeater1.Items)
        {

            Label lbl = ri.FindControl("myLabel") as Label;

            string Text= reader["Text"].ToString();
            lbl.Text = Text;
        }


    }
    reader.Close();

1 个答案:

答案 0 :(得分:2)

在您的代码中,您将使用DataTable绑定转发器控制器,然后执行ExecuteReader查询并再次循环通过结果集。这不是必需的。你需要其中一个。通过DataTable或Datareader进行数据绑定。

所以你的代码可以像这样改变

using(SqlConnection con = new SqlConnection(ConString))
{
  SqlCommand cmd = new SqlCommand("select top 10 Text from News_Feed", con);
  SqlDataReader reader = cmd.ExecuteReader();
  Repeater1.DataSource = reader;
  Repeater1.DataBind();
}

和你的标记

<asp:Repeater ID="Repeater1" runat="server">
  <ItemTemplate>
   <asp:Label ID="myLabel" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Text")%>' />
  </ItemTemplate>
</asp:Repeater>

这应该有效。经过测试。

我的问题中没有看到任何jQuery代码。基本上,上面的代码将在页面加载时加载表格中的前10个记录。您可能需要使用order by子句更新查询以获取正确的数据。

如果你真的想要某种动态更新的新闻自动收录器(无需重新加载页面),你应该使用jQuery来做到这一点。最初加载你的内容,然后使用javascript setInterval函数每n秒执行一次ajax调用,并使用从ajax调用接收的数据重新加载新闻自动收报机。

这是一个简单但有效的示例,用于使用jQuery ajax动态加载内容。

在您的页面中有一个div来显示数据

<div id="divNews"></div>

将以下脚本添加到您的页面

<script type="text/javascript">

    $(function () {
        function GetNewsItems() {
            $("#divNews").load("newsfeed.ashx");
        }
        setInterval(function () { GetNewsItems() }, 5000);
    });

</script>

所以上面的脚本使用setInterval函数执行GetNewsITems函数,每隔5秒加载一次数据。它调用一个名为newsfeed.ashx的文件作为数据 因此,创建一个通用处理程序caleld newsfeed.ashx并将ProcessRequest方法中的代码替换为下面的

public void ProcessRequest(HttpContext context)
{
      context.Response.ContentType = "text/plain";
      StringBuilder str = new StringBuilder();
      str.Append("<ul>");
      using (SqlConnection con = new SqlConnection(ConString))
      {
            SqlCommand cmd = new SqlCommand("select Text from News_Feed ORDER BY ID DESC", con);
            SqlDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
             {
               str.Append("<li>"+reader.GetString(0)+"</li>");
             }
       }
       str.Append("</ul>");
       context.Response.Write(str.ToString());
 }

通用处理程序将返回表中包含10个项目的UL元素的标记。我们使用jQuery加载方法将此内容加载到div中。