Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Calling ASP.NET Page Methods with jQuery (Revealing Module Pattern)

0.00/5 (No votes)
3 Oct 2012 1  
Calling ASP.NET Page Methods with jQuery (Revealing Module Pattern).

Introduction

This article is a brief overview of the "Revealing Module Pattern" and how it can call a Page Method using AJAX with jQuery (Revealing Module Pattern) without polluting the global namespace (window). 

What is Revealing Module Pattern? 

The Revealing Module Pattern actually uses the concept of Self-Executing Anonymous Function as well, but in this case we save the result into a variable. This pattern introduces the concept of a Closure. A closure is a way to keep variables alive after a function has returned. The Mozilla Developer Network has a great page explaining closures. In it they provide a core definition: 

“A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.”

Example

(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)); 

Here, you will be surprised by the following:

What is meant by :  

window.Alerts=window.Alerts || {} 

The code checks to see if Alerts exists in the global namespace, i.e., Window. If it does not exist, then windows.Alerts is assigned an empty object literal. Using this approach we can build a library across JavaScript files. If another script uses the same technique, then it will pass in the existing instance and append logic to it. Inside the Anonymous Function, if we want something to be public, then we append it to the Alerts object. Other properties or methods will be considered private.

The second argument passed is jQuery. The benefit of this is that the named parameter is referenced as $, which allows us to refer to jQuery as $ within the Anonymous Function without having to worry that it will conflict with the $ declared in other JavaScript libraries. This is a common practice that you will most likely run across when looking at well written jQuery code.   

Page Methods

Page Methods is a new mechanism in ASP.NET applications where the server code can be bound to ASP.NET pages. It is an easy way to communicate asynchronously with the server using ASP.NET AJAX technologies. It is an alternate to calling the page which is reliable and carries a low risk. It is basically used to expose the web methods to the client script. 

This tutorial assumes you have some familiarity with Page Method concept of ASP.NET and basic knowledge of jQuery.

Example

Let's take a case, on click of Button of ASPX page, we need to invoke "PageMethodCall" the of Alerts module defined above. Lets see, How to do that. 

Create a .aspx page:  

<%@ 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. Please note the ScriptManager tag. It has two properties assigned:
    1. EnablePageMethods = "true" which means, it allows to call a "web page" method directly from JS.
    2. AsyncPostBackTimeout property is set to specify the timeout limit to get results.
  2. We added the ScriptReference tag to assign scripts referenced for same. Please note, we have created a new file called "Module.js" and copied a jQuery method defined on top.
  3. See the below line carefully:
  4. <input type="button" title="click here" onclick="Alerts.PageMethodCall()" />

    On the click of a button, we are calling the Page Method of the Alerts module. Here we need to add "Module Name" just before "Page Method" to be invoked as Page Methods are defined in the scope of "Alerts" module only. Using same, we are avoiding to pollute global namespace of JavaScript which is one of the best practice of defining JS methods.

Conclusion  

Module Pattern and Page methods are much more openly accessible than it may seem at first. The relative unimportance of EnablePageMethods is a nice surprise. To demonstrate the mechanism with minimal complications, this example has purposely been a minimal one. 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here