使用ASP.NET AJAX异步调用页面中的类方法

该内容参考陈黎夫的博客，详细描述请见他的博客：http://www.cnblogs.com/dflying/archive/2007/06/05/771490.html

总结：想要使用ASP.NET AJAX在客户端JavaScript中异步调用定义在ASP.NET页面中的方法，我们需要：

  1. 将该方法声明为公有（public）；
  2. 将该方法声明为类方法（C#中的static，VB.NET中的Shared），而不是实例方法；
  3. 为该方法添加[WebMethod]属性；
  4. 将页面中ScriptManager控件的EnablePageMethods属性设置为true；
  5. 在客户端使用如下JavaScript语法调用该页面方法：
    PageMethods.[MethodName](param1, param2 …, callbackFunction)；
  6. 为客户端异步调用指定回调函数，在回调函数中接收返回值并进一步处理。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick() {
    var name = $get("txtName").value;
    PageMethods.SayHello(name,onSayHelloSucceeded);
}

function onSayHelloSucceeded(result) {
    $get("DivResult").innerHTML = result;
}


// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager id="ScriptManager1" EnablePageMethods="true" runat="server">
        </asp:ScriptManager>
        <input id="txtName" type="text" />
        <input id="btnName" type="button" value="Say Hello" onclick="return Button1_onclick()" />
        <div id="DivResult">
        </div>
    </div>
    </form>
</body>
</html>

代码中的参数来自客户端控件 txtName
如果是服务器端控件<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>，则取值方法为：var name = $get('<%= this.TextBox1.ClientID %>').value;


using System;
using System.Collections;
using System.Web;
using System.Web.UI;
using System.Web.Services;

namespace AspAjax
{
    public partial class PageMethod : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string SayHello(string name)
        {
            return string.Format("Hello,{0}! Now it is {1}.", name, DateTime.Now);
        }
    }
}


注意：必须是静态方法才可以实现此功能。为什么要求静态呢？答案请参见赵劼的博客：浅谈实例Page Method到静态Page Method的移植

以下是他博客中的摘要：

　　静态Page Method与实例Page Method的实现方式有什么区别呢？静态的Page Method的实现原理其实和客户端调用Web Service如出一辙，几乎没有任何的区别。而实例Page Method在调用时和UpdatePanel有些接近——至少在一开始，因为它们为了获得整个控件树的信息，必须将页面上的所有内容，例如所有输入控件的值，连同ASP.NET存放在客户端的ViewState等信息一并发送到服务器端。喔，这不就相当于一个完整的PostBack吗？它与静态Page Method相比，最大的劣势也就在这里：性能。实例Page Method在每次调用时都必须传输更多的数据，在构造一棵完整的控件树，换来的是访问控件树的能力——再明确点说，换来的“只是”访问控件树的能力。其它功能的可以说几乎完全没有，例如对于控件的修改无法输出到客户端。

     现在的Page Method已经必须为静态了，那么它和客户端调用Web Service有什么明显的区别的呢？选择哪一个比较好呢？我的答案是：“两者可以说区别”。的确，它们两个再实现上可以说完全相同，它们重用了几乎所有的类，Page Method在ASP.NET 2.0 AJAX Extensions中也使用WebServiceData、WebServiceMethodData用来分析和执行。说到区别，可能只有生成客户端Proxy这一点了吧。Page Method将Proxy直接写在页面上，而Web Service则使用了“.asmx/js”的方式通过<script />元素来引入了客户端Proxy。这么说来，似乎使用Web Service会比较好些——至少生成的Proxy可以利用缓存，不是吗？


posted on 2008-07-04 00:07  王丹小筑  阅读(536)  评论(1)    收藏  举报

导航