How do I create a pop up Yes/No message box called from and return the result to C# code? Javascript? Something else?

Question

How do I create a pop up Yes/No message box called from and return the result to C# code? Javascript? Something else?

RD 40

This is what I have. It seems to pass the false value and go into the else area. I need the pop up box to appear, let the user select confirm or cancel then pass that value back to the C# code.

Any thoughts?

Thanks in advance!

`<script type="text/javascript">`

function confirm_closing()

{

var confirmValue = document.createElement("INPUT");

//confirm_closingValue.type = "hidden";

confirm_closingValue.name = "confirm_closingValue";

if (confirm_closing("Do you want to accept the closing?")) {

confirm_closingValue.value = "CONFIRM";

}

else

{

confirm_closingValue.value = "CANCEL";

}

document.forms[0].appendChild(confirm_closingValue);

}

</script>

          C# Code
              ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "confirm_closing()", false);

string confirm_closingValue = Request.Form["confirmValue"];
                        if (confirm_closingValue == "CONFIRM")
                        {

                            //Do Something
                        }
                        else   
                        {
                            //Do Something Else
                        }

0 comments

Answer accepted by question author

3 additional answers

Your answer

Answer 1

Lan Huang-MSFT 30,211 Microsoft External Staff

Hi @RD,

Based on your code, are you passing confirm_closingValue to c#?

But the naming of your "input" is messy, named confirmValue, and the next line becomes confirm_closingValue.

I think you should unify, you can refer to the code below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type = "text/javascript">
        function confirm_closing() {
            var confirm_closingValue = document.createElement("INPUT");

            confirm_closingValue.name = "confirm_closingValue";
            if (confirm("Do you want to accept the closing?")) {
                confirm_closingValue.value = "CONFIRM";
            } else {
                confirm_closingValue.value = "CANCEL";
            }
            document.forms[0].appendChild(confirm_closingValue);
        }     
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <asp:Button ID="btnConfirm" runat="server" OnClick="OnConfirm" Text="Confirm" OnClientClick="confirm_closing()"/>
    </form>
</body>
</html>

public void OnConfirm(object sender, EventArgs e)
        {

            string confirmValue = Request.Form["confirm_closingValue"];
            if (confirmValue == "CONFIRM")
            {
                this.Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked CONFIRM!')", true);
            }
            else
            {
                this.Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked CANCEL!')", true);
            }

        }

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

RD 40 Reputation points

2023-03-14T01:13:10.6733333+00:00
Hi @Lan Huang-MSFT !

Thank you for the information. I understand what you are saying. I created a simple project and used your code so I see how that works.

In my current project, I have a button <Submit>. When the user clicks this button, the code does validation (based on data from the database). If this validation passes, I need the pop up box to appear and ask if the user accepts the closing. If the user clicks <Ok>, the processes the closing. If the user clicks <Cancel>, the code refreshes the page.

The example you provided (and what I have found in my research) bases the popup box on the button_click event. However, I need it to be after the validation is done so I don't think I can use the OnClientClick call. If so, can you provide the code for it? I have not been able to do this. Everything I do causes the popup box to display after the method finishes and the page refreshes.

Here is a mock up of the code I am using:

protected void btnSubmit_Click(object sender, EventArgs e) { string one = "one"; string one1 = "one"; if (one == one1) //simulates validation { //put javascript popup box here string confirmValue = Request.Form["confirm_closingValue"]; if (confirmValue == "CONFIRM") { //process closing } else { //refresh page } } else { //do nothing } }

Does this make sense? Is it possible to do validation then display the popup box?

Thanks!

Rhonda

Lan Huang-MSFT 30,211 Microsoft External Staff

Hi @RD,

You can check if the code below can help you.

<asp:button id="save" runat="server" text="Save" onclick="btnSubmit_Click" onclientclick="return confirm('Are you sure you want to save selected records?');" />

 public void btnSubmit_Click(object sender, EventArgs e)
        {
            string one = "one";
            string one1 = "one";

            if (one == one1)
            {
                Response.Write("<script type='text/javascript'>");
                Response.Write("alert('This is alert1 if condition1 satisfied.');");
                Response.Write("</script>");
            }
            else
            {
                Response.Write("<script type='text/javascript'>");
                Response.Write("alert('This is alert2 if condition1 does not satisfy.');");
                Response.Write("</script>");
            }

        }

Answer 2

Well, the standard in asp.net webforms is this behavour:

You drop into the web form a standard asp.net button.

You then attach BOTH a client side JavaScript event, and a server side even to that button.

If the JavaScript code returns true, then the server side code will run. If the JavaScript code returns false, then the server side button code will not run.

Of course the above is simple if you use JavaScript confirm, since it halts code. However, the built in confirm dialog does not look all that great.

I could Segway in this post and point out that the HTML5 standards about 8 years ago added a new modal dialog option, and they are REALLY nice, easy, and don't require any 3rd party library code. And as about January of this year, near all browsers now support the new dialogs and modal options.

However, I use jQuery.UI dialogs, and I adopted them for a bunch of reasons, but one really nice reason is they support "position" on the screen, and I thus like having my dialog boxs pop up right beside where the button click occured.

So, in the most simple way, let's pop a jQuery.UI dialog, and pass true, or false to the button click.

The advantages of above are many:

Such as, you can add dialogs to EXISTING buttons, and not have to add any hidden fields.

You don't need to add extra code to post-back the page, but you "continue" to enjoy a simple plain jane button click on those web pages.

So, lets drop in a standard asp.net button and add the server side event.

So, this markup and code:

    <h3>Button test</h3>
    <asp:Button ID="Button1" runat="server" 
        Text="My button test"
        OnClick="Button1_Click"
        CssClass="btn btn-info"
        OnClientClick="return mydialog(this)"
        />
    <br />
    <asp:Label ID="Label1" runat="server" Text="">
    </asp:Label>

    <div id="mypopdiv" style="display:none">
        <h3>Delete this record</h3>
        <h4>(This can't be un-done)</h4>
    </div>

    <script>
        var myok = false
        function mydialog(btn) {

            if (myok)
                return true

            var mydiv = $("#mypopdiv")
            mydiv.dialog({
                modal: true, appendTo: "form",
                title: "Test Button", closeText: "",
                dialogClass: "dialogWithDropShadow",
                position: { my: 'left top', at: 'right bottom', of: btn },
                buttons: {
                    Ok: function () {
                        mydiv.dialog('close')
                        myok = true
                        btn.click()
                    },
                    cancel: function () {
                        mydiv.dialog('close')
                    }
                }
            });

            return false
        }
    </script>

And code behind for this button is this:

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = "this is server side code";
        }

And now the result of above is this:

ndialog

So, the only "trick" in above is that most JavaScript routines are asynacrours, and don't wait. However, as above shows, we get around this issue by adding a "flag" variable to above and passing the btn control. This means that no hidden controls, or even fancy js await commands are required. And besides, by passing the btn, then we can position the dialog to the lower right of the button click, and I often use this for grid buttons, or anything else on a page, since when a user clicks a button, their eyes are focused on that spot, and hence display of a dialog in the same area as to where the user clicked makes much sense from a UI point of view.

As noted, the other big bonus of above is we can with ease add dialogs to existing buttons, and don't have to change the server side code, don't have to introduce addtional fields or controls on the client side. So, the long time simple apporach of having the routine return a true (to run the server side code), or false (to not run server side code) can be used with the above approach.

In fact, this means then one can build a user control, and thus to have dialogs then you simple drag + drop in your UC, and specify the button for that user control to operate against, and you have a re-usable drag + drop dialog control, and one that you can drop into any web page without having to write additional code.

Answer 3

Bruce (SqlWork.com) 83,821

RegisterStartupScript Does not run the script. It adds the script text to a collection. When the page html is generated, the script text is added to the html. Then the browser loads the html, sees the script and executes it.

to tell the server the yes/no the script will need to update a hidden field with the answer and do a postback so the server can process the answer.

RD 40 Reputation points

2023-03-13T01:26:56.62+00:00

Thanks for the information, Bruce. I am new to JavaScript so I am not sure exactly how to do this. For my use, the user clicks on a button, validation is done to ensure they are ready to proceed. If they are, I need to display the message box and return the response to decide what to do next. All of the examples I have found only display the message box when the page unloads. How can I do this in the middle of the method in C#?

I found this code:

<asp:HiddenField id="HiddenField1" runat="server" />

In my codebehind:

ClientScript.RegisterStartupScript(GetType(), "Message", "<SCRIPT LANGUAGE='javascript'>var ays = confirm('Are you sure ?');document.getElementById('" + HiddenField1.ClientID + "').value = ays;</script>")

Then in the code behind:

string confirmation = HiddenField1.Text;

The problem is it doesn't display until the method completes.

Answer 4

Karen Payne MVP 35,606 Volunteer Moderator

Unsure if this will work for you, have an example which works on a button click, ask a question, assigns result to a Model property and performs a post.

Uses sweetalert2.

Post

0 comments

Share via

How do I create a pop up Yes/No message box called from and return the result to C# code? Javascript? Something else?

3 additional answers

Your answer