asp.net聊天室小程序练习

原创

徐的张 2022-11-11 11:12:28 博主文章分类：asp.net ©著作权

文章标签 asp.net vs2010 html css xml 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者徐的张的原创作品，请联系作者获取转载授权，否则将追究法律责任

登录界面如图：

asp.net聊天室小程序练习_html

_login.aspx代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="_login.aspx.cs" Inherits="_login" %>

<!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>
    <script type="text/javascript">//用于检测用户名不为空；
        function checkUID() {
            var _result = false;
            var _txt = document.getElementById("txt_uid");
            if (_txt.value != null) { _result = true; }
            return _result;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" defaultbutton="btn_login" 
    defaultfocus="txt_uid">
    <div>
    请输入用户名：<asp:TextBox ID="txt_uid" runat="server"></asp:TextBox><asp:Button ID="btn_login"
        runat="server" Text="登录" OnClientClick="Return checkUID" 
            οnclick="Button1_Click" />
    </div>
    </form>
</body>
</html>

_login.aspx.cs代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _login : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Session["uid"] = txt_uid.Text;
        Server.Transfer("_room.aspx");
    }
}

登录成功后的页面如图：

asp.net聊天室小程序练习_vs2010_02

_room.aspx代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="_room.aspx.cs" Inherits="_room" %>

<!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"><%--css--%>
        .pnl1
        { border:2px solid #dedede;
          padding:5px;
    </style>
</head>
<body>
    <form id="form1" runat="server" defaultbutton="Button1" defaultfocus="TextBox1">
    <div>
        <asp:Panel ID="Panel1" runat="server" Width="600px" Height="400px" ScrollBars="Vertical" CssClass="pnl1">
        </asp:Panel>
        <asp:Panel ID="pan_ctl" runat="server" Width="600px" CssClass="pnl1">
        
        <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="发送" οnclick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="退出聊天室" οnclick="Button2_Click" />
        </asp:Panel>
    </div>
    </form>
</body>
</html>

_room.aspx.cs代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _room : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["uid"] == null)
        {
            Response.Redirect("_login.aspx");
        }
        if (Application["chat"] == null)
        {
            Application["chat"] = new Panel();
        }
        Panel1.Controls.Add((Panel)Application["chat"]);


    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Session.Remove("uid");
        Response.Redirect("_login.aspx");

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label _uid = new Label();
        _uid.Text = Session["uid"].ToString();

        Label _dt = new Label();
        _dt.Text = DateTime.Now.ToLongTimeString();

        Label _words = new Label();
        _words.Text = TextBox1.Text;

        Literal lbr = new Literal();
        lbr.Text = "<br/>";

        Application.Lock();
        ((Panel)Application["chat"]).Controls.AddAt(0, lbr);//逆序插入
        ((Panel)Application["chat"]).Controls.AddAt(0, _words);
        ((Panel)Application["chat"]).Controls.AddAt(0, _dt);
        ((Panel)Application["chat"]).Controls.AddAt(0, _uid);
        Application.UnLock();
        TextBox1.Text = "";
    }
}

效果如图所示：

asp.net聊天室小程序练习_xml_03

鉴于无法自动刷新聊天窗，我们引入iframe

asp.net聊天室小程序练习_css_04

代码改动如下：

_room.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="_room.aspx.cs" Inherits="_room" %>


<!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"><%--css--%>
        .pnl1
        { border:2px solid #dedede;
          padding:5px;
    </style>
</head>
<body>
    <form id="form1" runat="server" defaultbutton="Button1" defaultfocus="TextBox1">
    <div>
    <iframe src="_roomcontent.aspx" width="600px" height="400px"></iframe><%--//加入iframe--%>
        <%--<asp:Panel ID="Panel1" runat="server" Width="600px" Height="400px" ScrollBars="Vertical" CssClass="pnl1">
        </asp:Panel>--%>
        <asp:Panel ID="pan_ctl" runat="server" Width="600px" CssClass="pnl1">
        
        <asp:TextBox ID="TextBox1" runat="server" Width="300px"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="发送" οnclick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="退出聊天室" οnclick="Button2_Click" />
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem Value="red">红色</asp:ListItem>
                <asp:ListItem Value="green">绿色</asp:ListItem>
                <asp:ListItem Value="yellow">黄色</asp:ListItem>
            </asp:DropDownList>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

_room.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _room : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["uid"] == null)
        {
            Response.Redirect("_login.aspx");
        }
        //if (Application["chat"] == null)
        //{
           // Application["chat"] = new Panel();
       // }
        //Panel1.Controls.Add((Panel)Application["chat"]);


    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Session.Remove("uid");
        Response.Redirect("_login.aspx");

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label _uid = new Label();
        _uid.Text = Session["uid"].ToString();

        Label _dt = new Label();
        _dt.Text = DateTime.Now.ToLongTimeString();

        Label _words = new Label();
        _words.Style.Add("color", DropDownList1.SelectedValue);
        _words.Text = TextBox1.Text;

        Literal lbr = new Literal();
        lbr.Text = "<br/>";

        Application.Lock();
        ((Panel)Application["chat"]).Controls.AddAt(0, lbr);//逆序插入
        ((Panel)Application["chat"]).Controls.AddAt(0, _words);
        ((Panel)Application["chat"]).Controls.AddAt(0, _dt);
        ((Panel)Application["chat"]).Controls.AddAt(0, _uid);
        Application.UnLock();
        TextBox1.Text = "";
    }
}

_roomcontent.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="_roomcontent.aspx.cs" Inherits="_roomcontent" %>

<!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">
<meta http-equiv="refresh" content="1" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="holder" runat="server">
    
    </div>
    </form>
</body>
</html>

_room.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _roomcontent : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Application["chat"] == null) {
            Application["chat"] = new Panel();
        }
        holder.Controls.Add((Panel)Application["chat"]);
    }
}

效果如图所示：

asp.net聊天室小程序练习_asp.net_05