Post
Ask Question

IMPLEMENT A REAL AJAX CUSTOM CLASS. STORE THE OBECT VALUES AND RETAIN IT


I have an AJAX custom library. A AJAX custom library is a normal javascript contains general AJAX custom classes and NameSpaces which other javascripts can use. Simly the purpose of library here is same like server side. Reusability. My AJAX custom library name is "SampleAjaxLibrary.js", like below.
/// <reference name="MicrosoftAjax.js"/>
function CreateEmloyees() {
    //Registering a new custom namespace
    Type.registerNamespace("SampleAjaxLibrary");
    //Defining a type named "Emloyees" under "SampleAjaxLibrary" NameSace. Look at that the type
    //constructor also as it's defined with a single argument "id".
    //You can see on calling the constructor one local variable _id will be set.
    SampleAjaxLibrary.Emloyees = function(id) {
        this._id = id;
    }
    //Below defining the body of the above type using a key word "prototype".
    //Any thing like this defined for a type means, those are exosed to the outside world.
    SampleAjaxLibrary.Emloyees.prototype =
    {
        //A function defining to get the "ID" value
        getID: function() {
            return this._id;
        }, ////A function defining to get the "Name" value
        getName: function() {
            return this._name;
        }, //A function defining to set the "Name" value
        setName: function(val) {
            this._name = val;
        }, //A function defining to get the "Age" value
        getAge: function() {
            return this._age;
        }, //A function defining to set the "Age" value
        setAge: function(val) {
            this._age = val;
        }
    };
    //Registering the above referred type,"Emloyees", as a "Class" type under "SampleAjaxLibrary"
    //NameSpace
    SampleAjaxLibrary.Emloyees.registerClass("SampleAjaxLibrary.Emloyees", Sys.UI.Behavior);
   
    //This script library saying that "I am loaded"!!!.
    Sys.Application.notifyScriptLoaded();
}
In every line I put comments in detail. But one general information I need to share with you guys. i.e. 1st line, "/// <reference name="MicrosoftAjax.js"/>".
This one giving a Ref. to builtin "MicrosoftAjax.js". Once you added that line, you will intellisense in VS2008. But if you need intellesense for another JS file which is physically residing in your project, you can use like "/// <reference path="MicrosoftAjax.js"/>". The bolded lines only differs for builtin and custom. So for getting intellisense we added that 1st line.
Now I have a custom JS name "MyScrit.js" like below. This JS using above mentioned AJAX library.
function CallSampleAjaxLibrary() {
    //Creating an object of my newly created AJAX class by passing the constructor argument
    //which will set to the ID of the employee. Please look at the class definition inside
    //SampleAjaxLibrary.js
    var obj = new SampleAjaxLibrary.Emloyees("1");
    //Setting the "Name" and "Age" for the "Employee" object using it's
    //Custom methods.
    obj.setName("Jaish");
    obj.setAge("36");
   
    //After set all values, now getting the setted values for "Employee" class and displaying.
    var info = "ID: " + obj.getID() + "\n" + "Name: " + obj.getName() + "\n" + "Age: " + obj.getAge();
    alert(info);
}
Below is my aspx. I am creating AJAX library inside "pageLoad()" to make sure that all basix AJAX libraries are got loaded for smooth creation of ourlibrary. Other wise you will get errors like "Type" could not identified etc..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="MyScrit.js" type="text/javascript" language="javascript"></script>
    <script src="SampleAjaxLibrary.js" type="text/javascript" language="javascript"></script>
    <script language="javascript" type="text/javascript">
        function pageLoad() {
            //Calling the typelibrary file for creating the "Emloyees" class
            //I am creating "Emloyees" class in side a "pageLoad()". So safe from errors like,
            //"Type" is undefined, that's happening once your script loaded 1st and executing
            //before the basic AJAX script loaded. Here we can ensure all basic scripts are loaded.
            CreateEmloyees()
           
            //Using the custom AJAX library after it's creation
            CallSampleAjaxLibrary();
        }
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
   
    </form>
</body>
</html>
Next Recommended Reading Ajax: FilteredTextBoxExtender