使用 jQuery 调用 ASP.NET WebMethod

说到轻量级的客户端通信，我注意到大多数人喜欢使用 ASP.NET AJAX Page Method 多于 ASMX Web 服务。事实上，在我的文章《使用 jQuery 调用 ASMX Web 服务》的第一条评论中就提到了 Page Method。

鉴于它们流行度，我觉得我应该注意到这个需求。作为对评论中 Justin 问题的回答，我找到了使用 jQuery 调用 Page Method 的方法。事实上，你可以完全不使用 ScriptManager 来达到这个目的。

在这篇文章中，我将说明什么在使用 Page Method 时什么是必要的以及什么是不必要的。然后我将展示在不使用 ScriptManager 时通过 jQuery 来调用 Page Method。

创建一个用于测试上的的页面

写一个 Page Method 是很简单的。 Page Method 必须声明为静态方法，并且它们必须使用[WebMethod] 特性标注。除此之外，AJAX.NET AJAX 处理了其余在服务器需要做的工作。

下面是我们用于示例的 Page Method：

public partial class _Default : Page 
{
    [WebMethod]
    public static string GetDate()
    {
        return DateTime.Now.ToString();
    }
}

那 ScriptManager 和 EnablePageMethods 呢？

传统方法中，要使用 Page Method 的第一步就是设置 ScriptManager 的 EnablePageMethods 属性为 true。

幸运的是，这个属性名有一定程度上的用词不当。它并不会使 Page Method 可用，而仅仅是简单为页面代码中合适的方法生成了内嵌的 JavaScript 代理。

例如，如果在上面的示例对应的页面 Default.aspx 添加了一个 ScriptManager 并且设置了它的 EnablePageMethods 属性为 true，下面的 JavaScript 代码就会嵌入到页面中：

var PageMethods = function() {
  PageMethods.initializeBase(this);
  this._timeout = 0;
  this._userContext = null;
  this._succeeded = null;
  this._failed = null;
}
 
PageMethods.prototype = {
 _get_path:function() {
  var p = this.get_path();
  if (p) return p;
 else return PageMethods._staticInstance.get_path();},
GetDate:function(succeededCallback, failedCallback, userContext) {
return this._invoke(this._get_path(), 'GetDate',false,{},
  succeededCallback,failedCallback,userContext); }}
PageMethods.registerClass('PageMethods',Sys.Net.WebServiceProxy);
PageMethods._staticInstance = new PageMethods();
 
// Generic initialization code omitted for brevity.
 
PageMethods.set_path("/jQuery-Page-Method/Default.aspx");
PageMethods.GetDate = function(onSuccess,onFailed,userContext) {
 PageMethods._staticInstance.GetDate(onSuccess,onFailed,userContext);
}

如果你不懂这段代码也没有关系，你不需要知道它是怎么工作的。你只需要知道这个 JavaScript 代理可以让你使用 PageMethods.MethodName 这样的语法来调用 Page Method。

这点重要的一点就是 PageMethods 代理对象归根结底就是一个规则 ASP.NET 服务调用的封装。

使用 jQuery 调用 Page Method

要知道调用 Page Method 与调用一个 Web 服务是一样的，使用 jQuery 调用 Page Method 并不难。要了解更详细的信息，可以参考我之前的文章《让 jQuery 使用 ASP.NET AJAX 的 JSON 序列化的 Web 服务》 。

使用 jQuery 调用 Page Method，下面就是你所有需要做的：

$.ajax({
  type: "POST",
  url: "PageName.aspx/MethodName",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});

综合示例

对应上面示例 Page Method 对应的 Default.aspx 如下：

<html>
<head>
  <title>Calling a page method with jQuery</title>
  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="Default.js"></script>
</head>
<body>
  <div id="Result">Click here for the time.</div>
</body>
</html>

正如你所看到的，这里没有 ScriptManager，更没有 EnablePageMethods。

下面是 Default.aspx 所引用的 Default.js：

$(document).ready(function() {
  // 添加 Page Method 调用的函数作为 div 的 onclick 事件
  $("#Result").click(function() {
    $.ajax({
      type: "POST",
      url: "Default.aspx/GetDate",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {
        // 使用 Page Method 的返回值来替代 div 的内容
        $("#Result").text(msg.d);
      }
    });
  });
});

最后的结果就是当我们的 div 被点击之后，jQuery 发送一个 AJAX 请求到 GetDate Page Method 然后使用返回值替换 div 的内容。

结语

Page Method 比一开始看起来更易于使用。EnablePageMethods 的相对不重要是一个惊喜。

为了避免使演示这个机制复杂，示例仅演示了最简单的目的。如果你想看一下实际运用的例子，可以看看 Moses 使用这个技术在 GridView 中实现记录详情展开的功能。

如 果你已经准备要将 ScriptManager 用于其他目的，使用 JavaScript 代理调用 Page Method 也没有坏处。无论如何，如果不准备使用 ScriptManager 或才已经在你的页面中包含了 jQuery，我想这是更高效使用 jQuery 的方法。

原文出处：http://chungle.javaeye.com/blog/406054
posted @ 2010-08-25 16:37  Ants  阅读(3333)  评论(0)  编辑  收藏  举报