How do I add items (including seperators) to a Bootstrap Dropdown-menu in CodeBehind from a database or item list?

Question

After many hours of searching and testing, I arrived at a workable solution. Thought I'd share it.

Answer 1

using System;
using System.Configuration;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
...

   protected void Page_Load(object sender, EventArgs e)
   {
      if (!this.IsPostBack)
      {
         PopulateDDLs();
      }
   }

   private void PopulateDDLs()
   {
      List<string> menu = null;

      // Method 1
      menu = GenerateListFromTable("MyDatabaseCN", "SELECT MenuList FROM Menu order by MenuList", "MenuList");
      AddItemsToDDL(this.YourDDL1, menu);
      menu.Clear();

      // Method 2
      menu.Add("Item 1");
      menu.Add("Item 2");
      menu.Add("separator");
      menu.Add("Item 3");
      menu.Add("Item 4");
      menu.Add("separator");
      menu.Add("Item 5");
      AddItemsToDDL(this.YourDDL2, menu, "Select An Item");

   }

   public List<string> GenerateListFromTable(string db, string sql, string Col)
   {
      string connectionString = ConfigurationManager.ConnectionStrings[db].ToString();
      var retVal = new List<string>();
      using (var connection = new SqlConnection(connectionString))
      {
         using (var cmd = new SqlCommand(sql, connection))
         {
            connection.Open();
            using (var reader = cmd.ExecuteReader())
            {
               while (reader.Read())
               {
                  retVal.Add((string)reader[Col]);
               }
            }
         }
      }
      return retVal;
   }

   public void AddItemsToDDL(HtmlGenericControl d, List<string> menuList, string HeaderTxt = "")
   {
      if (HeaderTxt != string.Empty)
      {
         menuList.Insert(0, HeaderTxt);
      }
      foreach (string menuText in menuList)
      {
         if (menuText == "separator")
         {
            var div = new HtmlGenericControl("div");
            div.Attributes["role"] = "separator";
            div.Attributes["class"] = "dropdown-divider";
            d.Controls.Add(div);
         }
         else
         {
            HyperLink linkMenu = new HyperLink() { CssClass = "dropdown-item", NavigateUrl = "#", Text = menuText };
            d.Controls.Add(linkMenu);
         }
      }
   }

HTML:

                        <link href="bootstrap.css" rel="stylesheet" />

                        <div class="input-group">
                           <div class="input-group-prepend">
                              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Stuff1</button>
                              <div class="dropdown-menu" id="YourDDL1" runat="server">
                                 <%--DropDownList loaded from CodeBehind--%>
                              </div>
                           </div>
                           <input type="text" class="form-control" id="Text1" runat="server" readonly>
                        </div>

                        <div class="input-group">
                           <div class="input-group-prepend">
                              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Stuff2</button>
                              <div class="dropdown-menu" id="YourDDL2" runat="server">
                                 <%--DropDownList loaded from CodeBehind--%>
                              </div>
                           </div>
                           <input type="text" class="form-control" id="Text2" runat="server" readonly>
                        </div>

                        <script src="bootstrap.js"></script>
                        <script src="jquery-3.5.1.js"></script>

JS:

     $(document).on('click', '#YourDDL1 a', function () {
         $('#Text1').val($(this).html());
     });

     $(document).on('click', '#YourDDL2 a', function () {
         $('#Text2').val($(this).html());
      });

Result: