Asp.net – ASPX Pop-Up is not displayed at the first time

You don’t show all of the markup for that button. However, if you don’t return false for the client side click event, then a full-page post-back will occur.

I also suggest using a good popup dialog library such as jQuery.UI.

So, assuming you have both jQuery, and jQuery.UI installed and available?

Then say we want to pop a dialog, have user confirm the dialog, and if yes, then we want the server-side button code to run. Of course, the standard is that if the JavaScript client side returns false, then the server-side code does not run.

So, say a typical delete prompt that requires a confirm:

    <asp:Button ID="cmdDelete" runat="server" Text="Delete Record"  
        CssClass="btn"
        OnClick="cmdDelete_Click"  
        OnClientClick="return mydelprompt2(this)" />

        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

    <div id="mydeldiv" style="display:none">
        <img src="../Content/Rhotel.jpg" style="float:left;width:64px" />
        <h4><i>Delete this Hotel, are you sure?</i></h4>
    </div>

    <script>
        mydelpromptok = false
        function mydelprompt2(btn) {

            if (mydelpromptok) {
                mydelpromptok = false
                return true
            }

            var mydiv = $("#mydeldiv")
            mydiv.dialog({
                modal: true, appendTo: "form",
                title: "Delete Hotel?", closeText: "",
                width: "20%",
                position: { my: 'left top', at: 'right bottom', of: btn },
                dialogClass: "dialogWithDropShadow",
                buttons: {
                    Ok: (function () {
                        mydiv.dialog("close")
                        mydelpromptok = true
                        btn.click()
                    }),
                    Cancel: (function () {
                        mydiv.dialog("close")
                    })
                }
            });
            return false;
        }
    </script>

Note how the button has both a client side click event, and a server side click event. As noted, if JavaScript returns true (ok to the dialog box), then the button click code will run. If we hit cancel, then the JavaScript returns false, and the server-side button code does not run.

Our code behind is thus:

    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void cmdDelete_Click(object sender, EventArgs e)
    {
        Label1.Text = "Server side delete code will run";
    }

And the result is thus this:

You can of course also trigger a popup from server-side code by using script injection into the page.
And when the user hits ok, then again, we will run the server-side delete code, and we do this from client-side JavaScript by "clicking" a hidden button (the same delete code button we had in the first example.

Hence, we now have this markup:

    <asp:Button ID="cmdDeleteTest" runat="server" 
        Text="Delete this record"
        OnClick="cmdDeleteTest_Click"
        />

    <asp:Button ID="cmdDelete" runat="server" Text="Delete Record"  
        CssClass="btn"
        OnClick="cmdDelete_Click"  
        style="display:none"
         />

        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

    <div id="mydeldiv" style="display:none">
        <img src="../Content/Rhotel.jpg" style="float:left;width:64px" />
        <h4><i>Delete this Hotel, are you sure?</i></h4>
    </div>

    <script>
        mydelpromptok = false
        function mydelprompt2(btnID) {

            var btn = $(btnID)

            if (mydelpromptok) {
                mydelpromptok = false
                return true
            }

            var mydiv = $("#mydeldiv")
            mydiv.dialog({
                modal: true, appendTo: "form",
                title: "Delete Hotel?", closeText: "",
                width: "20%",
                position: { my: 'left top', at: 'right bottom', of: btn },
                dialogClass: "dialogWithDropShadow",
                buttons: {
                    Ok: (function () {
                        mydiv.dialog("close")
                        mydelpromptok = true
                        btn.click()
                    }),
                    Cancel: (function () {
                        mydiv.dialog("close")
                    })
                }
            });
            return false;
        }
    </script>

And code behind is now this:

    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void cmdDeleteTest_Click(object sender, EventArgs e)
    {
        string sJava = $"mydelprompt2('#{cmdDelete.ClientID}');";

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myjs", sJava, true);

    }

    protected void cmdDelete_Click(object sender, EventArgs e)
    {
        Label1.Text = "Server side delete code will run";
    }

And the result is quite much the same as the first example, but the page will have a post-back on the button click.

Hence again, it looks like this:

So, the above 2 examples should give you some ideas. In the first example, we had a button with both a client side click event, and a server-side event. As noted, if the client-side JavaScript returns true, or false, that determines if the server-side event for that button will run or not.

In the second example, we used 100% server-side button to trigger the popup, and used a hidden button that is clicked by the JavaScript to run a given code behind block when user hits "ok" as opposed to cancel.