Enable Disable Sitemap Menu Item Based on Role in ASP.Net

Let me tell you a little bit of the background of this article. Today I was tasked to develop a sitemap for one application of our organization. A Sitemap is an easy task but the criteria was for a menu of the sitemap that will be visible and invisible depending on role.

So, the concept is that, the menu will be enabling and disable depending on role. The truth to be told, I spent a couple of hours solving it, then in meantime, I was misguided by a fellow developer, hahah.. Oh, he too doesn't know, not intentionally.

Fine, so I thought that, let's show my POC to the community and someday one can save her a couple of hours. Fine, so I am planning to make the article as simple as possible and focus only on our necessary parts.

First of all, since we will work with a sitemap, we need to create one sitemap XML file and here is mine.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="default.aspx" title="Home" page" roles="P,S">
<siteMapNode url="products.aspx" title="Products" roles="P">
<siteMapNode url="products/product1.aspx" title="Product 1" roles="P" />
<siteMapNode url="products/product2.aspx" title="Product 2" roles="P"/>
<siteMapNode url="products/product3.aspx" title="Product 3" roles="P" />
</siteMapNode>
<siteMapNode url="services.aspx" title="Services" roles="S" >
<siteMapNode url="services/service1.aspx" title="Services 1" roles="S" />
<siteMapNode url="services/service2.aspx" title="Services 2" roles="S" />
<siteMapNode url="services/service3.aspx" title="Services 3" roles="S" />
</siteMapNode>
</siteMapNode>
</siteMap>

Add one Web form in the application and paste the following code into it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
</form>
</body>
</html>

The code is very simple, we have just added one sitemap data source and one menu element. The menu item will be displayed depending on role.

The view of the page is something like this.

Here is the C# code of the same file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Principal;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebForm
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string[] r = { "P" };
HttpContext.Current.User = new GenericPrincipal(HttpContext.Current.User.Identity, r);
}
}
}

As we said, we will make the application very simple, so that I have discarded all the authentication part. I am just populating the user context in the page load. Currently the role is "P" for current user.

Now, if you look at the sitemap file, you will find that the product part is enabled for the user holding role “P”. The user without the “P” role cannot access the product part and it will be invisible. Fine, we are almost done, we only need to tune something in the web.config. Here is my web.config code.

<?xml version="1.0"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
<siteMap enabled="true">
<providers>
<clear/>
<add siteMapFile="Web.sitemap"
name="AspNetXmlSiteMapProvider"
type="System.Web.XmlSiteMapProvider"
securityTrimmingEnabled="true"/>
</providers>
</siteMap>
</system.web>
<location path="Products">
<system.web>
<authorization>
<allow roles="P"/>
<deny users="*" />
</authorization>
</system.web>
</location>
<location path="Services">
<system.web>
<authorization>
<allow roles="S"/>
<deny users="*" />
</authorization>
</system.web>
</location>
</configuration>

At first we are configuring the sitemap and then we are just allowing and disallowing roles in the specific directory. Here is our application structure.

disallowing roles in particular directory

We are just implementing the role over the Product and Services directory.

Now, if we run the application then we will see that all menus under Services has been hidden automatically because we have set the role as "P".

But the user can see the product information. Here is the output screen.

Conclusion

If you think that only setting the role in a sitemap will automatically hide and show the role then you too will make the same mistake that I did, it will not. We need to specify the location path in the web.config file.