ASP.NEX AJAX

Adding an UpdatePanel to a Page

创建无闪烁页面

1. 新建一个空网站。
2. 在网站中新建一个名为UpdatePanel.aspx的新Web窗体。设置titile为UpdatePanel Demo。
3. 删除form元素中的div元素。
4. 在form元素中添加UpdatePanel控件。在源视图中，form元素内部，输入updatepanel并按下tab键，得到如下代码：

       <form id="form1" runat="server">
       <asp:UpdatePanel runat="server">
           <ContentTemplate></ContentTemplate>
       </asp:UpdatePanel>
       </form>
   

5. 在<ContentTemplate>元素中插入控件：

   <asp:Label ID="Label1" runat="server"></asp:Label>
   <asp:Button ID="Button1" runat="server" Text="Button" />

6. 在UpdatePanel之前拖放一个<ScriptManager>控件。

   <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

7. 添加页面的Load事件处理程序，

       Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
           Label1.Text = System.DateTime.Now.ToString()
       End Sub
   

8. 总结4～6步，form内的代码如下：

       <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
       <asp:UpdatePanel runat="server">
           <ContentTemplate>
               <asp:Label ID="Label1" runat="server"></asp:Label>
               <asp:Button ID="Button1" runat="server" Text="Button" />
           </ContentTemplate>
       </asp:UpdatePanel>
   

9. 保存修改，在浏览器查看效果。多次单击按钮可见没有页面闪烁。

工作原理：

ScriptManger控件是客户端页面与Ajax框架之间的桥梁，负责完成像正确注册在浏览器中使用的JavaScript文件这样的任务。

给用户提供反馈

接上例：

1. 在</UpdatePanel>的结束标记下，拖动一个UpdateProgress控件到页面。
2. 将UpdatePanel的Id设为UpdatePanel1，并将UpdateProgress的AssociatedUpdatePanelID属性设为UpdatePanel1。
3. 为UpdateProgress元素添加<progressTemplate>子元素。在其中包含一些告诉用户等待一会的文本。前3步的代码如下：

       <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
           <ProgressTemplate>
               <div> Please Wait...</div>
           </ProgressTemplate>
       </asp:UpdateProgress>
   

4. 可以为<div>设置样式，使其更加友好。为其添加PleaseWait类名，并添加样式表

   .PleaseWait
   {
     height: 32px;
     width: 500px;
     background-image: url(Images/PleaseWait.gif);
     background-repeat: no-repeat;
     padding-left: 40px;
     line-height: 32px;
   }
   

5. 为了表现出长时间的效果，为页面的Load事件添加如下语句

   System.Threading.Thread.Sleep(5000)

6. 保存所有修改，在浏览器查看效果。单击按钮可见页面给出等待的提示信息。

在Ajax Web站点中使用Web服务和页面方法

创建Web服务

1. 新建一个Web空网站。
2. 添加新项，选择Web服务，选择将代码放在单独文件中，单击添加。
3. 注意Web服务的代码文件位于App_Code文件夹。
4. 打开代码文件，修改HelloWorld方法如下：

       <WebMethod()> _
       Public Function HelloWorld(yourName As String) As String
           Return String.Format("Hello {0}", yourName)
       End Function
   
   

5. 保存所有修改， 在浏览器里查看。它列出了本服务的所有可用方法。本次仅有helloworld方法。
6. 单击HelloWorld链接，就会登录到该服务测试页面。

在Ajax Web站点中使用Web服务

配置Web服务

为服务类添加特性，将整个服务提供为客户端脚本服务

<System.Web.Script.Services.ScriptService()> _

添加服务引用到Web窗体

1. 在母版页中的ScriptManager添加服务，使服务用于站点的所有页面。

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

2. 对于只在某个页面使用服务，最好仅在该页面添加服务。在母版页面已经有ScriptManager元素的时候，只能将服务添加到ScriptManagerProxy元素中。

     <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
       <Services>
         <asp:ServiceReference Path="../WebServices/NameService.asmx" />
       </Services>
     </asp:ScriptManagerProxy>
   

从客户端代码调用Web服务

1. 为服务类添加特性。
2. 如果有必要，修改服务类的WebService特性的名字空间。
3. 新建一个Web窗体，其基于带有ScriptManager元素的母版。
4. 将ScriptManagerProxy控件添加到cpMainContent占位符的标记中，并添加服务子元素。

     <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
       <Services>
         <asp:ServiceReference Path="../WebServices/NameService.asmx" />
       </Services>
     </asp:ScriptManagerProxy>
   

5. 在<ScriptManagerProxy>结束标记下方，添加两个控件

     <input id="YourName" type="text" />
     <input id="SayHello" type="button" value="Say Hello" />
   

6. 在这两行下面，添加客户端代码块。

     <script type="text/javascript">
       function HelloWorld()
       {
         var yourName = $get('YourName').value;
         NameService.HelloWorld(yourName, HelloWorldCallback);
       }
   
       function HelloWorldCallback(result)
       {
         alert(result);
       }
   
       $addHandler($get('SayHello'), 'click', HelloWorld);
     </script>
   

7. 保存修改后，在浏览器中请求页面。

工作原理：

1. $get(‘YourName’)是Ajax提供的语法，他等价于document.getElementById(‘YourName’)。
2. NameService.HelloWorld的前一个参数就是在方法声明中定义的参数，最后一个参数是成功回调方法，当服务返回结果时，触发这个方法。
3. result参数可能保存更复杂的对象，他们提供对其属性的访问。如果从Web服务返回了像Person, Order等复杂的对象，Asp.net Ajax会自动让这个对象在客户端脚本中可用，而不需要编写自定义的代码将对象从服务器站点实例转换为JavaScript能够理解的内容。这个过程涉及json。json是一种极其简洁的方法，它描述的是需要从一台计算机转移到另一台计算机的对象。
4. $addHandler在页面中注册这些对象特定事件的事件处理程序。

页面方法

要启用页面方法，需要将ScriptManager控件的EnablePageMethods属性设置为True。不能在ScriptManagerProxy类上设置该属性。

在页面的代码类中创建一个公共的共享方法，并添加WebMethod()特性，这个方法就是页面方法。

编写必要的JavaScript脚本来调用页面方法。

从客户端代码调用页面方法

1. 修改母版页面中ScriptManager控件的EnablePageMethods特性为true

   <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>

2. 在页面的代码文件的类中，添加页面方法，注意引用System.Web.Services名字空间。

     <WebMethod()>
     Public Shared Function HelloWorld(ByVal yourName As String) As String
       Return String.Format("Hello {0}", yourName)
     End Function
   

3. 为页面添加一个文本框和一个按钮

     <input id="YourName" type="text" />
     <input id="SayHelloPageMethod" type="button" value="Say Hello with a Page Method" />
   

4. 添加客户端脚本

     <script type="text/javascript">
       function HelloWorldPageMethod()
       {
         var yourName = $get('YourName').value;
         PageMethods.HelloWorld(yourName, HelloWorldCallback);
       }
   
       function HelloWorldCallback(result)
       {
         alert(result);
       }
   
       $addHandler($get('SayHelloPageMethod'), 'click', HelloWorldPageMethod);
     </script>
   

5. 保存所有修改，在浏览器中查看结果。

有关Ajax的实用提示

可以在母版页面的Footer中添加一个UpdateProgress控件，可以删除UpdateProgress控件的AssociatedUpdatePanelID特性，让其关联所有的Ajax回调。