리피터 및 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를 통한 Databinding.

그래서 코드는이 일을해야

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

이

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

같이 변경하여 마크 업 할 수 있습니다. 테스트를 거쳤습니다.

질문에 jQuery 코드가 표시되지 않습니다. 기본적으로 위 코드는 페이지가로드 될 때 테이블의 상위 10 개 레코드를로드합니다. 올바른 데이터를 얻으려면 order by 절을 사용하여 쿼리를 업데이트해야 할 수도 있습니다.

동적으로 업데이트하는 뉴스 티커 (페이지를 다시로드하지 않고)를 원한다면 jQuery를 사용해야합니다. 처음에는 콘텐츠를로드 한 다음 javascript setInterval 함수를 사용하여 매초마다 ajax 호출을 실행하고 ajax 호출에서받은 데이터로 뉴스 티커를 다시로드하십시오.

다음은 jQuery ajax를 사용하여 동적으로 컨텐츠를로드하는 간단한 예제입니다.

는

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

그래서 위의 스크립트가 GetNewsITems로드 기능을 실행하여 setInterval 기능을 사용하여 페이지

<script type="text/javascript"> 

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

</script> 

에 아래 스크립트를 추가 데이터를 표시하는 페이지에서 사업부를 가지고 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에이 컨텐츠를로드하고있다.