如何使用Bootstrap和ASP.NET根据角色生成菜单？

Question

I am trying to hide and display menus based on roles while using bootstrap in asp.net.

I am using the navigation menu on the left of this template. http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html

Here's an example of my design.

        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation" >
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">

                    <li>
                        <a href="../Home.aspx"><i class="fa fa-pencil-square-o fa-fw"></i> <font color = "000000"><b>Home</b></font></a>
                    </li>

                    <li>
                        <a href="CreateCCF.aspx"><i class="fa fa-pencil-square-o fa-fw"></i> <font color = "000000"><b>Request New </b></font></a>
                    </li>

                    <li>
                        <a href="#"><i class="fa fa-folder-open-o fa-fw"></i> <font color = "000000"> <b>My Requested </b></font><span class="fa arrow"></span></a> 
                        <ul class="nav nav-second-level">                                 
                     <li>
                        <a href="ReqDraft.aspx">Draft</a>
                    </li>
                    <li>
                        <a href="ReqOpen.aspx">Open</a>
                    </li>
                    <li>
                        <a href="ReqClose.aspx">Close</a>
                    </li>

                    <li>
                        <a href="ReqViewAll.aspx">View All</a>
                    </li>

                </ul>

                     <li>
                        <a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> <font color = "000000"><b>For My Approval</b></font><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">                                 
                    <li>
                        <a href="PendingApproval.aspx">Pending for Approval</a>
                    </li>
                    <li>
                        <a href="Approved.aspx">Approved</a>
                    </li> 

                    <li>
                        <a href="Rejected.aspx">Rejected</a>
                    </li> 
                </ul>
                    </li>
                </li>

                    <li>
                        <a href="#"><i class="fa fa-folder-open-o fa-fw"></i> <font color = "000000"> <b>For Assignee</b></font><span class="fa arrow"></span></a> 
                        <ul class="nav nav-second-level">                                 
                    <li>
                        <a href="AsgOpen.aspx">Open</a>
                    </li>
                    <li>
                        <a href="AsgClose.aspx">Close</a>
                    </li> 

                    <li>
                        <a href="AsgViewAll.aspx">View All</a>
                    </li> 
                </ul>
                </li>
                 <li>
                        <a href="#"><i class="fa fa-folder-open-o fa-fw"></i> <font color = "000000"> <b>Administration</b></font><span class="fa arrow"></span></a> 
                        <ul class="nav nav-second-level"> 

                    <li>
                        <a href="AllPending.aspx">All Pending Approval</a>
                    </li>

                    <li>
                        <a href="AllClosed.aspx">All Closed </a>
                    </li>
                        </ul>
                </li>

            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

For example, I would like the normal users to have access to 'Request New' and 'My Requested' only. And for approvers, they would be able to access 'For My Approval' only.

I have tried using this method, however, its not for bootstrap.

public void generateMenu()
    {
        DataTable dt = new DataTable();
        ArrayList parInput = new ArrayList();
        string strMenu = "";
        strMenu = "<table border='1' cellpadding='4' cellspacing='4' width='100%'>";
        parInput.Add("@RoleID");
        parInput.Add(Convert.ToInt32(Session["RoleID"].ToString()));
        parInput.Add("@AppID");
        parInput.Add("2");
        dt = db.ExecSQLQuery(strSQLConn, "master_spGetMenuLink", parInput);

        foreach (DataRow dr in dt.Rows)
        {
            if (dr[1].ToString() == "NA")
            {
                strMenu += " <tr class='MenuLinkHeader'><td>" + dr[0].ToString() + "</td></tr>";
            }
            else
            {
                if (dr[0].ToString() != "Create New")
                { 
                    if (dr[0].ToString() == "Create CCF" && ((Session["SubGroup"].ToString() == "AB") || (Session["SubGroup"].ToString() == "AC")))
                    {
                        strMenu += " <tr class='MenuLink'><td><a href='" + dr[1].ToString() + "'>" + dr[0].ToString() + "</td></tr>";
                    }
                    else
                    {
                        strMenu += " <tr class='MenuLink'><td><a href='" + dr[1].ToString() + "'>" + dr[0].ToString() + "</td></tr>";
                    }
                }
            }
        }

        strMenu += "</table>";
        Response.Write(strMenu);
    }

Answer 1

I suggest, after logging in of the user, check for the role of the user. Then, put it on a Session. (Session["Role"]).

For every page on Page_Load, make some condition if the Role has the access on a particular page. If not, redirect to Home/Default.

Because hiding a navigation is not pretty much accurate because it can access by typing the url on address page even if its hidden on navigation menu.