Scrolling back up with timer_问答_开发者_运维开发者技术经验分享

I created a chat application. When ever I add something to textbox and click on enter text add to the databinder and scroll bar goes up. I used a javascript to scroll down on click which is working fine but due to timer, the scroll bar is moving back to top the soon its dra开发者_如何转开发gged down. My code follows

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

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
        {

        }
    }
}

You will get a better result if you move the div kdiv1 around the UpdatePanel instead of inside:

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

The problem with the current situation is that the div kdiv1 itself will be replaced after each partial postback, and all its state (like scroll positions) will be lost.

However, even after this change, you would still have the problem that the line(s) that are added after the partial postback will not be within the visible area, because these new lines will be added after the last call to scrolldown('kdiv1').

To solve this, you could register a function to be called every time a partial postback happened. You do this by adding the following javascript to the header of the page:

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

Note: In my examples I wrote "scrolldown" instead of "scrooldown", since I assume this is a typo.