来自 SQL Server ASP.NET Webforms 的动态 AdminLTE-2.4.18 侧边栏菜单

如何解决来自 SQL Server ASP.NET Webforms 的动态 AdminLTE-2.4.18 侧边栏菜单

我正在尝试将 AdminLTE-2.4.18 模板与 asp.net webforms web 应用程序集成，并从 sql 服务器数据库 menus 表中读取动态侧边栏菜单。模板集成和阅读动态菜单已成功完成，但我遇到了一些侧边栏菜单布局问题。

问题是：

1. <li class="treeview"> 父菜单和 <li class="treeview"> 父菜单的字形图像不在同一行（图像位于 <li class="treeview"> 父菜单上方）。
   

   

2. 当鼠标悬停在父菜单上而不是点击父菜单时，就会出现子菜单。

3. 当我将鼠标悬停在 <li class="treeview"> 父菜单上时，<li class="treeview"> 父菜单和 <ul class="treeview-menu"> 子菜单之间存在垂直间隙。
   

   

4. <ul class="treeview-menu"> 子菜单与静态 AdminLTE-2.4.18 子菜单的样式不同，它们居中对齐并且没有 fa fa-circle-o circle AdminLTE- 2.4.18 字形。
   

   

5. 当侧边栏切换按钮被按下时，父菜单和子菜单都会跳转到浅灰色的内容页面。
   

   

以下是我的菜单表创建和示例数据插入 sql 脚本：

CREATE TABLE [dbo].[menus](
    [menu_id] [int] IDENTITY(1,1) NOT NULL,[menu_name] [varchar](100) NULL,[menu_description] [varchar](100) NULL,[menu_url] [nvarchar](100) NOT NULL,[parent_menu_id] [int] NOT NULL,[glyphicon] [varchar](100) NULL,[created_by] [varchar](30) NULL,[created_date] [datetime] NULL,[modified_by] [varchar](30) NULL,[modified_date] [datetime] NULL,CONSTRAINT [PK_menus] PRIMARY KEY CLUSTERED 
(
    [menu_id] ASC
)WITH (PAD_INDEX = OFF,STATISTICS_norECOmpuTE = OFF,IGnorE_DUP_KEY = OFF,ALLOW_ROW_LOCKS = ON,ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

insert into menus(menu_name,menu_description,menu_url,parent_menu_id,glyphicon,created_by,created_date)
values('User Management','User Management Parent Menu','javascript:;','fa fa-pie-chart','sysadmin',getdate())
insert into menus(menu_name,created_date)
values('Users','Users Child Menu','users.aspx',1,'fa fa-circle-o',created_date)
values('Roles','Roles Child Menu','roles.aspx',created_date)
values('Menus','Menus Child Menu','menus.aspx',created_date)
values('Role Permissions','Role Permissions Child Menu','role-permissions.aspx',created_date)
values('Assign Role','Assign Role Child Menu','assign-role.aspx',getdate())

这是我的 aspx 代码：

<li class="treeview">
    <a href="#">
        <i class="fa fa-pie-chart"></i>
        <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" IncludeStyleBlock="false"></asp:Menu>
    </a>
    <ul class="treeview-menu">
        
    </ul>
</li>

这是我用于填充侧边栏菜单的服务器端 C# 代码：

DataTable Menus = new DataTable();
protected void Page_Load(object sender,EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData(0);
        PopulateMenu(dt,null);
    }
}

private DataTable GetData(int parentMenuId)
{
    string query = "select m.menu_id,m.menu_name,m.menu_url from menus m where m.parent_menu_id = @ParentMenuId";
    string constr = ConfigurationManager.ConnectionStrings\["strConnection"\].ConnectionString.ToString();
    using (sqlConnection con = new sqlConnection(constr))
    {
        DataTable dt = new DataTable();
        using (sqlCommand cmd = new sqlCommand(query))
        {
            using (sqlDataAdapter sda = new sqlDataAdapter())
            {
                cmd.Parameters.AddWithValue("@ParentMenuId",parentMenuId);
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}

private void PopulateMenu(DataTable dt,int parentMenuId,MenuItem parentMenuItem)
{
    string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
    foreach (DaTarow row in dt.Rows)
    {
        MenuItem menuItem = new MenuItem()
        {
            Value = row\["menu_id"\].ToString(),Text = row\["menu_name"\].ToString(),NavigateUrl = row\["menu_url"\].ToString(),Selected = row\["menu_url"\].ToString().EndsWith(currentPage,StringComparison.CurrentCultureIgnoreCase)
        };

        if (parentMenuId == 0)
        {
            Menu1.Items.Add(menuItem);
            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
            PopulateMenu(dtChild,int.Parse(menuItem.Value),menuItem);
            Session\["menuid"\] = menuItem.Value;
        }
        else
            parentMenuItem.ChildItems.Add(menuItem);
    }
}