在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>