使用JavaScript在asp.net网站中基于弹出窗口的用户选择来操纵网页？

Question

I have an asp.net website. I want to open a popup asking for user confirmation in code behind page.

I have a drop down with some values. "cancel ticket" is one of those values. So when user selects this item, I want to display a confirmation box asking user "Are you sure you want to cancel the ticket"?

I've tried some code using JavaScript,

HTML:

<asp:DropDownList ID="ddlStatus" runat="server" CssClass="selectstyle" DataTextField="Name" DataValueField="ID" onchange ="GetSelectedItem(this);" />

JavaScript :

<script type="text/javascript">
    function GetSelectedItem(x) {
        if (x.value == 4) {
            return confirm("Are you sure you want to cancel support ticket ?");
        }
    }

which is displaying a popup as I want.

Now, I want to make a textbox and a label visible if user clicked on "OK" and reset dropdownlist if user clicked on "Cancel"

Answer 1

I've found this, i hop this help you

http://www.aspsnippets.com/Articles/Server-Side-Code-Behind-Yes-No-Confirmation-Message-Box-in-ASPNet.aspx

Answer 2

You would use

ClientScriptManager.RegisterClientScriptBlock

https://msdn.microsoft.com/en-us/library/bahh2fef%28v=vs.110%29.aspx

Answer 3

The right way to approach this is by checking the value and prompting the user in the client side via javascript ( this will probably help you).

But if you insist on going through the server, you can either:

• Do an ajax call and then prompt the user for confirmation,
• or create another form/view to do that.

Answer 4

Try adding a bootstrap modal and injecting script like ClientScriptManager.RegisterClientScriptBlock (Type, String,"$(modal).modal('show')")

Do remember to add the bootstrap js and css

Answer 5

My suggestion is:

1- Create a invisible div with your cancel button (and/or others elements/controls you want)

<div id="div_dialog" style="display: none;" >
    <h3>Do you want to cancel?</h3>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button"  onclick="Button1_Click"/>
</div>

2- Use jquery to use your drop down as a trigger and dialog your hidden div

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />


<script type="text/javascript">
    $(document).ready(function () {
      // this will open the popup when drop donw change 
      //(aply your filter by selected item)
        $("#<%=DropDownList1.ClientID%>").change(function () {
            $("#div_dialog").dialog({
                dialogClass: 'DynamicDialogStyle',
                height: 160,
                width: 220,
                title: "My modal Dialog Popup",               
                modal: true
            });
            return false;
        });
        // this function will do the postback and fire the event in the popup button
       $('#<%=Button1.ClientID%>').click(
         function() {
            <%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
       });
    });

</script>

3- Instead of using ddlStatus_Tickets_SelectedIndexChanged event, handle your confirmation code in the confirmation button event click

    protected void Button1_Click(object sender, EventArgs e)
    {
        // you code
    }