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());
}
}
} (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>
- Please note the
ScriptManager tag. It has two properties assigned:
EnablePageMethods = "true" which means, it allows to call a "web page" method directly from JS.AsyncPostBackTimeout property is set to specify the timeout limit to get results.
- 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.
- See the below line carefully:
<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.
