Click here to Skip to main content
Click here to Skip to main content

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

, 3 Oct 2012
Rate this:
Please Sign up or sign in to vote.
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

T@RuN!!
Technical Lead
India India
I am very passionate for Technology and working in .NET and Borland Tech-Stack from last 7 years.In my free time, I like to spend time in gym. Technology and Gym is something without my life is incomplete.

Comments and Discussions

 
GeneralMy vote of 3 Pinmemberviveknttdata23-Oct-13 22:10 
GeneralMy vote of 1 PinmemberMember 841890512-Aug-13 20:18 
GeneralMy vote of 4 PinmemberMember 766037111-Dec-12 20:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 3 Oct 2012
Article Copyright 2012 by T@RuN!!
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid