Question

I have the css layout: One column fixed width layout, from maxdesign.com

I have two menu items defined like the following:

<div id="navigation">
        <ul>
            <li><a href="#">Data Entry</a></li>
            <li><a href="#">Reports</a></li>
        </ul>
    </div>

Now, let’s say that I have two roles: guest and operator, and I want that for example if a user with role guest is logged in, then just the Report item from the menu appear, and in case of a user operator is logged in, then both options appear.

How can I accomplish that?

EDIT:

Based on your responses, I’ll go with the server side logic to deal with this:

<div id="navigation">
        <ul>
            <li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
            <li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>                
        </ul>
    </div>

Thanks!

Answer 1

You can put this in the Page_Load..

    Dim cs As ClientScriptManager = Page.ClientScript

    If Not cs.IsClientScriptBlockRegistered(Me.GetType(), "RoleVariable") Then
        Dim js As New String
        js = "var _role = " & role & ";"
        cs.RegisterStartupScript(Me.GetType(), "RoleVariable", js, True)
    End If

And from there, you will have the role in the Javascript realm, where you can manipulate the visibility of the items you want.

So…

<script type="text/javascript">
    function hideStuff() {
        if (_role === "operator") {
            // hide/show your elements here
        }
        else if (_role === "guest") {
            // hide/show your elements here
        }
    }
</script>

Keep in mind that this approach is all client-side and is therefore easy for another developer to manipulate if they really wanted to. But on the other hand, it’s the simplest. Don’t use this approach for high-security situations.