Menus

Saturday, December 1, 2012

ASP.Net Server Side Yes No Confirmation Box using JavaScript

As we all know that JavaScript confirm allows PostBack when OK is clicked but does nothing when Cancel is clicked and on many occasions we want to do server side operations on both OK and Cancel click events. Keeping in mind I came up with the following solution.

Below is the HTML Markup of the sample that I have built. Here I have a button btnConfirm which will trigger the JavaScript confirm on its OnClientClick event. Then in the JavaScript Confirm method I store the input provided by the user in a dynamically created hidden field i.e. If OK is pressed I store value Yes and if Cancel is pressed I store No, so that we can pass the user inputs onto server side code. Then I allow the button to do normal PostBack and raise the OnClick event.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type = "text/javascript">
        function Confirm() {
            var confirm_value = document.createElement("INPUT");
            confirm_value.type = "hidden";
            confirm_value.name = "confirm_value";
            if (confirm("Do you want to save data?")) {
                confirm_value.value = "Yes";
            } else {
                confirm_value.value = "No";
            }
            document.forms[0].appendChild(confirm_value);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <asp:Button ID="btnConfirm" runat="server" OnClick = "OnConfirm" Text = "Raise Confirm" 
OnClientClick = "Confirm()"/>
    </form>
</body>
</html>
 
Now server side we need to fetch the user input that we stored in the dynamic hidden field and then based on whether he has selected OK or Cancel we need to execute different code. In order to simulate this process I have added alert box with different messages.
 C#

public void OnConfirm(object sender, EventArgs e)
{
    string confirmValue = Request.Form["confirm_value"];
    if (confirmValue == "Yes")
    {
        this.Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked YES!')", true);
    }
    else
    {
        this.Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked NO!')", true);
    }
}
 

VB

Protected Sub OnConfirm(sender As Object, e As EventArgs)
        Dim confirmValue As String = Request.Form("confirm_value")
        If confirmValue = "Yes" Then
            ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "alert('You clicked YES!')", True)
        Else
            ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "alert('You clicked NO!')", True)
        End If
End Sub


Below shows the screenshots


Server side Yes No confirmation box using JavaScript in ASP.Net

Server side OK Cancel confirmation box using JavaScript in ASP.Net

No comments:

Post a Comment