Share a client side return value with the server side code

• Download source - 16 Kb

Introduction

Most of us might have wanted to share a client side return value with the server side code. Say, for example, I want to get the user's confirmation on whether to save the existing data and move to the next page or not?

Here, I can easily display a confirmation dialog to the user through JavaScript, but how will my server side script come to know whether the user confirmed it or refused it? Can this be done? If yes, then how?

I say, yes, it is possible, but how, we will see in the sections below.

Client and Server Interaction

To pass any value to the client, we can easily do by passing the value as an argument to the client side script function.

Like, for the OnClick event of the btnShowMonths button, I've passed the action or target attribute as the argument to my ShowMonths function of the client side script.

#region Page_Load
private void Page_Load(object sender, System.EventArgs e)
{
    if(!IsPostBack)
        btnShowMonth.Attributes.Add("onclick", 
           "return ShowMonths('ShowMonths');");

Passing a value to the client side is a fairly easy task, but the issue is how to get the response back from the client to the server side code. Like, in our code, if the user confirms to show months, my code should fill the list box with the values of all the months, else it should be filled with the days starting from "01" - "31".

No doubt, AJAX is a technique we could have used, but for fairly simple tasks like this, it would be an overhead.

So to avoid the overhead, we can handle the things as described in this article.

To get the client return, we can use the __doPostBack method available in JavaScript. This method takes two arguments, first is the event target, and the second is the event arguments. Event target is the name of the method at server side that will handle the postback request fired from the client side function, and event argument is the argument return values passed from client to server side code.

After post back, these two values are automatically stored in two hidden boxes of the ASPX page, by default.

These are "__EVENTTARGET" and "__EVENTARGUMENT". These two values can be fetched using Request.Form["__EVENTTARGET"] and Request.Form["__EVENTARGUMENT"] respectively, as we have done in the code below:

#region EventArgs
private string EventArgs
{
    get{
        return Request.Form["__EVENTARGUMENT"].ToString().ToUpper();
    }
}
#endregion EventArgs

#region EventTarget
private string EventTarget
{
    get{
        return Request.Form["__EVENTTARGET"].ToString().ToUpper();
    }            
}
#endregion EventTarget

Our Handlepostback method in the code actually checks the value of the EventTarget after each post back to check which server side function or method to execute.

#region HandlePostBack
void HandlePostBack()
{
    switch(EventTarget)
    {
        case "SHOWMONTHS":
            ShowMonths();
            break;
    }
}
#endregion HandlePostBack

If our client side code posts back some other target methods, we can add them to our list here in the HandlePostBack() method.

[Note: this will only work if at least one control on our web page has the AutoPostBack property set to true, else it will throw a JavaScript runtime error for __doPostBack not found.]