Callback & Controls Rendering (Manually Partial Page Rendering)

In my previous article, I wrote about Callback and JSON based Javascript serialization which you can find here. 

1. Why Should I read this article:    As Callback doesn’t cause postback and page rendering neither full nor even partial. We can communicate with server (IIS) and our server side code runs there successfully and could rebind our controls like Dropdownlist, Gridview, Listview, Datalist, Repeater or any server side control to which you assign data but problem is when page wont render, its controls wont render and if controls wont render then changes wont reflect and when changes wont reflect there wont be anything at front end to show on webpage. Article is mainly about Callback and Rendering Controls but through this tutorial you can also learn many other things like brief introduction of Postback, Rendering, Create server side controls dynamically, Create Datatable dynamically in memory to bind with create server side controls means binding, get server side control at client side and set their properties and registering client side event of server side control from/through server side code. First of all, I would like to brief some terms which I believe every web developer should aware of.  

2. Postback:     Postback is a mechanism of communication between client-side (browser) and server-side (IIS). Through postback all contents of page/form(s) sent to the server from client for processing and after following page life cycle all server side contents get render into client side code and client (browser) display that contents. Callback is another way of communication between server and client. Callback doesn’t follow the page life cycle which followed by in standard postback and doesn’t even cause Rendering. 

3. Rendering:          Rendering is process of converting server side code/contents into client side code/content so client (browser) can understand that code and could display the output. Browser can understand or you may say decode code of client side languages and scripts like HTML, DHTML, XHTML, Javascript, Vbscript and a long list. If rendering wont happen then changes won’t reflect which happens on server at client side. Ajax leverages partial postback automatically whereas callback doesn’t cause, so programmer needs to perform that task manually. ASP.NET team has created RenderControl method with its each control so by using that control we can render our control very easily. 

 4. CALLBACK:       CALLBACK is lightweight process, It uses well known xmlhttp object internally to call server side method, it doesn’t cause page postback so doesn’t cause page rendering so we to show output at client side we need to make output html ourselves and render controls manually. 

5. ICALLBACKEVENTHANDLER:            ICALLBACK implemented in asp.net by using ICALLBACKEVENTHANDLER interface has two methods, one of them used to be call from javascript (client side code) and other one return result asynchronously back to javascript function. We just need to perform some action through server side code at server side and needs to return results but results could are in instance or object of any class which could be not easy for javascript code to handle easily so here we prefer JSON which stands for Javascript Object Notation. 

7. Real Time Scenario with implementation:          Suppose we have categories, subcategories, products data and needs to populate categories and subcategories which depend upon categories data would be populate in two different dropdownlists. For products data which is multicolumn and we need to show that data in tabular format so I would prefer Gridview control.  So the situation would be load/populate categories on Page_Load and load/populate subcategories on the basis of selected category using callback and finally load products into Gridview on the basis of selected subcategory.  Before starting coding, I would like to write Pseudo code for better understanding.  

8. Pseudo Code

1.      Create Server side controls e.g. Dropdownlists and Gridview

2.      Load Categories on Page load

3.      Implement ICallbackEventHandler interface

4.      Create subcategories data in server memory to bind to Subcategory dropdownlist.

5.      Render control (subcategory dropdownlist) and show output.

6.      Create products data in server memory to bind to Products gridview.

7.      Render Control (products gridview) and return rendered contents to client side to show

8.      Set innerHTML of each control by rendered contents  

———————————–CODE————————-

CREATE CONTROLS (DROPDOWNLISTS, GRIDVIEW)      

css.jpg         

CALLBACK SERVER SIDE CODE

Let’s implement ICALLBACKEVENTHANDLER to call server side method asynchronously step by step J Implement Server Side (C#) Page/Control class by System.Web.UI.ICallbackEventHandler Following are definition of two methods which needs to implement: RaiseCallbackEvent method invoke by javascript function

 ss1.jpg

CALLBACK CLIENT SIDE CODE 

 script-ss2.jpg

 Thants it. These are the steps which you need to use to call and get result from server side code using ICALLBACK.  

Asynchronously output would be within a millisecond and without Postback J  

Conclusion:

Callback is lightweight technique used to call server side methods asynchronously from javascript without any postback and reloading/rendering of unnecessary parts of page and unnecessary code  So we can use that when we need to perform any operation at backend means at server like update records in database or like that. You don’t need to send all your contents of page in request and make that object heavyweight which could cause slow performance.   

11 responses to “Callback & Controls Rendering (Manually Partial Page Rendering)

  1. Alex Archambault

    Great article, I’ve been testing and it’s working great and super fast.

    I do have a question though, is there a way to preserve the events of the gridview when redering it on the client?

    Thanks and again great work

  2. I Have Like This Code. and I Have a LinkButton in GridView. after CallBack my Link Button is diable.why?
    plz help me.

  3. mian tayyab hafeez

    AOA
    im lawyer. my friend nisaar told me about u. i’ve explore ur blog site. sincerely i cant understand ur technical language. once i did some work in web development but now i’ve forget everything now im again interested in having skill in IT. can u help me or if u interested then what kind of help will u do.

    And tell me one thing who did make those sketches i saw; thats wonderfull. tell me his name i will have to contect him also.

    Muhhamad Tayyab Hafeez

  4. wow, I just came across the site and read the article, excellent article, very clear with all technical details information. I love the scripts and I love you too. Thanks for posting the article. very helpful infor for developers.

    -thomas

  5. Hi Adnan,

    I am also doing something like this. I have created many user controls for our site.

    Now There is only one controller page, which will load controls dynamically. I have added update panle and placeholder in controller page. These controls dynamically added to this placeholder.

    But some controls which have inline javascript block, the javascript does not executes when controls loaded.

    Can u help me to find solution how to execute inline javascript of dynamically added controls.

    I am using yui auto complete control in my user control.

    Thanks

    Ajay

  6. Alexwebmaster

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  7. Very good!!!!!!!!!!!!!!!!!!!!!!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s