c# - mvcでjavascriptを使用してメニューを非表示および表示する

Question

2 種類のユーザーがいる 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>