65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery 调用 ASP.NET 页面方法（揭示模块模式）

T@RuN!!
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.25/5 (7投票s)

2012年9月27日

CPOL

3分钟阅读

viewsIcon

32932

使用 jQuery 调用 ASP.NET 页面方法（揭示模块模式）。

引言

本文简要概述了“揭示模块模式”，以及如何在不污染全局命名空间 (window) 的情况下，使用 AJAX 和 jQuery（揭示模块模式）调用页面方法。

什么是揭示模块模式？

揭示模块模式实际上也使用了自执行匿名函数的概念，但在这种情况下，我们将结果保存到一个变量中。这种模式引入了闭包的概念。闭包是一种在函数返回后保持变量存活的方法。Mozilla 开发者网络有一个很棒的 页面 解释闭包。其中他们提供了一个核心定义：

“闭包是一种特殊的对象，它结合了两件事：一个函数，以及创建该函数的环境。该环境由创建闭包时在作用域内的任何局部变量组成。”

示例

(function (Alerts, $) {
    var test = " My first pattern";
    function Func() {
        alert(test);
    }
    Alerts.publicFun = function () {
        alert("My public Function");
    }
    Alerts.FirstPublicProp = "1233444";
 
    Alerts.PageMethodCall = function () {
 
        PageMethods.TestCall(Alerts.OnRequestComplete, Alerts.OnRequestError);
    }
 
    Alerts.OnRequestComplete = function (result, userContext, methodName) {
 
        alert(result);
   }
 
    Alerts.OnRequestError = function (error, userContext, methodName) {
 
        if (error != null) {
            alert(error.get_message());
        }
    }
    //return myobj;
} (window.Alerts = window.Alerts || {}, jQuery));

在这里，您会惊讶于以下内容

以下含义是什么：

window.Alerts=window.Alerts || {}

代码检查全局命名空间（即 Window）中是否存在 Alerts。 如果它不存在，则将一个空对象字面量分配给 windows.Alerts。 使用这种方法，我们可以跨 JavaScript 文件构建一个库。 如果另一个脚本使用相同的技术，那么它将传入现有的实例并将逻辑附加到它。 在匿名函数内部，如果我们想公开某些内容，那么我们将其附加到 Alerts 对象。 其他属性或方法将被认为是私有的。

传递的第二个参数是 jQuery。 这样做的好处是，命名参数被引用为 $，这使我们能够在匿名函数中将 jQuery 引用为 $，而不必担心它会与其他 JavaScript 库中声明的 $ 冲突。 这是一种常见的做法，在查看写得很好的 jQuery 代码时，您很可能会遇到它。

页面方法

页面方法是 ASP.NET 应用程序中的一种新机制，服务器代码可以绑定到 ASP.NET 页面。 它是使用 ASP.NET AJAX 技术与服务器异步通信的一种简单方法。 它是调用页面的替代方法，可靠且风险低。 它主要用于向客户端脚本公开 web 方法。

本教程假定您熟悉 ASP.NET 的页面方法概念和 jQuery 的基本知识。

示例

假设有一种情况，当点击 ASPX 页面的按钮时，我们需要调用上面定义的 Alerts 模块的 "PageMethodCall"。 让我们看看如何做到这一点。

创建一个 .aspx 页面：

<%@ Master Language="C#" AutoEventWireup="true" 
         CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager runat="server" 
             EnablePageMethods="true" AsyncPostBackTimeout="5000">
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
            <asp:ScriptReference Path="~/Scripts/Module.js" />
        </Scripts>
    </asp:ScriptManager>
    <input type="button" title="click here" onclick="Alerts.PageMethodCall()" />
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>
    <div class="footer">
    </div>
    </form>
</body>
</html>
  1. 请注意 ScriptManager 标签。 它有两个属性被赋值
    1. EnablePageMethods = "true" 意味着，它允许直接从 JS 调用“web 页面”方法。
    2. AsyncPostBackTimeout 属性设置为指定获取结果的超时限制。
  2. 我们添加了 ScriptReference 标签来分配引用的脚本。 请注意，我们创建了一个名为 "Module.js" 的新文件，并复制了顶部定义的 jQuery 方法。
  3. 仔细查看以下行
    4. <input type="button" title="click here" onclick="Alerts.PageMethodCall()" />

    在单击按钮时，我们正在调用 Alerts 模块的页面方法。 在这里，我们需要在要调用的“页面方法”之前添加“模块名称”，因为页面方法仅在“Alerts”模块的范围内定义。 使用相同的方法，我们避免污染 JavaScript 的全局命名空间，这是定义 JS 方法的最佳实践之一。

结论  

模块模式和页面方法比乍一看更容易访问。 EnablePageMethods 的相对不重要性是一个令人愉快的惊喜。 为了以最少的复杂性演示该机制，此示例特意是一个最小的示例。

© . All rights reserved.