c# – 使用计时器滚动备份

发布时间：2020-12-15 21:23:53 所属栏目：百科来源：网络整理

导读：我创建了一个聊天应用程序当我向文本框添加内容并单击输入文本时添加到数据库并滚动条上升.我使用 javascript向下滚动点击哪个工作正常但由于计时器,滚动条移动到顶部很快被拖下来.我的代码如下 %@ Page Language="C#" AutoEventWireup="true" CodeFile="Def

我创建了一个聊天应用程序当我向文本框添加内容并单击输入文本时添加到数据库并滚动条上升.我使用 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
        {

        }
    }
}

解决方法

如果您在UpdatePanel周围而不是在内部移动div kdiv1,您将获得更好的结果：

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

当前情况的问题是div kdiv1本身将在每次部分回发后被替换,并且其所有状态(如滚动位置)将丢失.

但是,即使在此更改之后,您仍然会遇到在部分回发之后添加的行不在可见区域内的问题,因为这些新行将在最后一次调用scrollldown之后添加(‘kdiv1 “).

要解决此问题,您可以在每次发生部分回发时注册要调用的函数.您可以通过将以下javascript添加到页面标题来执行此操作：

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

注意：在我的例子中,我写了“scrolldown”而不是“scrooldown”,因为我认为这是一个错字.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!