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 defined onChange="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.
If you like my article, please leave a comment.
Thank you!