2011-09-16 9 views
4

私はチャットアプリケーションを作成しました。これまでにテキストボックスに何かを追加し、テキストを入力すると、データバインダーに追加され、スクロールバーが表示されます。私は、うまく動作しているクリックをスクロールするためにjavascriptを使用しましたが、タイマーのために、スクロールバーはすぐにドラッグされてすぐに先頭に移動しています。私のコードは次のタイマーでスクロールアップ

<%@ 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

非常にうまくクライアント側の問題かもしれませんが、私はあなたが適切なすべてのラベルでタグを付けることで答えを見つけることをお勧めします。 「データバインダー」について話し始めると、私はそれが何をしているのか分からないので、私の目は釉薬をかぶってしまいます。 :) – jimbojw

答えて

1

あなたが内部の代わりにUpdatePanel周りのdiv kdiv1を移動する場合は、より良い結果を得るでしょう:

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

現在の問題点状況によっては、kdiv1というdiv自体が各部分的なポストバックの後に置き換えられ、すべての状態(スクロール位置のような)は失われます。

ただし、この変更を行っても、部分的なポストバック後に追加された行は、最後の呼び出し後に追加されるため、表示領域内には表示されません。 scrolldown('kdiv1')

これを解決するには、部分的なポストバックが発生するたびに呼び出される関数を登録することができます。あなたは、ページのヘッダーに次のJavaScriptを追加することでこれを行う:

<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'コードをより具体的にするために私の応答を更新しました。 –

関連する問題