`
chungle
  • 浏览: 59962 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用 jQuery 调用 ASP.NET AJAX Page Method

阅读更多

说到轻量级的客户端通信,我注意到大多数人喜欢使用 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 的方法。

分享到:
评论
2 楼 chungle 2009-06-10  
hatedance 写道

这个page method返回的是html片段吗?也就是说只能返回string类型喽?

返回json数据。
1 楼 hatedance 2009-06-10  
这个page method返回的是html片段吗?也就是说只能返回string类型喽?

相关推荐

    ASP.NET AJAX基础示例

    在ASP.NET中,这通常是一个Web方法(WebMethod)或一个ASP.NET Page Method。这个方法接收来自客户端的输入,执行计算,并返回结果。使用`[WebMethod]`特性标记该方法,使其可以被AJAX调用。 客户端脚本...

    Ajax.net ajax的使用

    例如,可以创建一个Web方法(WebMethod或Page Method),这个方法将被Ajax调用以获取或更新数据。 6. **数据库交互**: Ajax.NET通常结合ADO.NET或Entity Framework进行数据库操作。在示例中,可能展示了如何在C#...

    How to call Server Side function using ajax in asp.net

    总结,要在ASP.NET中使用AJAX调用服务器端函数,你需要创建可被AJAX调用的服务器端方法,配置Web.config,然后在客户端使用JavaScript或jQuery/fetch API发送请求,并处理返回的结果。通过这种方式,你可以实现动态...

    JqueryAjax简单实例

    在VS2005 C#环境下,你还可以利用ASP.NET的其他特性,如控件、数据绑定等,来进一步增强应用的功能。同时,jQuery的`.ajax()`方法还有许多可配置的选项,如设置请求头、超时时间等,可以根据实际需求进行调整。通过...

    jquery-ajax-with-pagemethod-in-asp-net:本文为您提供了实现Page Method并通过jQuery.ajax()调用的逐步方法示例

    本文为您提供了实现Page Method并通过jQuery.ajax()调用进行调用的分步示例。 本示例将从Northwind数据库的Customer表中读取数据。 您可以在此处下载Northwind数据库。 根据选定的DropDown国家/地区值,如果...

    asp+ajax弹出框

    在这个场景中,“asp+ajax弹出框”指的是使用ASP技术来实现后端逻辑,并通过AJAX调用来更新前端显示一个弹出对话框的功能。 在Google的检索中,当你输入查询并点击搜索时,可能会看到一个下拉框,显示出与你输入...

    Asp.NET程序中常用的三十三种代码.

    使用jQuery Unobtrusive AJAX进行异步表单提交。 22. **异步控制器**: ```csharp [AsyncTimeout(5000)] public class AsyncController : AsyncController { public AsyncResult BeginLongRunningOperation()...

    asp.net下的异步加载

    在ASP.NET中,你可以使用jQuery库来简化AJAX操作。例如: - `dataType`:设置为`'html'`或`'text'`,指示服务器返回的数据类型。当从服务器获取HTML片段时,应设置为`'html'`。 - `type`:设置为`'POST'`,因为...

    MOSS中使用Ajax步骤详解和相关资料

    2. **创建Ajax请求**:使用库提供的函数,例如jQuery的`$.ajax()`,创建一个请求到服务器端的Web服务或Page Method。定义URL、请求类型(GET或POST)、数据以及成功的回调函数。 3. **服务器端处理**:在MOSS中,你...

    ajax简单例子

    在.NET平台上,我们可以使用ASP.NET AJAX库,这是Microsoft为Web开发提供的一个强大的工具集,它包含了一些用于创建Ajax应用程序的控件和服务端组件。例如,我们可以使用UpdatePanel控件来实现页面的部分更新。当在...

    Ajax客户端异步调用服务端的实现方法(js调用cs文件)

    但在本例中,我们讨论的是使用特定的Ajax库(可能是Ajax.NET Professional)来调用C#方法。 步骤1:引入Ajax库 为了调用C#文件,我们需要一个能够处理这种跨语言调用的库。在本例中,似乎使用了一个名为Ajax的库,...

    cs中调用js函数[借鉴].pdf

    - **通过AJAX通信**:使用XMLHttpRequest或jQuery的`$.ajax`等方法,进行异步请求,从服务器端获取数据。 总的来说,C#和JavaScript的交互主要依靠页面生命周期中的事件触发和代码注入。理解这些原理对于开发ASP...

    easyui树形菜单操作

    在 ASP.NET 中,可以通过 AJAX 调用来实现这一功能,通常结合 WebMethod 或者 WCF 服务获取数据。 3. **AreaInfoTree.aspx 文件分析** "AreaInfoTree.aspx" 文件很可能是 ASP.NET 的一个网页文件,其中包含 HTML、...

    C#考试题!

    ASP.NET中的母版页(Master Page)提供了一种标准化的方式来设计和布局Web页面。一个页面可以继承自多个母版页,从而实现页面布局的复用和统一。 ### 用户控件的使用 用户控件(User Control)是ASP.NET中的一个...

    jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

    该插件依赖于ASP.NET 2.0、jQuery和CSS技术。核心功能是通过jQuery的AJAX函数与服务器端的ASHX(通用HTTP处理程序)进行通信,以获取并更新GridView的数据。 在实现过程中,jQuery的AJAX方法被用来发送异步请求。一...

Global site tag (gtag.js) - Google Analytics