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,605 questions
0 comments
Accepted answer
  1. Bruce (SqlWork.com) 66,461 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

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Brando Zhang-MSFT 3,701 Reputation points Microsoft Vendor
    2024-11-05T08:27:16.5366667+00:00

    Hi @Falanga, Rod, DOH,

    As the Bruce said, the layout doesn't contain the .cs file which you could ignore it, and this is a CSS and js issue, you just need update the layout's codes.

    Below is an example for the left Nav for the default razor page template:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplicationRazorPage</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/WebApplicationRazorPage.styles.css" asp-append-version="true" />
    <style>
        /* Initial style to hide the submenu */
        .submenu {
            display: none;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">My Application</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <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>
                        <!-- Collapsible submenu items -->
                        <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>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2024 - WebApplicationRazorPage - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
 
    @await RenderSectionAsync("Scripts", required: false)
    <script>
        $(document).ready(function () {
            $('.submenu-toggle').click(function (event) {
                event.preventDefault(); // Prevent default link action
                $(this).next('.submenu').slideToggle(); // Toggle the submenu visibility
            });
        });
    </script>
</body>
</html>

    Result:User's image

    1 person found this answer helpful.
    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.