Click here to Skip to main content
15,124,449 members
Articles / Programming Languages / Javascript
Technical Blog
Posted 8 Jun 2012

Tagged as


5 bookmarked

How to Access the Input Control’s Data at Server Side During Client Callback: A Useful Trick

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
8 Jun 2012CPOL2 min read
How to access the input control's data at server side during client callback

Client callback is one way to update the webpage without performing the full page postback. It maintains the Client state while updating the Webpage. During Client callback, the webpage runs through the modified version of Page Life Cycle.

The LifeCycle of a page in Client Call Back is as shown below:

Page Lifecycle iin Callback

If you want to learn more about Client Callback, click here.

But the main drawback of Client Callback is that the input data is not posted from Client to Server. Also, it does not maintain the view state during partial postback as you can see the Page life cycle of Client callback is not saved or SaveViewState event is not fired.

Let's see it with an example.

I have created a simple form to collect some information of an person data. And it has a submit button, which initiates a Callback as:

 <tr><td><asp:Label id="lblFName" 
 runat="server" Text="First Name" /> </td>
 <td><asp:TextBox ID="tbFName" 
 <td><asp:Label id="lblMName" 
 runat="server" Text="Middile Name" /> </td>
 <td><asp:TextBox ID="tbMName" 
 <td><asp:Label id="lblLName" 
 runat="server" Text="Last Name" /></td><td>
 <asp:TextBox ID="tbLName" runat="server">
 <td><asp:Label id="lblAge" runat="server" 
 Text="Age" /></td><td><asp:TextBox ID="tbAge" 
 <td><asp:Label id="lblMailId" runat="server" 
 Text="Email" /></td><td><asp:TextBox ID="tbEMail" runat="server"></asp:TextBox></td></tr><tr>
 <td><asp:Label id="lblSex" runat="server" 
 Text="Sex" /></td><td><asp:TextBox ID="tbSex" 
 <td colspan="2"><input id="btnCallBack" 
 type="button" value="Submit" onclick="InitiateCallBack();"/>

Server side code is as:

public partial class Callback : System.Web.UI.Page,ICallbackEventHandler
    string result;
    protected void Page_Load(object sender, EventArgs e)
        if (Page.IsCallback)
        //Creating a reference of Client side Method, that is called after callback on server
        String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg",
            "ReceiveServerData", "");

        //Putting the reference in the method that will initiate Callback
        String callbackScript = "function CallServer(arg, context) {" +
            cbReference + "; }";

        //Registering the method
            "CallServer", callbackScript, true);
    public void RaiseCallbackEvent(String eventArgument)
        string firstName = tbFName.Text;
        //Read other data as well

    public string GetCallbackResult()
        return result;

And the client side method is given below:

function InitiateCallBack() {
     //Initiate the callback

// Called after the server side processing is done
function ReceiveServerData(arg, context) {
    //arg: hold the result
    //Updating the UI
    document.getElementById('divCallbacl').innerHTML = arg;

After filling this form, I submitted it. Now if you try to access the entered using control’s property, you would not get it.

Image 2

Let’s dig it more and check the form collection, whether the data is passed from Client to server or not.

Image 3

So as you can see, the data is not passed in form collection.

But let’s put the following lines of code in JavaScript, just before initiating the call for Callback as:

 function InitiateCallBack() {
	__theFormPostCollection.length = 0;
        __theFormPostData = "";

        //Intiate the callback

Now let’s run the code and submit the form as earlier.

Now, let’s check the form collection.

Image 4

What a surprise, we got all the input data in form collection. That’s nice.

Now access the data using control’s property...

Image 5

...and you got it.

Now let’s try to see what the extra lines of code do.

//This Clear the earlier the old data in form collection.
__theFormPostCollection.length = 0;
//It sets the forms data to empty
__theFormPostData = "";
//This method builds the body of the POST request when the page loads. The body of the page is a string 
//(that is __theFormPostData) filled with the contents 
of the view state and all of the input fields in the form.

But I would suggest to use these lines with caution. Use only when you need to collect the update from Page during Callback. If you don’t need to get some data or it is in readonly page, don’t use it to introduce extra overhead to your page and cost at performance point of view.

Hope you all have enjoyed the post.

Image 6 Image 7 Image 8 Image 9 Image 10 Image 11 Image 12 Image 13


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
India India
Brij is a 3-times Microsoft MVP in ASP.NET/IIS Category and a passionate .NET developer. More than 6 years of experience in IT field, currently serving a MNC as a Tech Lead/Architect.

He is a very passionate .NET developer and have expertise over Web technologies like ASP.NET 2.0/3.5/4.0, jQuery, JSON, Javascript, IIS and related technologies. He is also a Exchange Server (EWS) Specialist. He has great experience in design patterns and N-Tier Architecture.

He is also certified as Microsoft Certified Technologies Specialist-ASP.NET and Microsoft Certified Technologies Specialist-WCF in .NET 4.0. He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website

He has done MCA from NIT Durgapur and completed his graduation from Lucknow University.

Learning new technologies and sharing knowledge excites him most. Blogging, solving problems at various forums, helping people, keeps him busy entire day.

Visit his Blog: Code Wala

Area of Expertise :
C#, ASP.NET 2.0,3.5,4.0, AJAX, JQuery, JSON, XML, XSLT, ADO.Net, WCF, Active Directory, Exchange Server 2007 (EWS), Java script, Web Services ,Win services, DotnetNuke, WSS 3.0,Sharepoint Designer, SQL Server 2000/2005/2008

Comments and Discussions

GeneralMy vote of 5 Pin
Manish Langa26-Jun-12 20:10
MemberManish Langa26-Jun-12 20:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.