News ticker using a Repeater and Jquery

问题

I have a ticker which uses a jquery and a Repeater.But I only get the last updated record of the 10 new_Feed table.This is the Source and the Code behind.

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

In your code, you are binding your repeater controller with a DataTable and then doing an ExecuteReader query and looping thru the result set again. That is not needed. You need either one of those. Either the Databinding via the DataTable or the Datareader.

So your code can be changed like this

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();
}

and in your markup

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

This should work. It is tested.

I don't see any jQuery code in your question. Basically the above code will load the top 10 records in the table when your page loads. You may need to update the query with an order by clause to get the correct data.

If you really want to have some kind of dynamically updating news ticker ( without reloading the page), you should use jQuery to do that. Load your content initially, then using javascript setInterval function do execute an ajax call in every n seconds and reload the news ticker with the data received from the ajax call.

Here is a simple, but working example for loading content dynamically using jQuery ajax.

Have a div in your page to show the data

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

Add the below script to your page

<script type="text/javascript">

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

</script>

So the above script is using setInterval function to execute the GetNewsITems function to load the data every 5 seconds.It calls a file called newsfeed.ashx for the data So create a generic handler caleld newsfeed.ashx and replace the code in ProcessRequest method with the below one

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());
 }

The generic handler will return the markup of a UL element with 10 items from the table. we are loading this content in to the div using the jQuery load method.

来源：https://stackoverflow.com/questions/9959701/news-ticker-using-a-repeater-and-jquery

标签

jquery

ASP.NET

repeater

ticker