Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Einfügen von Elementen in das Bootstrap-Dropdown aus der SQL-Tabelle

Es gibt einige Möglichkeiten, dies in WebForms zu tun, aber zuerst müssen Sie das DIV erstellen Element des Dropdown-Menüs, auf das über CodeBehind zugegriffen werden kann.

Sehen Sie diesen Ausschnitt?

<ul class="nav nav-tabs">
    <li class="nav-item dropdown">
        <a class="btn btn-light dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Category
        </a>
        <div id="myDropdownMenu" runat="server" class="dropdown-menu" aria-labelledby="navbarDropdown">
        </div>
    </li>
</ul>

Beachten Sie, dass ich zwei Attribute hinzugefügt habe:id="myDropdownMenu" und runat="server" .

Danach können Sie zu CodeBehind gehen um das Menü aus einer Datenquelle zu füllen.

Soweit ich weiß, gibt es mindestens zwei Möglichkeiten, dies zu tun.

Durch Manipulation von InnerHtml Eigenschaft, etwa so:

    private void DisplayMenuByConstructingHtmlTags(List<string> menuList)
    {
        var menuHtml = "";

        foreach (string menuText in menuList)
        {
            menuHtml += "<a class=\"dropdown-item\" href=\"#\">" + menuText + "</a>\n";
        }

        myDropdownMenu.InnerHtml = menuHtml;
    }

Oder indem Sie das Menü als untergeordnete Steuerelemente hinzufügen , so :

    private void DisplayMenuByAddingChildControls(List<string> menuList)
    {
        foreach (string menuText in menuList)
        {
            var linkMenu = new HyperLink() { CssClass = "dropdown-item", NavigateUrl = "#", Text = menuText };
            myDropdownMenu.Controls.Add(linkMenu);
        }
    }

Es liegt an Ihnen, welche Sie wählen.

Übrigens, um dieses Beispiel zu vervollständigen, können Sie versuchen, eine dieser Methoden aus Page_Load aufzurufen Ereignis, etwa so :

BEARBEITEN :

Auf Ihren Wunsch hin habe ich die Beispiele geändert, indem ich eine Verbindung zu einer Tabelle in einer Datenbank hinzugefügt habe. Das ist also das Modul zum Laden der Daten:

    private List<string> LoadMenuFromTable()
    {
        string connectionString = ConfigurationManager.ConnectionStrings["YourConnectionStringName"].ToString();

        var retVal = new List<string>();
        using (var connection = new SqlConnection(connectionString))
        {
            using (var cmd = new SqlCommand("SELECT menu_text FROM Table_1", connection))
            {
                connection.Open();
                using (var reader = cmd.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        retVal.Add((string)reader["menu_text"]);
                    }
                }
            }
        }
        return retVal;
    }

Und so sollten Sie das Modul aufrufen:

    protected void Page_Load(object sender, EventArgs e)
    {
        var menu = LoadMenuFromTable();

        DisplayMenuByAddingChildControls(menu);
        // or DisplayMenuByConstructingHtmlTags(menu);
    }

Oh, und denken Sie daran, diese beiden Bibliotheken zu importieren, damit dieses Beispiel funktioniert:

using System.Configuration;
using System.Data.SqlClient;

Hoffe es hilft.