Share via

How do I get a collapsible submenu in the left side navigation menu?

Falanga, Rod, DOH 190 Reputation points
2024-11-04T18:26:59.5966667+00:00

I am rewriting an old ASP.NET WebForms application. I am using Razor, so that I can use Windows Authentication, then Blazor in some of the pages, but at this point my question isn't about Blazor, it is about Razor.

I want to add a collapsible submenu in the left-side navigation, in the _Layout.cshtml file. I asked Microsoft Edge's Copilot for help with that. This is the answer it gave me for a cshtml file:

@page
@model YourNamespace.Pages.CollapsibleSubmenuModel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collapsible Submenu</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        .submenu {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Main Menu 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link submenu-toggle" href="#">Main Menu 2</a>
                    <ul class="submenu list-unstyled pl-3">
                        <li><a class="nav-link" href="#">Submenu 2.1</a></li>
                        <li><a class="nav-link" href="#">Submenu 2.2</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Main Menu 3</a>
                </li>
            </ul>
        </nav>
    </div>

    <script>
        $(document).ready(function () {
            $('.submenu-toggle').click(function () {
                $(this).next('.submenu').slideToggle();
            });
        });
    </script>
</body>
</html>

And this is what it gave me for the C# code behind:

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourNamespace.Pages
{
    public class CollapsibleSubmenuModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

However, this doesn't seem to work for me, as VS 2022 doesn't want to put a .cs file associated with the _Layout.cshtml file. Unless I am mistaken or not knowledgeable of the Razor technology with regard to _Layout.cshtml, I don't see how I can get around this. So, I'm asking for help, please.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,604 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 66,226 Reputation points
    2024-11-04T22:17:48.8133333+00:00

    this is just html, bootstrap css and javascript. no code behind required. you should be to use collapse and collapse toggle, so you wouldn't even need to write the javascript.

    you are using the navbar which is for mobile and is a top menu, not left. typically you would use a drop down. you should just use nav. see docs:

    https://getbootstrap.com/docs/5.1/components/navs-tabs/

    simple left 3 column nav, 

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collapsible Submenu</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>    
  <style>
        .submenu {
            margin-left:10px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-3">
              <ul class="nav flex-column navbar-light bg-light">
                  <li class="nav-item">
                      <a class="nav-link" href="#">Main Menu 1</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" data-bs-toggle="collapse" href="#submenu2">Main Menu 2</a>
                      <ul class="submenu list-unstyled collapse" id="submenu2">
                          <li><a class="nav-link" href="#">Submenu 2.1</a></li>
                          <li><a class="nav-link" href="#">Submenu 2.2</a></li>
                      </ul>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Main Menu 3</a>
                  </li>
              </ul>
           </div>
           <div class="col-9">
               main body
           </div>
        </div>
    </div>
</body>
</html>
    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.