Ajax开发实例教程.NET页面屏聊系统(2)_H5之家 - 中国HTML5教程资源分享第一站

【内容导航】

　　二、屏聊系统规划及介绍

　　采用Asp.NET Ajax开发屏聊系统相对于Asp+Ajax开发要相对简单得多，我们只需要像普通的Web编程一样，拖拖拽拽就可以将整个系统堆建起来，在前台我们也不需要写太多的Javascript代码，直接由框架生成就可以了，只是将传统.NET下的控件放在UpdatePanel控件里面，并为UpdatePanel设置一定的属性值，就可以实现局部区域的刷新。

　　1、屏聊系统界面区域结构

　　我们在《Ajax开发页面聊天系统》已经知道，页面屏聊系统的页面主要由两部分组成，一是最小化时的页面（AnchorCall1_Min），另一则是还原时的页面，我们这里称为最大化时的页面(AnchorCall1_Max)。为了便于大家的理解，懒羊在这将页面所要安排的UpdatePanel控件位置绘制如下(以下红框圈注部分为UpdatePanel控件)。

图三 UpdatePanel控件位置排布图

　　AnchorCall1_Min区域：

　　Min0区域：由一个IMG的Html控件与ImageButton控件构成，IMG通过JS代码将界面由最小化转为最大化界面。ImageButton控件来控制屏聊页面的关闭，并且停止屏聊程序的运行，稍后会作详细的介绍。

　　Min1区域：由一个Label控件构成，用于显示屏聊用户的提示信息，如登陆信息、改名信息等等。

　　AnchorCall1_Max区域：

　　Max0区域：与Min0区域相似，只是IMG控件是实现由最大化界面向最小化界面切换。

　　Max1区域：由两个ImageButton控件和一个TextBox控件构成。TextBox主要用于显示系统自动生成的呢称。而ImageButton一个为改名按扭，另一个将聊天记录生成为HTML文件。

　　Max2区域：本区域是整个系统的一个核心区域，主要用于显示聊天记录，由于聊天记录是定时刷新的，也就是定期会从服务器读取聊天信息并更新显示区域，我们显示聊天信息的区域采用一个可以多行的TextBox控件来显示，由于聊天信息量的增多，我们就会去拖动TextBox控件的滚动条，但因为我们会通过Ajax中的Timer控件来定期更新TextBox中的内容，因此TextBox中的滚动条会因此而不断的复位，而我们拖动时就会很不方便，出于人性化考虑我们还必须通过客户端代码来控制服务器端Timer控件的启用与停止，另外还有两个采用隐藏（style=display:none）的Button控件，主要是为了协助客户端肛码控制Timer控件的启用与停止，后面同样我们将重点介绍。提示信息区与Min1区相似为一个Label控件。

　　Max3区域：由一个ImageButton控件与TextBox控件构成。主要实现聊天信息的发送功能，本功能支持Alt+S。

更多热点：Photoshop教程 ASP入门教程视频教程图片教程开发速查手册

【内容导航】

　　三、屏聊系统功能介绍

　　1、访问者浏览包含屏聊系统的网页，屏聊系统会根据当前时间自动生成呢称，并根据当前页面以及当前时间来调用同一个页面上所有访问者的聊天信息。为了减轻调用的信息量故采用时间限制，也就是访问者只调用从访问者登陆之后的信息，而并不是在这个页面上所有的聊天信息。

　　2、用户在登陆页面、修改呢称、退出页面时都会对应的信息写入数据库并且传递给其它在线的访问者。

　　3、为了尽量的缩小在主页面上的显示区，可以将页面最小化，最小化时的页面只显示提示信息，但不显示聊天信息，但不会丢失聊天信息，当需要查看时，可以将页面切换至最大化。

　　3、改名功能：访问者可以更换自己喜欢的呢称，但当用户所更改的呢称在当前页面中已经存在，用户将无法修改，并在提示区域进行提示。

　　4、聊天信息的查看：在界面介绍已经提到，由于Timer控件的定时更新，导致不方便拖动聊天信息显示的文本框，故必须在拖动文本框时可能调用服务器端程序将Timer控件停止。

　　5、系统发送支持Alt+S,这是为了方便一些习惯于其它即时通工具的用户，比如QQ，至少说懒羊习惯这个快捷键，真的很方便噢，呵呵。

　　6、关闭：本系统中这一功能是一个重点更是一个难点。由于页面流量的产生，访问者越来越多，而每个访问者都会在数据库留下痕迹，因此数据库也就越来越庞大，我们不可能定期去清理数据库，也无法去清理数据库，我们很难确定啥时页面有人，而且也耗不起这个人力，这就要求我们程序能够自动的去处理数据库，而这一点只能在关闭时实施。关闭时清理数据库主要包括两个方面：一是当此访问者退出时不是最后一位，那么访问者在退出之前将退出信息添加至提示信息库并清除此访问者在线信息，但如果为最后一位访问者，系统将会在此访问者退出前清理这个页面所有信息，包括聊天信息、提示信息、在线信息。

更多热点：Photoshop教程 ASP入门教程视频教程图片教程开发速查手册

【内容导航】

　　四、系统开发重难点解释

　　1、全局呢称与访问者的登陆时间设定

　　呢称与登陆时间在本系统一直贯穿始终，所有聊天信息的调用都必须根据这两个关键字段。由于.NET中的C#代码功能相当强大，这就使得我们不需要再像之前文章中将这两个关键值通过JS代码来实现，而且通过JS代码实现后的传值也不是很方便，那么我们将通过什么样的方式来实现呢？我们可以先在前台拖放两个文本框，作为传递关键值的一个媒介。为了使页面在回传时不会对呢称与登陆时间进行重新设置，我们还必须在页面加载时必须判断是否为客户端回发还是第一次加载。

　　代码如下：

if (!this.IsPostBack)

{

this.LoginTime.Text = DateTime.Now.ToString();

this.RndName.Text = ServerGetName();

this.nc.Text = this.RndName.Text;

}

{

string RndName = "LY" + DateTime.Now.Year.ToString() + DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString();

return RndName;

}

　　2、客户端调用服务器端函数

　　客户端是没有直接方式调用服务器端函数，我们只能通过页面调用控件来进行页面PostBack回发，从而达到调用服务器端的函数。本系统中的关闭功能、快捷键（Alt+S）发送功能、聊天信息拖动滚动条时停止更新聊天信息的功能都用到此方法，下面我们就开始来看看这三个功能的具体实现方式：

　　① 关闭功能

　　关闭功能主要出现在Min0区与Max0区、主页面退出时发生。
　　其中主页退出时使用页面事件window.onunload来调用Min0区中的关闭按钮（Close）的事件函数。我们先看看关闭按扭的所引用的事件函数：

protected void close_Click(object sender, ImageClickEventArgs e)

{

closeEmsg(); //具体的处理程序略（源代码见文末打包下载）

}

　　其次添加如下JS代码：

function unloadpage()

{

__doPostBack("AnchorCall1$close","") //调用关闭按钮

}

　　我想很多朋友可能不明白上面这段代码，AnchorCall!$close为关闭按钮的name，我们可以通过运行页面，然后查看页的HTML源代码，可以看到close按钮的name为AnchorCall1$close，同样我们可能通过同样的方法来调用其它铵钮所触发的事件，例如存在某一个按钮为AnchorCall1$Button1，那么我们JS调用的代码则为：__doPostBack("AnchorCall1$Button1","")

　　② 快捷键（Alt+S）发送功能

　　通过前面的学习，我们不难写出此功能的代码，这里的代码主要通过调用发送按钮，我们通过页面源代码可以知道，发送按钮的名称为：AnchorCall1$ImageButton1，那么代码则为：__doPostBack("AnchorCall1$ImageButton1","")，由于我们快捷键的发送是通过按键来触发的，因此我们就必须将以上代码添加至onkeydown事件下。

　　代码如下：

this.fscontent.Attributes.Add("onkeydown", "keypress(event)");

JS代码keypress函数：

function keypress(event)

{

var keycode = event.keyCode?event.keyCode:event.which?event.which:event.charCode;

if((keycode==83)&&(event.altKey)){

__doPostBack("AnchorCall1$ImageButton1","");

}

更多热点：Photoshop教程 ASP入门教程视频教程图片教程开发速查手册