带有权限设置的Accordion层叠菜单添加

最新推荐文章于 2021-06-09 17:29:18 发布

phbest

最新推荐文章于 2021-06-09 17:29:18 发布

阅读量479

点赞数 1

分类专栏： ASP.NET AJAX 文章标签： dataset hyperlink div server image stylesheet

本文链接：https://blog.csdn.net/phbest/article/details/7884778

版权

ASP.NET AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近开始接触asp.net ajax,发现Accordion控件比较好，无刷新的可折叠菜单。但是，accordion也有个缺点，就是感觉不是很灵活，如果想根据权限和角色自定义accordion的accordionpane 比较困难，但是经过几天的研究，发现通过后台定义HTML标签结合前台HTML代码是可以实现的，现在就实现步骤略讲一下，现在只能实现二级菜单的权限控制，三级菜单还期待高手赐教啊。

1.新建一个asp.net aspx，添加一个ScriptManager控件，添加一个accordion控件，如果需要对accordion 运用样式，可以在accordion外添加div。

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>无标题页</title>

    <link href="Style.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

    </div>

    <div class="AccFrame">

        <cc1:Accordion ID="Accordion1" runat="server" RequireOpenedPane="false" SuppressHeaderPostbacks="true" SelectedIndex="-1" TransitionDuration="100">

        </cc1:Accordion>

    </div>

    </form>

</body>

</html>

2.后台动态添加accordionpane，添加原则是，先添加accordionpane 标题，再添加accrodionpane内容，这其中需要数据库的帮忙，或是建立一个DataTable也可以。具体数据结构如下：

3.动态根据权限构建accordion的后台代码如下：

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using AjaxControlToolkit;

public partial class Default5 : System.Web.UI.Page

    private DataSet MenuViewDs;

    private string SqlConnStr = "server=JSXZBOCRP;database=MYDB2;uid=User;pwd=user";

    private SqlConnection SqlConn;

    protected void Page_Load(object sender, EventArgs e)

        SqlConn = new SqlConnection(SqlConnStr);

        SqlConn.Open();

        MenuViewDs = new DataSet();

        string GetHeadSqlStr = "SELECT DISTINCT 第一级菜单编号, 第一级菜单名称, 第一级菜单图片URL FROM MenuViewInfo where (SUBSTRING(对应用户权限, 3, 1) = '1') ORDER BY 第一级菜单编号 ";//获取第一级菜单

        DataTable HeadDt = GetDataTable(GetHeadSqlStr);

        InitMenu(HeadDt);

    private DataTable GetDataTable(string sqlstr)

        DataSet ds = new DataSet();

        SqlDataAdapter da = new SqlDataAdapter(sqlstr, SqlConn);

        da.Fill(ds);

        return ds.Tables[0];

    private void InitMenu(DataTable Dt)

        DataTable AcPaneHeadDt = Dt;

        for (int i = 0; i < AcPaneHeadDt.Rows.Count; i++)//每次循环增加一个accordionpane标题，一级菜单

            string GetContentSqlStr = "SELECT     第一级菜单编号, 第二级菜单编号, 第二级菜单名称, 第二级菜单URL, 第二级菜单图片URL FROM  MenuViewInfo where (SUBSTRING(对应用户权限, 3, 1) = '1') and 第一级菜单编号='" + AcPaneHeadDt.Rows[i][0].ToString() + "' ORDER BY 第二级菜单编号";//获取第二级菜单

            DataTable AcPaneContentDt = GetDataTable(GetContentSqlStr);//获取第二级菜单的DT

            AccordionPane AcPane = new AccordionPane();

            HtmlGenericControl HeaderDiv = new HtmlGenericControl("div");//通过DIV添加一个标题

            Image HeaderImg = new Image();

            HeaderImg.ImageUrl = AcPaneHeadDt.Rows[i][2].ToString();

            HeaderDiv.Controls.Add(HeaderImg);

            Label HeaderLb = new Label();

            HeaderLb.Text = AcPaneHeadDt.Rows[i][1].ToString();

            HeaderDiv.Controls.Add(HeaderLb);

            AcPane.HeaderContainer.Controls.Add(HeaderDiv);

            //AcPane.ContentContainer.Controls.Add(div);

            for (int j = 0; j < AcPaneContentDt.Rows.Count; j++)//每次循环增加一个accordionpane内容，二级菜单

                HtmlGenericControl ContentDiv = new HtmlGenericControl("div");//通过DIV添加一个内容

                ContentDiv.Attributes["class"] = "SubItem";

                Image ContentImg = new Image();

                ContentImg.ImageUrl = AcPaneContentDt.Rows[j][4].ToString();

                ContentImg.ImageAlign = ImageAlign.Middle;

                ContentImg.CssClass = "ImgCss";

                ContentDiv.Controls.Add(ContentImg);

                HyperLink ContentHL = new HyperLink();

                ContentHL.Text = AcPaneContentDt.Rows[j][2].ToString();

                ContentHL.NavigateUrl = AcPaneContentDt.Rows[j][3].ToString();

                ContentHL.CssClass = "LabelCss";

                ContentDiv.Controls.Add(ContentHL);

                AcPane.ContentContainer.Controls.Add(ContentDiv);

            Accordion1.Panes.Add(AcPane);

            Accordion1.CssClass = "accordion";

            Accordion1.HeaderCssClass = "acheader";

            Accordion1.HeaderSelectedCssClass = "selectacheader";

            Accordion1.ContentCssClass = "accontent";

4.样式表为：

.accordion

        height: 400px;

        width: 200px;

.accordion.acheader

        height: 22px;

        cursor: pointer;

        color: #ff99ff;

        table-layout: auto;

        border-collapse: collapse;

        text-align: left;

        background-image: url(images/bg1.PNG);

        border-right: activeborder thin solid;

        border-top: activeborder thin solid;

        border-left: activeborder thin solid;

        border-bottom: activeborder thin solid;

        margin: 1px;

.accordion.selectacheader

        height: 20px;

        cursor: pointer;

        color: #ff99ff;

        table-layout: auto;

        margin: 1px;

        border-collapse: collapse;

        text-align: left;

        background-image: url(images/bg2.PNG);

.accordion .accontent

    border-top: none;

    padding: 5px;

    padding-top: 10px;

.accordion a

        text-decoration:none; color:Green;

.AccFrame

    height:400px;

    width:200px;

        border-right: activeborder 1px solid;

        padding-right: 1px;

        border-top: activeborder 1px solid;

        padding-left: 1px;

        padding-bottom: 1px;

        margin: 1px;

        border-left: activeborder 1px solid;

        padding-top: 1px;

        border-bottom: activeborder 1px solid;

.SubItem

        border-right: 1px;

        padding-right: 1px;

        border-top: 1px;

        padding-left: 1px;

        padding-bottom: 1px;

        margin: 1px;

        border-left: 1px;

        padding-top: 1px;

        border-bottom: 1px;

.LabelCss

        vertical-align: middle;

        font-family: 'Times New Roman';

        text-align: center;

        font-size: smaller;

        left: 15px;

        position: relative;

.LabelCss:hover

        text-decoration: underline;

        color: Red;

.ImgCss

        left:10px;

        position: relative;

5.最后运行看看结果吧：

phbest

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带有权限设置的Accordion层叠菜单添加

最近开始接触asp.net ajax,发现Accordion控件比较好，无刷新的可折叠菜单。但是，accordion也有个缺点，就是感觉不是很灵活，如果想根据权限和角色自定义accordion的accordionpane比较困难，但是经过几天的研究，发现通过后台定义HTML标签结合前台HTML代码是可以实现的，现在就实现步骤略讲一下，现在只能实现二级菜单的权限控制，三级菜单还期待高手赐教啊。
复制链接

扫一扫