Add a C# Dropdown to a Bootstrap Modal Dialog

Add a C# Dropdown to a Bootstrap Modal Dialog

Click here to see it work

This example combines C# and Bootstrap to create a bootstrap modal dialog containing an asp dropdown and an asp button to retrieve selected values from the dropdown and transfer those values to the main form.

First, I added code to the page load event to hide the dialog when the form is loaded. I added the runat=server tag and the ID tag to the modal dialog so that it can be referenced from the code behind in c#. By adding an asp label to the title section of the modal dialog, I can change the title from code. I also added an asp label for the dropdown. I added the btn and dropdown-toggle classes to the asp dropdown to give the appearance of a bootstrap dropdown.

The Save button contains code to retrieve the selected value and selected text from the drop down, and code to hide the modal dialog.

HTML Code

      
        < div class="col-lg-2">< /div>
            < div class="col-lg-8">
            < asp:Label ID="lblSelectedValue" runat="server" Text="Selected Value">< /asp:Label>< br />
            < asp:TextBox ID="txtSelectedValue" runat="server" ReadOnly="True">< /asp:TextBox>< br />
            < asp:Label ID="lblSelectedText" runat="server" Text="Selected Text">< /asp:Label>< br />
            < asp:TextBox ID="txtSelectedText" runat="server" ReadOnly="True">< /asp:TextBox>< br />< br />
            < asp:Button class="btn" ID="btnOpen" runat="server" Text="Open Dialog" style="background-color:#0E3FE7;color:white" OnClick="btnOpen_Click" />
            < /div>
            < div class="col-lg-2">< /div>
            < div class="col-lg-12" style="z-index:9999" id="modalExample" runat="server">
                < div class="modal-dialog">
                    < div class="fade in modal-content">
                        < div class ="modal-header">
                            < asp:Label ID="lblTitle" runat="server" Text="">< /asp:Label>
                        < /div>
                        < div class="modal-body">
                            < asp:Label ID="lblValue" runat="server" Text="">< /asp:Label>
                            < asp:DropDownList style="background-color:#0E3FE7;color:white" class="btn dropdown-toggle" ID="ddValueList" runat="server" >
                                < asp:ListItem Value="0">N/A< /asp:ListItem>
                                < asp:ListItem Value="1">Value 1< /asp:ListItem>
                                < asp:ListItem Value="2">Value 2< /asp:ListItem>
                                < asp:ListItem Value="3">Value 3< /asp:ListItem>
                            < /asp:DropDownList>
                        < /div>
                        < div class="modal-footer">
                            < asp:Button class="btn" style="background-color:#0E3FE7;color:white" ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
                        < /div>                    
                    < /div>
                < /div>        
            < /div>
      
    

C# Code

      
        protected void Page_Load(object sender, EventArgs e)
        {
            modalExample.Visible = false;
            lblTitle.Text = "Value Selection";
            lblValue.Text = "You must select a value from the list below.";
        }
        protected void btnSave_Click(object sender, EventArgs e)
        {
            txtSelectedValue.Text = ddValueList.SelectedItem.Value;
            txtSelectedText.Text = ddValueList.SelectedItem.Text;
            modalExample.Visible = false;
        }
        protected void btnOpen_Click(object sender, EventArgs e)
        {
            modalExample.Visible = true;
        }
      
    

This example was created using the Community Version of Visual Studio 2019.

#CSharp #Bootstrap