In this article, i am going to show you how you can execute JavaScript after completion of server side code and vice-versa.
1) Suppose there is a asp.net button control on the asp.net web page that will trigger postback to the server. Your requirement is to display a confirmation dialog box to the user. If user clicks OK on the confirmation dialog box, Postback on the server should happen otherwise not.
What we can do is to add script on the client click event of the asp.net button that will display confirmation dialog box to the user. if the user clicks on OK, the script will return true otherwise false. Value of true means the server side onclick event of button will fire. If user clicks on cancel, false will be returned by script and server side onclick event will be cancelled.
Add the following code to the asp.net page.
<asp:Label runat="server" ID="lblMessage"></asp:Label>
<div>
<asp:Button ID="btnClickMe" runat="server" Text="Click me"
OnClientClick="return confirm('Are you sure want to continue?');"
OnClick="btnClickMe_Click"/>
</div>
Add code to the btnClickMe_Click event handler in Code behind file of aspx page
protected void btnClickMe_Click(object sender, EventArgs e)
{
//Do any server side processing here
lblMessage.Text = "You clicked the button";
}
Now when the user clicks the button on the page, a confirm dialog box will be displayed to the user. If the user chooses Ok, server side onclick event will fire and message will be displayed to the user on the label otherwise server side onclick event will be cancelled.
2) Second case is to execute JavaScript after doing server side processing. Asp.net has provided classes to register JavaScript code dynamically from the code.
In the btnClickMe_Click event handler, just add the following code
ClientScript.RegisterClientScriptBlock(this.Page.GetType(),
btnClickMe.ID, "alert('Server side processing is done.')", true);
The ClientScript.RegisterClientScriptBlock method register the script on the page dynamically. First argument is the type of control on which you want to register the script, second argument is a key which i have specified with button control Id but you may change it to any string, third is the script itself and fourth argument tells whether to add script tags to the script or not. In our case it is set to true which means script tags will added around the alert statement automatically by asp.net.
3) The last case is to mix these two together i.e calling JavaScript code after doing some server side processing and after executing JavaScript resuming on server side.
Any client side code that we are executing from the server side will be executed only after server side processing is complete. But their is a workaround for it. This is not a good practice but yet it can help in some scenarios where you need to take confirmation from user in between of the server side processing to proceed further.
So let's do it. First of all we will put a asp.net hidden field on the aspx page. We will also create a JavaScript function that will be executed in between the server side code. Following is markup of the page.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function ExecuteConfirm()
{
var returnValue= confirm('Do you want to proceed further?');
if(returnValue)
{
document.getElementById('hdnExecuteAfterConfirm').value="1";
document.getElementById('btnClickMe').click();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label runat="server" ID="lblMessage"></asp:Label>
<div>
<asp:Button ID="btnClickMe" runat="server" Text="Click me"
OnClick="btnClickMe_Click"/>
</div>
<asp:HiddenField runat="server" ID="hdnExecuteAfterConfirm" />
</form>
</body>
</html>
Now in the onclick event of button, write the following code
protected void btnClickMe_Click(object sender, EventArgs e)
{
//Do server side processing before confirmation
if (hdnExecuteAfterConfirm.Value != "1")
{
lblMessage.Text = "You clicked the button";
ClientScript.RegisterStartupScript(this.Page.GetType(),
btnClickMe.ID, "ExecuteConfirm()", true);
}
//Do server side processing after confirmation
else
{
//Proceed further with server side processing
//Reset the value of hidden field
hdnExecuteAfterConfirm.Value = "";
//Notify the user that processing is complete.
ClientScript.RegisterStartupScript(this.Page.GetType(),
btnClickMe.ID, "alert('Processing is complete.')", true);
}
}
when user clicks the button first time, the value of hidden field will be blank, so the if block will be executed and JavaScript function ExecuteConfirm() will be called. This function will ask the user to confirm if the user wants to proceed with the server side processing. If the user chooses Ok, function will set the value of hidden field to "1" and fire the click event of button. This time else block of btnClickMe_Click method will be executed. Please note that previously processed results in the if block will be lost if you haven't saved them to a permanent store like database etc. If you want to retrieve previously processed result, you can choose to save them in viewstate of the page, session or in any other medium like database or file system etc. so that the next time when else block is executed , you can get the previously processed result.
In this way you can mix the client and server side code together. Have fun!