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

本文关键字：隐藏 显示 菜单 javascript mvc | 更新日期: 2023-09-27 18:20:52

我使用的是mvc，其中有两种类型的用户；"学生"answers"职员"。我想过滤这些用户，并向他们显示一个菜单，根据用户是学生还是员工，应该更改该菜单。我正试图用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>

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

直接示例：

<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>
相关文章：