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

　　拖放完UpdatePanel控件后，再从工具箱中拖出两个Timer控件，并将Timer控件的Interval设置为1000（1秒钟运行一次）。设置完Timer,我们来设置每一个UpdatePanel控件，我们将UpdatePanel控件的UpdateMode都设为Conditional，Triggers则添加UpdatePanel控件内的子控件，其中Min1区域还需添加Timer1，Max2区域添加Timer2。

　　最终页面HTML代码如下：

　　<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
　　Namespace="System.Web.UI" TagPrefix="asp" %>
　　<link href="anhcr_main.css" type="text/css" />
　　<asp:ScriptManager runat="server">
　　<Scripts>
　　<asp:ScriptReference Path="anchormain.js" />
　　</Scripts>
　　</asp:ScriptManager>
　　<div>
　　<div>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><IMG alt="开发：杨剑" src="images/t_1.gif" /> <SPAN>懒羊屏聊系统</SPAN> <SPAN><IMG onmousemove="this.src='images/max_1.gif'" alt="开发：杨剑" src="images/max.gif" /><asp:ImageButton
　　class="timg" runat="server" ImageUrl="images/close.gif" />
　　<IMG alt="开发：杨剑" src="images/t_2.gif" /></SPAN> </DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="close" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><SPAN><asp:Label runat="server" Text="开发：懒羊系统正在启动中……"></asp:Label></SPAN></DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"></asp:AsyncPostBackTrigger>
　　</Triggers>
　　</asp:UpdatePanel>
　　</div>
　　<div>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV>
　　<IMG alt="开发：杨剑" src="images/t_1.gif" />
　　<SPAN>懒羊屏聊系统</SPAN>
　　<SPAN><IMG onmousemove="this.src='images/min_1.gif'" alt="开发：杨剑" src="images/min.gif" />
　　<asp:ImageButton
　　class="timg" runat="server" ImageUrl="images/close.gif" />
　　<IMG alt="开发：杨剑" src="images/t_2.gif" /> </SPAN></DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="close1" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><UL><LI><asp:TextBox runat="server"></asp:TextBox> </LI><LI> <asp:ImageButton runat="server" ImageUrl="images/gm.gif"></asp:ImageButton></LI>
　　<LI>开发：懒羊(杨剑)</LI>
　　<LI><asp:ImageButton runat="server" ImageUrl="images/ltjl.gif"></asp:ImageButton></LI></UL>
　　</DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="ImageButton3" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV>
　　<asp:Label runat="server" ForeColor="Red" Text="信息提示区|正在加载……"
　　Width="291px" BorderColor="#FFC0C0" BorderStyle="Solid" BorderWidth="1px"></asp:Label></DIV><DIV><asp:TextBox runat="server" TextMode="MultiLine"></asp:TextBox>
　　<asp:Button runat="server" Text="启动" />
　　<asp:Button runat="server" Text="停止" /></DIV>
　　</ContentTemplate>
　　<triggers>
　　<asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick"></asp:AsyncPostBackTrigger>
　　<asp:AsyncPostBackTrigger ControlID="ImageButton3" EventName="Click" />
　　</triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV><UL><LI><asp:TextBox runat="server" TextMode="MultiLine">大家好！</asp:TextBox> </LI><LI><asp:ImageButton runat="server" ImageUrl="images/fs.gif"></asp:ImageButton></LI></UL></DIV>
　　</ContentTemplate>
　　</asp:UpdatePanel>
　　</div>
　　<asp:Timer runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
　　<asp:TextBox runat="server" Visible="False"></asp:TextBox>
　　<asp:TextBox runat="server" Visible="False"></asp:TextBox>
　　<asp:Timer runat="server" Interval="1000" OnTick="Timer2_Tick">
　　</asp:Timer>

　　为了更好的显示页面，我们还必须对页面进行样式控制，由于样式文件与原来文章中的CSS样式相同，这里就不多说了，直接添加到项目中就可以了。

本文导航:

·Ajax开发实例教程 .NET页面屏聊系统
·Ajax开发实例教程 .NET页面屏聊系统(2)
·Ajax开发实例教程 .NET页面屏聊系统(3)
·Ajax开发实例教程 .NET页面屏聊系统(4)