在 mvc 中使用 javascript 隐藏和显示菜单

Question

我正在使用 mvc，其中我有两种类型的用户； “学生”和“员工”。我想过滤这些用户并向他们显示一个菜单，这取决于用户是学生还是教职员工，应该更改。我正在尝试使用 Javascript 来做到这一点。

我该如何做到这一点？

这是我已经拥有的：

<strong>STAFF USER</strong>

<div id="menucontainer">
    <ul id="menu">                  
        <li>@Html.ActionLink("Staff Details", "StaffDetails", "Home")</li>
        <li>@Html.ActionLink("Collection Master", "CollectionMaster", "Home")</li>
        <li>@Html.ActionLink("Question Bank Master", "QuestionBankMaster", "Home")</li>
        <li>@Html.ActionLink("Student Details", "StudentPersonnelDetails", "Home")</li>
        <li>@Html.ActionLink("Answer Sheet", "Answersheet", "Home")</li>
        <li>@Html.ActionLink("Login", "Login", "Home")</li>
        <li>@Html.ActionLink("Exam Master", "ExamMaster", "Home")</li>
        <li>@Html.ActionLink("Assign", "Assign", "Home")</li>
    </ul>
</div>

<strong>STUDENT USER</strong>

<div id="menucontainer1">
    <ul id="menu1">                  
        <li>@Html.ActionLink("Student Details", "StudentPersonnelDetails", "Home")</li>
        <li>@Html.ActionLink("Answer Sheet", "Answersheet", "Home")</li>
    </ul>
</div>

Answer 1

简单的例子：

<script type="text/javascript">
  function Foo()
  {
       if(@Roles.GetRolesForUser().Contains("Staff"))
       {
           document.getElementById('menucontainer').style.display = 'block';
           document.getElementById('menucontainer1').style.display = 'none';
       }
       else
       {
          document.getElementById('menucontainer').style.display = 'none';
          document.getElementById('menucontainer1').style.display = 'block';
       }
  }
</script>