How to call modal box from server side onSelectedIndexChanged event of dropdown?

Durgesh Pawar 20

I am not able to show bootstrap modal box from server side onselectedindexChanged event in dotnet webforms. What Should I do?

Lan Huang-MSFT 26,761 Microsoft Vendor

Hi @Durgesh Pawar,

Can you provide a minimal example that reproduces your problem? This way we can better assist you.

You can refer to the example below to see if it helps you.

Inside the SelectedIndexChanged event handler, the Bootstrap Modal Popup is opened by calling the modal function with parameter value show using RegisterStartupScript method of ClientScript class.

 protected void OnSelectedIndexChanged(object sender, EventArgs e)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "Popup", "$('#MyPopup').modal('show')", true);
        }

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <center>
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyPopup">
                Open Modal</button>
        </center>
        <!-- Modal Popup -->
        <div id="MyPopup" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                        <h4 class="modal-title">Select Fruit
                        </h4>
                    </div>
                    <div class="modal-body">
                        <asp:DropDownList ID="ddlFruits" runat="server" AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChanged">
                            <asp:ListItem Text="Select Fruit" Value="0" />
                            <asp:ListItem Text="Mango" Value="1" />
                            <asp:ListItem Text="Apple" Value="2" />
                            <asp:ListItem Text="Banana" Value="3" />
                        </asp:DropDownList>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Durgesh Pawar 20

          <asp:DropDownList ID="CompanyNameDDL" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="CompanyNameDDL_SelectedIndexChanged" data-toggle="dropdown" data-target="#NewVehicleCompany">
        </asp:DropDownList>


//modal box

   <div id="NewVehicleCompany" class="modal fade">                                             <div class="modal-dialog">                                                 <div class="modal-content">                                                     <div class="modal-header">                                                         <h4 class="modal-title">Modal Box</h4>                                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                                                     </div>                                                     
<div class="modal-body">                                                         <!-- Add the content of the modal box here -->                                                         This is the modal box content.                                                     </div>                                                    
 <div class="modal-footer">                                                         <asp:Button ID="btnCloseModal" runat="server" Text="Close" CssClass="btn btn-danger" data-dismiss="modal" />                                                     </div>                                                
 </div>                                            
 </div>                                     
 </div>

Durgesh Pawar 20

 protected void CompanyNameDDL_SelectedIndexChanged(object sender, EventArgs e)
        {
		Page.ClientScript.RegisterStartupScript(this.GetType(), "Popup", 				     "$('#NewVehicleCompany').modal('show')", true);
}

Durgesh Pawar 20 Reputation points

2023-07-31T10:03:17.6766667+00:00

I want to call modal onSelectedIndexChange event of dropdown...I don't want dropdown inside modal box

Accepted answer

Lan Huang-MSFT 26,761 Microsoft Vendor

Hi @Durgesh Pawar,

Have you tried that code and it still doesn't work?

Whether the drop-down list is inside or outside the modal box, it does not affect the use of the RegisterStartupScript method of the ClientScript class.

I tested your code and it works.

  protected void CompanyNameDDL_SelectedIndexChanged(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "Popup", "$('#NewVehicleCompany').modal('show')", true);
        }

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:DropDownList ID="CompanyNameDDL" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="CompanyNameDDL_SelectedIndexChanged" data-toggle="dropdown" data-target="#NewVehicleCompany">
        <asp:ListItem Text="Select Fruit" Value="0" />
                            <asp:ListItem Text="Mango" Value="1" />
                            <asp:ListItem Text="Apple" Value="2" />
                            <asp:ListItem Text="Banana" Value="3" />
            </asp:DropDownList>
      <%--  modal box--%>
   <div id="NewVehicleCompany" class="modal fade">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <h4 class="modal-title">Modal Box</h4>
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               </div>
               <div class="modal-body">
                   <!-- Add the content of the modal box here -->
                   This is the modal box content.                                                     </div>
               <div class="modal-footer">
                   <asp:Button ID="btnCloseModal" runat="server" Text="Close" CssClass="btn btn-danger" data-dismiss="modal" />
               </div>
           </div>
       </div>
   </div>
    </form>
</body>
</html>

enter image description here

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.

Durgesh Pawar 20 Reputation points

2023-08-01T05:41:26.7+00:00

It's working now thanks!

Share via

How to call modal box from server side onSelectedIndexChanged event of dropdown?

0 additional answers