2011-09-16 5 views
4

채팅 응용 프로그램을 만들었습니다. 텍스트 상자에 뭔가를 추가하고 텍스트 입력을 클릭하면 데이터 바인더에 추가되고 스크롤 막대가 올라갑니다. 자바 스크립트를 사용하여 잘 작동하는 클릭을 아래로 스크롤했지만 타이머로 인해 스크롤 막대가 곧 맨 아래로 드래그됩니다. 내 코드는 다음과위로 스크롤하여 타이머를

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
<style type="text/css"> 
#kdiv1 
{ 
    position:relative; 
    left:300px; 
    top:20px; 
    height:400px; 
    width:400px; 
    overflow:auto; 
} 
#kdiv2 
{ 
    position:relative; 
    top:100px; 
    left:300px; 
} 
</style> 
    <script type="text/javascript"> 
    function scrooldown(div) { 
     var scrollDiv = document.getElementById(div); 
     scrollDiv.scrollTop = scrollDiv.scrollHeight; 
     scrollDiv = null; 
    } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server" defaultfocus="text"> 
    <div> 
     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> 

     </asp:ScriptManager> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true" RenderMode="Block"> 
     <Triggers> 
     <asp:AsyncPostBackTrigger ControlID="button1" EventName="Click" /> 
     </Triggers> 
     <ContentTemplate> 
     <div id="kdiv1"> 
      <asp:Repeater ID="Repeater1" runat="server"> 
      <ItemTemplate> 
      <span> 
      <%# DataBinder.Eval(Container.DataItem, "Message") %> <br /> 
      </span> 
      </ItemTemplate> 
      </asp:Repeater> 
     </div> 
      <div id="kdiv2"> 
      <asp:TextBox ID="text" runat="server"/> 
      <asp:Button ID="button1" runat="server" onclick="button1_Click" OnClientClick="scrooldown('kdiv1')" /> 
      </div> 
     </ContentTemplate> 
     </asp:UpdatePanel> 
     </div> 
    </form> 
</body> 
</html> 

C# 코드

protected void button1_Click(object sender, EventArgs e) 
    { 
     string MyConString = "DRIVER={MySQL ODBC 3.51 Driver};" + "SERVER=localhost;" + "DATABASE=chatserver;" + "UID=root;" + "PASSWORD=********;" + "OPTION=3"; 
     OdbcConnection MyConnection = new OdbcConnection(MyConString); 
     try 
     { 
      OdbcCommand cmd = new OdbcCommand("INSERT INTO shoutbox(name, message)VALUES(?, ?)", MyConnection); 
      cmd.Parameters.Add("@email", OdbcType.VarChar, 255).Value = "something"; 
      cmd.Parameters.Add("@email", OdbcType.Text).Value = text.Text; 
      MyConnection.Open(); 
      cmd.ExecuteNonQuery(); 
      MyConnection.Close(); 
     } 
     catch 
     { 
     } 
     try 
     { 
      MyConnection.Open(); 
      OdbcCommand cmd = new OdbcCommand("Select message from shoutbox", MyConnection); 
      OdbcDataReader dr = cmd.ExecuteReader(); 
      ArrayList values = new ArrayList(); 
      while (dr.Read()) 
      { 
       string ep = dr[0].ToString(); 
       values.Add(new PositionData(ep)); 
      } 
      Repeater1.DataSource = values; 
      Repeater1.DataBind(); 
      text.Text = ""; 
      UpdatePanel1.Update(); 
     } 
     catch 
     { 

     } 
    } 
} 
+0

누군가 C#으로 다시 태그를 답니다. 저는 privs가 없습니다. 고마워요. – jimbojw

+0

@jimbojw - C#이 내 문제에서 중요한 역할을한다고 생각하지 않습니다. 내 오류는 명확한 이해를 위해 클라이언트 쪽 오류입니다. C# 코드를 추가했지만 실제로는 오류가 수정되지 않습니다. – Mal

+1

아주 잘 클라이언트 측 문제 일지 모르지만, 당신은 모든 적절한 레이블로 태그를 추가하여 답을 찾는 것이 더 나을 것이라고 생각합니다. "databinder"에 대해 이야기하기 시작하자마자 내가하는 일이 무엇인지 모르기 때문에 내 눈이 반짝입니다. :) – jimbojw

답변

1

당신이 내 대신 UpdatePanel 주위 DIV kdiv1를 이동하는 경우 당신은 더 나은 결과를 얻을 것이다 :

<div id="kdiv1"> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true" RenderMode="Block"> 
     ... 
    </asp:UpdatePanel> 
</div> 

현재의 문제 상황은 div kdiv1 자체가 각 부분 다시 게시 후에 대체되며 모든 상태 (예 : 스크롤 위치)가 손실됩니다.

그러나이 변경 후에도 부분 다시 게시 이후에 추가 된 줄은 마지막 줄을 추가 한 후에 추가되기 때문에 보이는 영역 내에 있지 않을 수 있습니다. scrolldown('kdiv1').

이 문제를 해결하려면 부분 다시 게시가 발생할 때마다 호출 할 함수를 등록 할 수 있습니다. 당신은 페이지의 헤더에 다음 자바 스크립트를 추가하여이 작업을 수행 할 :

<script language="javascript"> 
    window.onload = function() 
    { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) { 
      scrolldown('kdiv1'); 
     }); 
    }; 
</script> 

참고 :이 오타 가정하기 때문에 내 경우에는 내가 직접하는 대신 "scrooldown"의 "scrolldown"를 썼다.

+0

굉장 ..! 어디에서 코드'window.onload'를 추가해야합니까? – Mal

+0

@Kars -'window.onload' 코드에 대한보다 구체적인 응답을 업데이트했습니다. –

관련 문제