ASP.NET网页右侧可隐藏浮动窗口的实现
一. 综述
从2009.7.28到2009.7.31的四天时间,用ASP.NET在vs2005中实现这样一个可隐藏的浮动窗口,主要功能有:
1. 平时隐藏,只在鼠标拖到相应位置的时候才显示。
2. 显示的内容为从数据库中提出的内容,即未处理的工单号码和工单内容。
3. 通过点击工单号的超链接,可以在本页刷新某一特定区域的内容,进行工单处理。
4. 浮动窗口定时刷新。
5. 只有具有一定权限的工作人员的页面上才显示此窗口。其余人员不显示此窗口。
相应文件为:
1. Default.aspx:修改了页面的结构方式,用IFRAME构建整个网页,并且对用户信息进行处理,对符合要求的用户,调用view_ceng.js创建层。
2. Default.aspx.cs:在page_load里只登记用户信息,不进行其他处理。
3. ceng.aspx:只声明了浮动窗口IFRAME的结构,主要是加入了一个table控件,用来动态更新工单信息。
4. ceng.aspx.cs:加入SQL语句实现工单的搜索和查找,能够自动得到工单列表和链接。用于table的动态更新。
5. view_ceng,js:动态建立用于放置浮动窗口的层,包括两部分,一部分是不需要动态更新的部分直接建立,另一部分写成IFRAME的形式,注明src,用于动态更新。
二. 浮动且可以隐藏的窗口的实现
首先,上网找了一个类似的已实现的编码,并进行修改。主要实现的功能为鼠标拖到上面的时候会向左移动,鼠标移开的时候向右移动。实现的方法是通过javascrip文件view_ceng.js建立了一个新的层叫object1,里面包括两部分,一部分是不会变的部分,直接用行和单元格实现;另一部分需要动态变化,写成一个iframe叫做ceng,src为ceng.aspx,使之与ceng.aspx关联,填充iframe的内容。所有操作均在view_ceng.js中完成。
三. 窗口中链接的实现
1. 窗口中数据的获取
窗口中数据的获取在ceng.aspx.cs中page_load部分实现,即通过SQL语句搜索符合要求的数据,通过动态的建立label在该层的table控件中显示内容,即每个工单的编号,紧急程度,描述,处理人等。
2. 数据链接的实现
由于需要对工单进行处理,所以要加入与工单处理相关的超链接,超链接的位置为工单号。故与上一部分相似,同样在ceng.aspx.cs中page_load部分,通过动态的建立HyperLink,通过CASE_NO的不同对应到不同的链接地址。
四. 页面出现此窗口的权限限定的实现
由于需要对访问人员的权限进行限制,只有该部门的人员可以看此页面,所以在Default.aspx.cs中对此进行限定。在<%和%>之间写入用于判断的.cs指令,对满足要求的用户,调用view_ceng.js创建并显示层,对于不符合要求的,则不建立该层。
五. 定时刷新
定时刷新只需要对层进行定时刷新,即使更新工单数据。因此,在ceng.aspx中在header的前面加入一句<meta http-equiv="refresh" content="5;url=ceng.aspx">即可content中5表示刷新时间为5秒,url表示刷新的链接为ceng.aspx。
六. 出现的问题和解决方法
1. 一开始不知道怎么实现可以隐藏的、类似QQ的窗口,后来通过上网搜索,找到了源代码,实现了这样的窗口,为后面的工作打下基础。
2. 最开始将这样的窗口放在Header.aspx中,发现这个窗口会被其他FRAME覆盖,经过查资料,证明在FRAME的结构中无法跨FRAME进行显示,所以彻底颠覆这一结构,用IFRAME实现了Default页的组成。并且同时把需要显示的窗口也写入一个IFRAME之中。这样就可以正常的显示和隐藏窗口了。
3. 但是此时又发现浮动窗口随着鼠标会不断的跳来跳去,原因是IFRAME总是被加载,所以鼠标的动作总是被执行两次,解决的方法是修改了鼠标的动作函数,将原来用相对位移移动窗口改为了用绝对位置指定鼠标作用时窗口的位置。
4. 此后要解决的问题就是点击超链接的时候不弹出窗口,而是在main框架中显示。解决方法为在main的iframe里将其申明为runat=server,在ceng.aspx.cs里调用main.attubites.什么不记得了等于工单处理的那个地址,同时某一个属性设为false。这时使用的是Linkbottom做超链接。此后改为HyperLink,就不存在弹出窗口的问题了,只需指定好链接地址即可。
5. 然后就是刷新问题,比较容易解决,只要在需要定时刷新的页面开头加一句话就行了。
6. 最后就是设置权限的问题。这需要将所有和动态建立层相关的javascript语句都写入了view_ceng.js文件。一开始直接在defalt.aspx.cs中加入权限判定和调用js文件,却发现会将整个布局打乱。后来发现如果在defalt.aspx中引用和defalt.aspx.cs一样的c#语言的判定则不会打乱,所以最后的解决方法为在defalt.aspx中引入.cs的判定。