2
Answers

Fix Menu on Left Side and Right Side Content Change on Menu Option Cli

Ritu

Ritu

4y
2.1k
1
I want Fix Menu on Left Side and Right Side Content Change on Menu Option Click in asp.net MVC
when I clicked on any menu option it displays content at the end of the page but I want content will be display on right side
 
here is my code
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6. <title>@ViewBag.Title - My Restaurant</title>  
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
  10. <link href="~/Content/Site-Master.css" rel="stylesheet" />  
  11. </head>  
  12. <body>  
  13. <nav class="navbar navbar-inverse">  
  14. <div class="container-fluid">  
  15. <div class="navbar-header">  
  16. <a class="navbar-brand" href="#">WelCome Admin</a>  
  17. </div>  
  18. <div class="collapse navbar-collapse" id="myNavbar">  
  19. <ul class="nav navbar-nav navbar-right">  
  20. <li>  
  21. @Html.ActionLink("LogOut", "LogOut")  
  22. </li>  
  23. </ul>  
  24. </div>  
  25. </div>  
  26. </nav>  
  27. <div class="container-fluid text-center" style="height: 700px;">  
  28. <div class="row content">  
  29. <div id="leftPane" class="col-sm-2 sidenav" style="height:700px;width:250px;">  
  30. <p>@Html.ActionLink("Category", "GetCatDetails") </p><br /><br />  
  31. <p>@Html.ActionLink("Item Menu", "GetItemDetails") </p> <br /><br />  
  32. <p>@Html.ActionLink("Employee Master", "GetEmpDetails")</p> <br /><br />  
  33. <p>@Html.ActionLink("Add User", "GetUserDetails")</p><br /><br />  
  34. </div>  
  35. <div id="rightPane">  
  36. </div>  
  37. <div class="col-sm-10 text-left">  
  38. @RenderBody()  
  39. </div>  
  40. </div>  
  41. </div>  
  42. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  43. <script src="~/Scripts/bootstrap.min.js"></script>  
  44. </body>  
  45. </html>  
Answers (2)
Next Recommended Forum