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

Question

我有一个使用 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();

Answer 1

在您的代码中，您将转发器控制器与 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());
 }

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