思维的乐趣

Enjoy it
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ASP.NET AJAX 初学

Posted on 2010-05-18 02:11  szh114  阅读(330)  评论(0编辑  收藏  举报

今天看了一点ASP.NET AJAX,知道了如何用UpdatePanel,呵呵,下面是示例代码:

 

1 <table border="1" width="800" bgcolor="#99FF99" align="center">
2 <tr>
3 <td>
4 <asp:Label ID="Label1" runat="server" Text="User List:">
                </
asp:Label>
5
6 </td>
7 </tr>
8 <tr>
9 <td>
10 <asp:UpdatePanel ID="UpdatePanel1" runat="server"
                            UpdateMode
="Conditional">
11 <ContentTemplate>
12 <asp:Label ID="lbUserList" runat="server" Text="">
                   </
asp:Label>
13 </ContentTemplate>
14 <Triggers>
15 <asp:AsyncPostBackTrigger ControlID="Timer1" />
16 </Triggers>
17 </asp:UpdatePanel>
18 <asp:Timer ID="Timer1" runat="server" Interval="1000"
                    OnTick
="Timer1_Tick">
19 </asp:Timer>
20 </td>
21 </tr>
22 <tr>
23 <td>
24 <asp:Label ID="Label3" runat="server" Text="Chat Area">
              </
asp:Label>
25 </td>
26 </tr>
27 <tr>
28 <td>
29 <asp:UpdatePanel ID="UpdatePanel2" runat="server"
                          UpdateMode
="Conditional">
30 <Triggers>
31 <asp:AsyncPostBackTrigger ControlID="Timer2" />
32 </Triggers>
33 <ContentTemplate>
34 <asp:TextBox ID="txMsg" runat="server"
                      TextMode
="MultiLine" Height="300" Width="795"
35 ReadOnly="true"></asp:TextBox>
36 </ContentTemplate>
37 </asp:UpdatePanel>
38 <asp:Timer ID="Timer2" runat="server" Interval="1000"
                      OnTick
="Timer2_Tick">
39 </asp:Timer>
40 </td>
41 </tr>
42 <tr>
43 <td>
44 <asp:TextBox ID="txSendMsg" runat="server"
                        TextMode
="MultiLine" Width="650"></asp:TextBox>
45 <asp:Button ID="btSend" runat="server" Text="Send"
                          OnClick
="btSend_Click" />
46 <asp:Button ID="btLogOff" runat="server" Text="LogOff"
                          OnClick
="btLogoff_Click" />
47 </td>
48 </tr>
49 </table>

 

其中首先必须有一个ScriptManager控件,并且一个ASPX中只能有一个,然后有两个UpdatePanel块,每块用一个Timer来定时触发异步更新,至于Timer的OnTick响应事件,当然就是设定的时间间隔到了时要做的事情了,这时,就可以异步更新定义在UpdatePanel中的控件内容。这时候,就不会发现页面整个在闪动啦。爽爽爽

 

另外一种使用ASP.NET AJAX的方式是用WEB SERVICE来响应客户端的异步请求,示例代码如下:

 

首先,ASPX页面中当然要有ScriptManager块,注意这个块比上面的那种用法多了几行,用标签指示了要请求的服务的路径,指向一个asmx文件。

        <asp:ScriptManager ID="ScriptManager1" runat="server" >
            <Services>
            <asp:ServiceReference Path="~/MyService.asmx" />
            </Services>
        </asp:ScriptManager>

 

然后是ASMX中的内容:

[System.Web.Script.Services.ScriptService]
public class MyService : System.Web.Services.WebService {

 

    public MyService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public string SayHello(string name) {
        return "Hello " + name;
    }
    
}

要注意把VS2008自动生成的ASMX中的那行[System.Web.Script.Services.ScriptService]给UNCOMMENT了。

 

在ASPX页面上有两个HTML 控件:

        <input type="text" id="inputName" />
        <input type="button" value="Call Service" onclick="return OnButton_Click()" />

 

并且button控件的响应函数为:

   <script  type="text/javascript">

        function OnButton_Click()
        {
            requestSimpleService=MyService.SayHello($get('inputName').value,OnRequestComplete);
            return false;            
        }
        function OnRequestComplete(result)
        {
            alert(result);
        }
    </script>

注意在这儿客户端要运行的脚本中可以直接使用MyService.SayHello函数!!!并且在原先只有的一个参数上,又传递了一个函数名进去,这个函数名指定了当请求结束时,客户端要做什么。这就是框架封装的作用。

 

现在我使用的是ASP.NET AJAX 3.5,在以往的2007年时代,ASP.NET AJAX 1.0,2.0的时候,使用VS2005开发相关应用,必须先手动安装ASP.NET AJAX组件,然后在WEB.CONFIG中进行配置才可以运行。但现在3.5版本中,ASP.NET AJAX已经被集成为ASP.NET原生应用了,可以直接使用,不城特殊设置!