ASP.NET WebForms Confirm

Question

I'm new to web programming with .NET.

I am developing a web page with webforms, and I want at a certain moment to programmatically show a modal window, for the user to accept or cancel, according to a question. Exactly what does the "confirm" function of JavaScript.

I tried to get it calling a JavaScript function:

Page.ClientScript.RegisterStartupScript (this.GetType (), "CallMyFunction", "MyFunction()", true);

But I need to do it without reloading the page, and I also need to control if the user has accepted or canceled and I do not know how to do it.

I've also tried getting it using the ModExPopupExtender control from DevExpress.

Can someone tell me a simple way to get what I want?

I can not understand how something so usual in web programming, and that PHP + javascript would not pose any problem can be so complicated.

All start in a one-button event on the code behind:

  protected void btn1_Click(object sender, EventArgs e)
        {
           //I make a series of checks

           //If certain conditions I want to show the confirm

           //According to the user has chosen ok or cancel will perform a certain action
         }

Onclientclick does not help me because before launching the "confirm" I have to do some checks on the server side. Thank you very much.

Answer 1

You can use OnClientClick which is a property on most web controls.

I like to just bring up a simple confirm() dialog which executes the server code if the user clicks OK and does nothing if the user cancels the action:

<asp:Button runat="server" ID="btnSave" Click="btnSave_Click" Text="Save"
    OnClientClick="return confirm('Are you sure you want to do this thing?');"  />

You can do other things with it as well, but the key thing to remember is that anything you do in OnClientClick will happen before the page gets posted back to the server.

This is also perfectly valid:

<asp:Button runat="server" ID="btnSave"
    OnClientClick="showModalConfirm('some message goes here');" ... />

<script>
    function showModalConfirm(msg)
    {
        $(".modal .message").innerHtml(msg);
        $(".modal").Show();
    }
</script>

You can set the action that OnClientClick should perform in your codebehind in exactly the same way:

protected void Page_Load(object sender, EventArgs e)
{
    btnSave.OnClientClick = "return confirm('Are you sure you want to do this thing?');";
}

Answer 2

You can use below code in c# to call javascript function. Below code will execute afterpostback() javascript function:

ClientScript.RegisterStartupScript(GetType(), Javascript, "javascript:afterpostback();", true);

And you can write code in javascript function to display any div or popup:

<script language="javascript" type="text/javascript">
 function afterpostback() {

            //Here you can write javascript to display div/modal
    }
</script>

Answer 3

One way I've handled this previously was to have 2 buttons on the page. The first would be initially visible and labeled "Submit". The second would be initially hidden and labeled "Confirm". The "Submit" button would postback upon click and perform your server side checks/validation. If those checks failed, an appropriate error message would be displayed. If those checks passed, an appropriate "Please confirm your submission"-type message would be displayed, the "Submit" button would become hidden, and the second "Confirm" button would become visible. When that Confirm button was clicked, it would postback again and fully submit.

EDIT: I forgot to mention, there's a bit more to this that occurred to me after I initially posted. You'll have to protect the fields from being edited in the event the server-side verification is successful as you obviously don't want the user changing values and then clicking the Confirm button. That means disabling all the input controls - which could be a pain if you have a lot. You also have to give them a way to (intentionally) Edit in case the server side verification passes, you display the Confirmation, and they change their minds - so basically you'd need a third "Cancel/Edit"-type button that would put the form back in edit mode and show your initial Submit button.