Developersdex.com - Working with Callback and Control Rendering

46,837 Members
0 added today
536,880 Resources
404 added today

All Devdex All Gurus

Working with Callback and Control Rendering
Author: Muhammad Adnan Amanullah
Rating:
Visits: 1639

1006_Callback_Rendering_Controls.zip
Discuss in Newsgroups

Page:

Introduction

In my previous article, I wrote about Callback and JSON based JavaScript serialization which you can find here. Callback doesn't cause postback and page rendering, neither full nor even partial. With it we can communicate with the 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. The problem is when the page won't render, its controls won't render, and if controls won't render then changes won't reflect. When changes don't reflect there won't be anything at the front end to show on the webpage.

This article is mainly about callback and rendering controls but through this tutorial you can also learn many other things; how postbacks work, how rendering works, how to dynamically create server-side controls, how to create DataTables dynamically in memory to bind with, how to get server-side controls during client-side execution and set their properties, and how to register client-side events of server side control from the server-side code.

Important Terms

First of all, I would like to briefly describe some terms of which I believe every web developer should be aware.

Postback

A postback is a mechanism of communication between client-side (browser) and server-side (IIS). Through a postback all contents of page/form(s) are sent to the server from client for processing. After following the page life cycle, all server-side contents get render into client-side code and the client (browser) displays the content. Callback is another form of communication between server and client. Callback doesn’t follow the page life cycle which is followed by standard postback, and it doesn't even cause rendering.

Rendering

Rendering is the process of converting server-side code/content into client-side code/content so the client (browser) can understand the code and could display the output. Browsers can understand, or you may say decode, code of client-side languages and scripts like HTML, DHTML, XHTML, JavaScript, VbScript, etc.

If rendering doesn't happen then changes won’t be reflected at client-side. Ajax leverages partial page postbacks automatically whereas callback doesn't, so programmer needs to perform that task manually.

The ASP.NET team has created a RenderControl method which is applied to the base control. By using that method we can render our controls very easily.

Callback

Callback is a lightweight process. It uses the well known XMLHTTP object internally to call server side methods. It doesn't cause page postback so doesn’t cause page rendering, so if we want to show output at client side, we need to make output html ourselves and render controls manually.

ICallbackEventHandler

ICallback is implemented in ASP.NET by using the ICallbackEventHandler interface, which has two methods, one of them used to be called from JavaScript (client-side code) and the other one returned results asynchronously back to the JavaScript function.

We just need to perform some action through server-side code at server-side and need to return results, but the results could be an instance or object of a class which might not be easy for JavaScript code to handle, so here we prefer JSON which stands for JavaScript Object Notation.

Real Time Scenario with implementation

Suppose we have categories, subcategories, products data, and we need to populate categories and subcategories which depend upon categories, and the data would be populated in two different DropDownLists. For products data which contains multiple columns so 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 the Pseudo code for better understanding.

Steps

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 DropDownLists.

5. Render control (subcategory DropDownLists) 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

Next Page >>

Visitor Comments