5-15、16、17 实例-简易聊天室

panel在页面中呈现的是div标签，label在 页面中呈现span标签；

在panel中插入span：

运行效果：

不足：两个label的内容是并排的；

literal控件，按照下列方法添加，在页面中以标签<br>的形式体现：

因此，改进后的代码为：

运行效果图：

新的问题：

上面的添加标签的方法，后添加的标签放在下面，而我们要做的聊天室，后出现的对话要放在上面；

解决思路：

其中，Panel1.Controls.Add(index, control)这个方法，index置零，表示头插，control是要插入的控件；

效果图：

对用户操作习惯的考虑：

当一个页面中有很多的按钮，如何实现用户按下回车，点击的就是期望的按钮，以及当有很多文本框时，光标默认在哪个文本框当中，方法如下：

首先，打开form控件的属性：

DefaultButton：表示默认选中的按钮；

DefaultFocus：表示默认选中的文本框；

登陆逻辑分析：

1、进入登陆页面，输入用户名，如果输入正确，则跳转到聊天页面，否则继续输入用户名；

2、登录时，用户可能直接跳过登陆页面而转向聊天页面，此时，聊天页面检测该登录名是否存在，如果不存在，则踢回登陆页面；

3、

聊天室开发具体过程及代码:

首先，建立一个工程，在工程中建立两个页面_login和_room;

在_login页面中完成以下内容：

相关代码：

注意在Button1控件中，加入OnClientClick事件，用于接收checkUID的返回值，checkUID函数使用JavaScript写的；

checkUID函数的定义：

要注意，该函数要在源代码中完成（客户端），不要放在控件中完成，因为源代码是在客户端执行，而控件代码是由服务器执行。因此，文本框检测功能是在客户端完成的；

当文本框中含有登录名时，点击登陆按钮，要完成以下功能：

将用户信息保存在Session["uid"]当中，再将页面跳转到_room主页；

要通过Server.Transfer这种方式进行页面的跳转，以便对用户隐藏访问路径；

在_room页面中完成以下内容：

在_room页面加载时，首先做如下的判断：

room页面：

上面为聊天内容，下面为聊天面板；

将整个聊天内容作为panel控件存放在application对象中，可实现多用户的访问；

当聊天面板有新内容时，将新内容添加到panel控件中，再将panel控件存放在application对象中；

注意panel的scrollbars属性，当设置为vertical时，为纵向滚动条；

在_login中，meta标签要放在head标签内，title标签上方：

每隔三秒进行一次本页刷新；

在_login页面中添加如下后台代码：

这样，通过页面刷新，每个三秒钟，时间被刷新一次； 

在_room页面中进行如下页面设置：

在退出聊天按钮中做如下配置：

对上面的panel进行样式设定：

下面panel样式的设定：

上面panel设定纵向滚动条以及高度固定：

运行效果图：

login页面：

点登陆按钮后运行效果图：

改进：

对于Web控件而言，通过控件属性来修改控件的样式，操作较为麻烦，可以通过使用CSS属性修改样式：

我们将上下两个panel都设置为pnl1，然后通过设置pnl1的样式来设置两个panel，方法如下：

接下来定义pnl1的样式（在_room主页中定义pnl1的样式），如下：

在head中，title下方定义pnl1的样式：

改进后的样式：

接下来考虑，当我们的_room页面第一次载入的时候，即PageLoad事件发生的时候，要把application的内容直接放到panel1当中：

这样，通过这段代码，每次载入_room页面，都会执行最后一条指令，将panel添加到panel1当中；

接下来，在_room页面的发送按钮中，完成以下几个任务：

将用户名、时间、交流内容添加到panel当中，也就是application["chat"]这个panel当中去。首先我们用三个label控件来接收这些信息，代码如下：

至此，将该设置的内容进行设置：

首先，将_room中的form1的属性进行设置：

给页面添加定时页面刷新功能：

在_room页面中做如下处理：

由此，页面五秒钟进行一次刷新；

meta刷新的缺点，属于全局刷新，服务器返回一个全新的页面：

对于我们聊天室而言，需要刷新的只有上面的panel，因此，可以将panel改成iframe，然后将application["chat"]放到iframe子页当中去，这样实现了局部的刷新；

iframe下面存在一个_roomContent.aspx子页，因此刷新对母页没有影响；

首先，将上面的panel删除掉，并添加iframe，在_room主页中，实现如下：

将与panel1相关的内容屏蔽掉：

 

然后在网站中添加一个新的页面，_roomContent:

在这个页面中，每次PageLoad时都要读取并且显示Application["chat"]中的内容，实现如下：

我们将Application["chat"]放在主层当中，先给主层命名：

刷新页面：

在_roomContent页面中添加如下代码：