基于ASP.NET的简易聊天室的制作
摘要
适用软件Microsoft Visual Studio 2010，练习基本控件的使用、page_load事件页面、Session对象和Application对象的使用。
1.设计登陆界面
（1）新建_login.aspx，添加1个TextBox控件和1个Button控件。
（2）更改控件属性，书写JavaScript代码，_login.aspx的源代码。
<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 != "") { _result = true; }
else
return _result;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt_uid" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="登陆"
onclick="Button1_Click" onclientclick="return checkUID()"/>
</div>
</form>
</body>
</html>
（3）_login.asp.cs代码参考如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace _01_简易聊天室
{
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;
Server.Transfer("_room.aspx");
}
}
}
2.设计聊天界面
（1） 新建，_room.aspx文件，添加panel、text Box、Button、DropDownList控件
（2）_room.aspx源代码参考如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.pnl1
{
border:1px solid #dedede;
padding:5px;
}
</style>
</head>
<body>
<form id="form1" runat="server" defaultbutton="Button1" defaultfocus="TextBox1">
<div>
<iframe src="_roomcontent.aspx" width="750px" height="350px"></iframe>
<asp:Panel ID="pnl_ctl" runat="server" Width="741px" CssClass="pnl1">
<asp:TextBox ID="TextBox1" runat="server" Width="488px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="发送" onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="退出聊天" onclick="Button2_Click" />
<asp:DropDownList ID="ddl_color" runat="server" Height="16px" Width="83px">
<asp:ListItem Value="#666666">默认</asp:ListItem>
<asp:ListItem Value="red">红色</asp:ListItem>
<asp:ListItem Value="green">绿色</asp:ListItem>
<asp:ListItem Value="blue">蓝色</asp:ListItem>
</asp:DropDownList>
</asp:Panel>
</div>
</form>
</body>
</html>
（3）编写后台代码，_room.aspx.cs代码参考如下
protected void Page_Load(object sender, EventArgs e)
{
if (Session["uid"]== null)
{
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 _word = new Label();
_word.Style.Add("color", ddl_color.SelectedValue);
_word.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, _word);
((Panel)Application["chat"]).Controls.AddAt(0, _dt);
((Panel)Application["chat"]).Controls.AddAt(0, _uid);
Application.UnLock();
}
protected void Button2_Click(object sender, EventArgs e)
{
Session.Remove("uid");
Response.Redirect("_login.aspx");
}
3.iframe框架内容_roomcontent部分
（1）新建_roomcontent.aspx文件,修改源代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="holder" runat="server">
</div>
</form>
</body>
</html>
（2）编写后台代码，_roomcontent.aspx.cs代码参考如下
protected void Page_Load(object sender, EventArgs e)
{
if (Application["chat"] == null)
{
Application["chat"] = new Panel();
}
holder.Controls.Add((Panel)Application["chat"]);
}
4.页面运行参考效果
学习时间：
当前时间：2020.9.4
学习产出：1、课堂笔记 1 篇-简易聊天室的制作 2、 技术博客 1篇 3、聊天室项目文件1 个，下载地址如下https://download.csdn.net/download/qq_40795187/12809990
