基于Webform+ScriptManager控件实现的聊天室

刀下生刀下死

于 2022-02-09 23:01:50 发布

阅读量997

点赞数

文章标签： javascript html webform

本文链接：https://blog.csdn.net/Ayanamilove/article/details/122851569

版权

效果
在这里插入图片描述
后端

namespace 食堂管理系统
{
    public partial class Contact_stu : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)//初始化
            {
                if (Session["id"] == null)
                {
                    Response.Redirect("login.aspx");//不会影响布局
                }
                else
                {
                    Flush();
                }
            }
        }

        protected void Unnamed1_Tick(object sender, EventArgs e)//时钟刷新
        {
            Flush();
        }

        protected void Button1_Click(object sender, EventArgs e)//发送
        {
            if (TextBox2.Text == "" || TextBox2.Text.Contains("null"))
            {
                ClientScript.RegisterStartupScript(this.GetType(), "alt", $"alert('未输入回复内容/回复内容中不得含null！')", true);
            }
            else if (TextBox2.Text.Length >= 250)
            {
                ClientScript.RegisterStartupScript(this.GetType(), "alt2", $"alert('回复需在250字内！')", true);

            }
            else//插入评论
            {
                //得到数据
                string guid = Guid.NewGuid().ToString();
                string time = string.Format("{0:yyyy-MM-dd-HH-mm-ss}", DateTime.Now);
                string senderid = Session["id"].ToString();
                string sendername = Session["name"].ToString();
                string replyto = "none";
                string content = TextBox2.Text;
                Message entity = new Message(guid, time, senderid, sendername, replyto, content);
                new Message_DAL().Insert(entity);
                Flush();
                TextBox2.Text = "";
            }
        }

        protected void Button2_Click(object sender, EventArgs e)//手动刷新
        {
            Flush();
        }

        protected void Button3_Click(object sender, EventArgs e)//返回
        {
            Response.Redirect("Main_student.aspx");
        }

        private void Flush()//刷新，被调用
        {
            TextBox1.Text = "";
            foreach (var item in new Message_DAL().getlist(Session["id"].ToString()))
            {
                TextBox1.Text += item.ToString("student") + "\r\n";
            }           
        }

        protected void Button4_Click(object sender, EventArgs e)//启用或禁用自动刷新
        {
            if (Button4.Text == "禁用自动刷新")
            {
                Timer.Enabled = false;
                Button4.Text = "启用自动刷新";
            }
            else
            {
                Timer.Enabled = true;
                Button4.Text = "禁用自动刷新";
            }
        }

        protected void TextBox1_Load(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "test", "doFlush();", true);//不能用ClientScript——调用到记录的位置
            ScriptManager.RegisterStartupScript(this, this.GetType(), "test2", "record1();", true);//不能用ClientScript——定时器轮寻记录函数
        }
    }
}

前端

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Contact_stu.aspx.cs" Inherits="食堂管理系统.Contact_stu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" >
        var pretop;
        function doFlush() {
            //滚动条顶部 到 文本域顶部 的距离：scrollTop
            //文本域总高度：scrollHeight
            //document.all.TextBox1.scrollTop = document.all.TextBox1.scrollHeight;
            console.log(pretop);
            document.all.TextBox1.scrollTop = pretop;
            return false;
        }

        function record1() {//定时器轮训，保持聊天框位置
            window.setInterval("record2()", 100);//设立定时器
            return false;
        }

        function record2() {//不断保存聊天框位置
            pretop = document.all.TextBox1.scrollTop;
            console.log(pretop);//可以取得
        }
    </script>
</head>
<body onload="document.all.TextBox1.scrollTop = document.all.TextBox1.scrollHeight;">
    <form id="form1" runat="server">
        <h1 style="text-align: center;">联系客服</h1>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <table border="1" height="600px" width="100%">
            <tr height="25px">
                <td style="text-align: center;">
                    <asp:Label ID="Label1" runat="server" Text="这是和客服反馈和建议的地方"></asp:Label>
                </td>
            </tr>
            <tr height="375px">
                <td>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:Timer ID="Timer" runat="server" Interval="3333" OnTick="Unnamed1_Tick"></asp:Timer>
                            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="100%" Height="375px" Font-Size="X-Large" ReadOnly="True" OnLoad="TextBox1_Load">我是聊天内容</asp:TextBox>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr height="150px">
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="100%" Height="150px" Font-Size="Large">我是发送内容</asp:TextBox>
                </td>
            </tr>
            <tr height="50px" style="text-align: center;">
                <td>
                    <asp:Button ID="Button1" runat="server" Text="发送" OnClick="Button1_Click"/>
                    <asp:Label ID="Label2" runat="server" Text=" " Width="100px"></asp:Label>
                    <asp:Button ID="Button2" runat="server" Text="刷新" OnClick="Button2_Click" />
                    <asp:Label ID="Label3" runat="server" Text=" " Width="100px"></asp:Label>
                    <asp:Button ID="Button3" runat="server" Text="返回" OnClick="Button3_Click" />
                    <asp:Label ID="Label4" runat="server" Text=" " Width="100px"></asp:Label>
                    <asp:Button ID="Button4" runat="server" Text="禁用自动刷新" OnClick="Button4_Click" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>