Click here to see it work

The code below opens an xml file, reads the data from the xml file, dynamically adds a label for the dropdown list, and adds the dropdown list to the asp.net page. After the dropdown lists are added to the screen, the dropdown lists are populated. The dropdown list is added to an asp Panel control named pnlMain.

C# Code (You will need to reference System.Xml and System.IO in order for this to work.)

        private void LoadData(string sFile)
        {            
            XmlTextReader reader = new XmlTextReader(sFile); //the file name is passed into the function



            string sField = "";
            string sID = "";
            string sValue = "";
            string sText = "";
            string sLabel = "";


            while (reader.Read())
            {

                switch (reader.NodeType)
                {

                    case XmlNodeType.Element:
                        sField = reader.Name;
                        break;

                    case XmlNodeType.Text:

                        switch (sField)
                        {
                            case "ID": //get the ID for the dropdown from the xml file
                                sID = reader.Value;
                                break;
                            case "label":
                                sLabel = reader.Value;  //get the label name from the xml file
                                Label lblHold = new Label();
                                lblHold.ID = "lbl" + sLabel;
                                lblHold.Text = sLabel;
                                pnlMain.Controls.Add(lblHold);  //add the label to the panel control
                                DropDownList ddListHold = new DropDownList(); //declare the dropdown variable
                                ddListHold.ID = sID;
                                ddListHold.CssClass = "btn dropdown-toggle"; //add bootstrap formatting to the dropdown                                
                                ddListHold.BackColor = System.Drawing.ColorTranslator.FromHtml("#0E3FE7"); //optional color formatting
                                ddListHold.ForeColor = System.Drawing.Color.White; //optional color formatting
                                ddListHold.Width = 300; //set width of the dropdown                                                                
                                pnlMain.Controls.Add(new LiteralControl("< p>")); //add paragraph beginning tag                                
                                pnlMain.Controls.Add(ddListHold); //add the dropdown to the panel control                                
                                pnlMain.Controls.Add(new LiteralControl("< /p>")); //add paragraph ending tag
                                break;
                            case "value":
                                string[] s = reader.Value.Split('|'); //use the split function to retrieve the value and text for the dropdown items
                                sValue = s[0].ToString();
                                sText = s[1].ToString();
                                DropDownList ddListHold2 = (DropDownList)pnlMain.FindControl(sID); //find the previously added dropdown
                                ddListHold2.Items.Add(new ListItem(sText, sValue)); //add the list item to the previously added dropdown
                                break;
                        }
                        break;
                    case XmlNodeType.EndElement: //Display the end of the element.
                        break;
                }
            }
        }

XML File Contents

      < ddlists>
        < dddata>
          < ID>ddRegion< /ID>
          < label>Region< /label>
          < value>0|Select a Region< /value>
          < value>1|East< /value>
          < value>2|North< /value>
          < value>3|South< /value>
          < value>4|West< /value>
        < /dddata>
        < dddata>
          < ID>ddRepresentative< /ID>
          < label>Representative< /label>
          < value>0|Select a Representative< /value>
          < value>1|Jordan, Larry< /value>
          < value>2|McNabb, Deion< /value>
          < value>3|Rodgers,Brett< /value>
          < value>4|Smith, John< /value>
        < /dddata>
      < /ddlists>    

#CSharp #Bootstrap #XML

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.

        < 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.

#VisualStudio #CSharp #Bootstrap