Microsoft.NET

……………………………………………….Expertise in .NET Technologies

How to Return Value from Javascript to Server Side

Posted by Ravi Varma Thumati on April 6, 2011

This article will teach you how to retrieve JavaScript functions Return Value to Code Behind

Introduction

Some time it’s necessary to send a JavaScript function’s return value to server-side. For example, we are able to show a Confirm Dialog using Page.RegisterClientScriptBlock() but after we are cannot determine which button a user have pressed on the JavaScript Confirm Dialog. This article will teach you about how to get values in JavaScript from a client-side to server-side such as find out what button a user has clicked on a ConfirmDialog.

Prerequisites

Basic Knowledge of JavaScript,C#.

 

Technology

asp.net c# 2.0/3.5

Implementation

 

Let’s Get Starteded.

Suppose we want to show a confirm dialog when user selects some item in a Dropdownlist and we want to know which Button user have pressed on the Confirm Dialog. Means we want to know if he has pressed “Ok” button or “Cancel” button in our code on server-side.

To get JavaScript values in the code-behind, we need Hidden Input Control, whose runat attribute we will set to  runat=”Server” so that it can be accessible in code-behind. It will work as an intermediately to pass the value from client-side to server-side.

Below, I have highlighted two parts – One is Script in <head> part of the code it contain Function ConfirmIt() .

That will be executed when a user select an item in the DropDownList. In the DropDownList, we definedonChange=”ConfirmIt()” that will execute the JavaScript and will set value of Hidden Input Control to 1 if user selects the OK button and will set value to 0 when user selects Cancel button on the Confirm Dialog().

<head runat=”server”>

<title></title>

<script type=”text/javascript”>

function ConfirmIt() {

var x = confirm(“Do you Want to notify changes to User ??”);

var control = ‘<%=inpHide.ClientID%>’;

if (x == true) {

document.getElementById(control).value = “1”;

}

else {

document.getElementById(control).value = “0”;

}

}

</script>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<input id=”inpHide” type=”hidden” runat=”server” />

<asp:DropDownList ID=”DropDownList1″ runat=”server”

onselectedindexchanged=”DropDownList1_SelectedIndexChanged” onChange=”ConfirmIt()”

AutoPostBack=”True”>

<asp:ListItem>Item1</asp:ListItem>

<asp:ListItem>Item2</asp:ListItem>

<asp:ListItem>Item3</asp:ListItem>

</asp:DropDownList>

<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>

</div>

 

</form>

</body>

</html>

Above was the HTML part.

Now let’s look at the code where we will retrieve the ConfirmDialog’s return value at server-side.

Here is my code for the SelectedIndexChanged event of the DropDownList control. As you can see from this code, I simply use the Parse method and get the value of inpHide. If the value of this is 1, I know the OK button was pressed and if the value is 0, I know the Cancel button was pressed.

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

int DiagResult = int.Parse(inpHide.Value);

if (DiagResult == 1)

{

//Do Somthing

Response.Write(“You Have Selected Ok”);

}

else if (DiagResult == 0)

{

//Do somthing

Response.Write(“You have Selected Cancel”);

}

}

That’s pretty simple and self explanatory code.

 

Advertisements

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

 
%d bloggers like this: