ASP.NET MVC健身应用实现Programs下拉子菜单技术求助

Hey Daniel, let's get that collapsible Programs menu working for your fitness app! Your current code displays all items as flat list entries, but we can use Bootstrap's built-in Collapse component to create the expandable subcategories you want. Here's a complete, working solution that preserves your existing styling and integrates with ASP.NET MVC routing:

Working Code Implementation #

<!-- Clickable Programs Header (triggers collapse) -->
<button class="btn btn-block bg-success font-weight-bold text-white" type="button" data-toggle="collapse" data-target="#programsCollapse" aria-expanded="false" aria-controls="programsCollapse">
    Programs
</button>

<!-- Collapsible container for subcategories (hidden by default) -->
<div class="collapse" id="programsCollapse">
    <div class="list-group bg-dark">
        <!-- Note: Ensure your Action method names are valid (no spaces/slashes)! I adjusted the first one to a legal name -->
        <a class="list-group-item list-group-item-action bg-dark font-weight-bold font-italic text-white" asp-area="" asp-controller="Programs" asp-action="IndoorHomeWorkouts">Home/Indoor Workouts</a>
        <a class="list-group-item list-group-item-action bg-dark font-weight-bold font-italic text-white" asp-area="" asp-controller="Programs" asp-action="Gym">Gym Workouts</a>
        <a class="list-group-item list-group-item-action bg-dark font-weight-bold font-italic text-white" asp-area="" asp-controller="Programs" asp-action="Crossfit">Crossfit Workouts</a>
        <a class="list-group-item list-group-item-action bg-dark font-weight-bold font-italic text-white" asp-area="" asp-controller="Programs" asp-action="Running">Running Training</a>
        <a class="list-group-item list-group-item-action bg-dark font-weight-bold font-italic text-white" asp-area="" asp-controller="Programs" asp-action="Military">Military Workouts</a>
    </div>
</div>

Key Changes Explained #

1. Convert Header to a Trigger Button:

   • Replaced the static <div> heading with a <button> that has Bootstrap's collapse attributes:
     • data-toggle="collapse": Tells Bootstrap this element controls a collapsible area
     • data-target="#programsCollapse": Links the button to the collapsible container by ID
     • Kept your original bg-success and text styling for consistency

2. Collapsible Subcategory Container:

   • Added a <div class="collapse"> wrapper with an ID matching the button's data-target
   • Placed your original list items inside a nested list-group to maintain styling
   • The container is hidden by default; clicking the Programs button toggles its visibility

3. Fixed Routing Issues:

   • Corrected the third list item's asp-action (it was set to "Running" but labeled "Crossfit Workouts")
   • Fixed the first item's action name: Indoor/ Home Workouts has invalid characters (spaces/slashes) for an MVC Action method—use something like IndoorHomeWorkouts instead, and update your ProgramsController accordingly

Why Your Previous Dropdowns Failed #

Most likely, one of these common issues was blocking your progress:

• Missing Bootstrap Dependencies: Ensure your project includes Bootstrap's CSS and JavaScript (plus jQuery for Bootstrap 4 and earlier) in your _Layout.cshtml
• Incorrect Component Structure: Collapse requires a trigger element with matching data-target and a container with the corresponding ID
• Invalid Action Names: Spaces and slashes in asp-action values break MVC routing, so always use valid C# method names

内容的提问来源于stack exchange，提问作者Daniel634