Новостная лента с использованием Repeater и Jquery - PullRequest
Новая
       9

Новостная лента с использованием Repeater и Jquery

0 голосов
/ 01 апреля 2012

У меня есть тикер, который использует 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 Ответ

2 голосов
/ 01 апреля 2012

В своем коде вы связываете свой контроллер повторителя с 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 выполняйте вызов ajax каждые n секунд и перезагружайте новостную ленту с данными, полученными от вызова 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 элементами из таблицы.мы загружаем это содержимое в div, используя метод загрузки jQuery.

...