Ajax开发实例教程.NET页面屏聊系统

　　4．根据屏聊界面拖放UpdatePanel控件，并为UpdatePanel控件设置Triggers和UpdateMode。

　　拖放完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" rel="stylesheet" type="text/css" />
　　<asp:ScriptManager ID="ScriptManager1" runat="server">
　　<Scripts>
　　<asp:ScriptReference Path="anchormain.js" />
　　</Scripts>
　　</asp:ScriptManager>
　　<div id="eMsg">
　　<div id="AnchorCall1_Min">
　　<asp:UpdatePanel ID="Min0" runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV class="top" id="DIV1"><IMG alt="开发：杨剑" src="images/t_1.gif" /> <SPAN class="tmid">懒羊屏聊系统</SPAN> <SPAN class="tright"><IMG class="timg" onmousemove="this.src='images/max_1.gif'" onmouseout="this.src='images/max.gif'" onclick="changemax();" alt="开发：杨剑" src="images/max.gif" id="IMG1" /><asp:ImageButton
　　class="timg" ID="close" runat="server" ImageUrl="images/close.gif" OnClick="close_Click" />
　　<IMG alt="开发：杨剑" src="images/t_2.gif" /></SPAN> </DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="close" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel ID="Min1" runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV class="minmain" onclick="changemax();"><SPAN id="minmain"><asp:Label id="Label1" runat="server" Text="开发：懒羊　系统正在启动中……"></asp:Label></SPAN></DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"></asp:AsyncPostBackTrigger>
　　</Triggers>
　　</asp:UpdatePanel>
　　</div>
　　<div id="AnchorCall1_Max">
　　<asp:UpdatePanel ID="Max0" runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV class="top">
　　<IMG alt="开发：杨剑" src="images/t_1.gif" />
　　<SPAN class="tmid">懒羊屏聊系统</SPAN>
　　<SPAN class="tright"><IMG class="timg" onmousemove="this.src='images/min_1.gif'" onmouseout="this.src='images/min.gif'" onclick="changemin();" alt="开发：杨剑" src="images/min.gif" />
　　<asp:ImageButton
　　class="timg" ID="close1" runat="server" ImageUrl="images/close.gif" OnClick="close_Click" />
　　<IMG alt="开发：杨剑" src="images/t_2.gif" /> </SPAN></DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="close1" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel ID="Max1" runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV class="gn"><UL><LI><asp:TextBox id="nc" runat="server" Width="80px"></asp:TextBox> </LI><LI> <asp:ImageButton id="ImageButton3" runat="server" ImageUrl="images/gm.gif" OnClick="ImageButton3_Click"></asp:ImageButton></LI>
　　<LI id="maxmain" class="gnm">开发：懒羊(杨剑)</LI>
　　<LI class="gnr"><asp:ImageButton id="ImageButton2" runat="server" ImageUrl="images/ltjl.gif"></asp:ImageButton></LI></UL>
　　</DIV>
　　</ContentTemplate>
　　<Triggers>
　　<asp:AsyncPostBackTrigger ControlID="ImageButton3" EventName="Click" />
　　</Triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel ID="Max2" runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV id="tsinfo" class="tsinfo">
　　<asp:Label ID="tsinfomain" runat="server" ForeColor="Red" Height="30px" Text="信息提示区|正在加载……"
　　Width="291px" BorderColor="#FFC0C0" BorderStyle="Solid" BorderWidth="1px"></asp:Label></DIV><DIV class="chat"><asp:TextBox id="TextBox1" runat="server" Width="295px" TextMode="MultiLine" Height="150px"></asp:TextBox>
　　<asp:Button ID="Button1" runat="server" Text="启动" style="display:none" OnClick="Button1_Click" />
　　<asp:Button ID="Button2" runat="server" Text="停止" style="display:none" OnClick="Button2_Click" /></DIV>
　　</ContentTemplate>
　　<triggers>
　　<asp:AsyncPostBackTrigger ControlID="Timer2" EventName="Tick"></asp:AsyncPostBackTrigger>
　　<asp:AsyncPostBackTrigger ControlID="ImageButton3" EventName="Click" />
　　</triggers>
　　</asp:UpdatePanel>
　　<asp:UpdatePanel ID="Max3" runat="server" UpdateMode="Conditional">
　　<ContentTemplate>
　　<DIV class="fs"><UL><LI><asp:TextBox id="fscontent" runat="server" Width="230px" TextMode="MultiLine" Height="50px">大家好！</asp:TextBox> </LI><LI class="fsbtn"><asp:ImageButton id="ImageButton1" onclick="ImageButton1_Click" runat="server" ImageUrl="images/fs.gif"></asp:ImageButton></LI></UL></DIV>
　　</ContentTemplate>
　　</asp:UpdatePanel>
　　</div>
　　<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"></asp:Timer>
　　<asp:TextBox ID="LoginTime" runat="server" Visible="False"></asp:TextBox>
　　<asp:TextBox ID="RndName" runat="server" Visible="False"></asp:TextBox>
　　<asp:Timer id="Timer2" runat="server" Interval="1000" OnTick="Timer2_Tick">
　　</asp:Timer>

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