How to Write managed Code in JQuery

I would like to share my experience to write managed code in jQuery. Mostly guys just put the <script></script> tag in the page header or end of the body and write their /jQuery function on each page, which is not the managed way to write the jQuery code. So how should we start? Please go through the following points and attached pictures.

1. Firstly create a global file for jQuery, which will maintain all variable used in your project for jQuery. Do not write hard code message wherever required, because once you need to change you have to change everywhere. So just define variable in a common file. In below project, I have created a file named as "AppGlobalVar.js". For reference go through the picture named as "AppGlobalVar.png" and "AppGlobalVar-Declaration.png". Here you also can define enum type as you define in .NET project and you can use in code.

   

   

   In AppGlobalVar-Declaration.png you can see, how I have declared the global variable, enum and constructor variable which I have used throughout the project.

2. Now create an EventManager.js page which will maintain all jQuery events of your projects. Whenever required add any required event to any id or any class or any control just put here. Why I have given this page name as EventManager.js, because it handles all events of jQuery. You can give any appropriate name. For reference go through the picture named as "EventManager.png". Here you can see in document.ready I have bind all event with function. What are these function, will describe in next step.

In the "EventManager.png" you can see hows I have bind different function on different id. Like

//Focus
$("#ContinueChangePassword").live('focus', function () { if (this.blur) this.blur() });
 
//Keyup
$('#new_password').live('keyup', function (event) { CheckIfPasswordIsValid.OnInit(event.currentTarget) });
 
//click
$('#deleteUnRegisterUsers').live('click', function () { deleteUnRegisteredUsers.OnInit() });

3. Now whatever functions you have bind in EventManager.js just create a file for that. In my project I have created a file named as "EventHandle.js". For reference go through the picture named as EventHandle. Here you see I have created function just like a life cycle. It will take time to write the function in this manner but this is a very good practice to write the code just like this. I am describingbelow the need ofeach cycle in this function. Again just take the example from the picture as I have used in my project.

   

   Here you will notice, I didn’t use $.Ajax() to post or get any C# method. For this I have also wrote a managed js file in my project. That’s why here I am using "ServiceProxy.invoke". Here I passed method name with controller and required input parameters also I didn’t hardcode the controller name. I just put the controller name in "AppGlobalVar.js".

   In the "EventHandle.png" you can see hows I have wrote the code in different cycles.

   1. In the OnInit cycle I get the values from control.
   2. In the OnPreRender cycle you can make any modification before paas it to getdata.
   3. In the GetData cycle I just call the controller functionusing "Proxy.Invoke" as I have wrote previously I am not using $.Ajax as I have already modify the code for that also so that I can use that as generic function.
   4. In the BindData cycle I just checking if the result is successful then what I need to display I am doing that.
   5. If there any error you can also handle the error in this section
   6. Finally OnExit cycle. Where you can wrote any thing like if you are showing the loader div, you can hide the div in this section.
4. One another most important file that is utility. Utility file is used where you put all common function will used in your project for /jquery. I have created "CRPUtility.js". You can give any name for your convenience. You can put all common function here. Ex. ValidEmail, displayloader, requiredfield etc." For reference go through the picture named as "CRPUtility.png". In the picture see how I defined the function. All common functions are in one umbrella (means in one variable). Just type the variable name and press dot(.) you will see all function listing will be there.

In the previous image named as "CRPEventHandle.png" you can see I used CRPUtility.CheckEmailPattern, CRPUtility.DisplayLoaderDiv() and CRPUtility.HideLoaderDiv(). These are few common function which I am using through out the project. So I make an utility script file as described in point no 4.

In the same way If you see first image named as "AppGlobalVar.png" there you can see structure of script file. There is one more file named as "Showdialog.js". I have created a common dialogue function, where you have to pass just following things.

1. Title of the dialogue
2. Message of the dialogue
3. Button of the dialogue
4. Event of the button

As this will get all these fields, it will work automatically. There is nothing to write extra effort tos how dialogue box. If you don’t pass button and there event button will not display. Only title and message will display.

So try these steps to wrote the code in /jQuery and make your code manageable. If you need any type of clarification just contact with me. I will feel happy to server you.