ASP.NET Core分类联动子分类下拉菜单实现失败，求助

Hey there! Let's work through this category-subcategory dropdown issue step by step. I'll break down the common pitfalls and how to get your dynamic navigation working properly.

1. First, Verify Your Model Relationships #

Make sure your Category and SubCategory models have proper navigation properties set up so Entity Framework Core can link them correctly. Here's how they should look:

// Category.cs
public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
    // Navigation property for subcategories (initialized to avoid nulls)
    public ICollection<SubCategory> SubCategories { get; set; } = new List<SubCategory>();
}

// SubCategory.cs
public class SubCategory
{
    public int Id { get; set; }
    public string Name { get; set; }
    // Foreign key linking to parent Category
    public int CategoryId { get; set; }
    // Navigation property back to parent category
    public Category Category { get; set; }
}

Initializing SubCategories as an empty list prevents null reference errors when checking for subcategories later.

2. Update Your ViewComponent to Load Subcategories #

In your CategoryWiseMenu ViewComponent, you need to explicitly include subcategories in your query using Include()—EF Core won't load related data by default unless you tell it to. Here's the corrected code:

// CategoryWiseMenu.cs
public class CategoryWiseMenu : ViewComponent
{
    private readonly YourDbContext _context;

    public CategoryWiseMenu(YourDbContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        // Load categories AND their linked subcategories
        var categories = await _context.Categories
            .Include(c => c.SubCategories)
            .ToListAsync();
        return View(categories);
    }
}

Replace YourDbContext with your actual database context class name.

3. Fix the View Rendering (Default.cshtml) #

Now update your view to render dropdown menus only when a category has subcategories. Using Bootstrap's dropdown classes is standard for this—adjust if you're using a different UI framework:

<!-- Default.cshtml -->
@model IEnumerable<Category>

<ul class="navbar-nav">
    @foreach (var category in Model)
    {
        <li class="nav-item @(category.SubCategories.Any() ? "dropdown" : "")">
            @if (category.SubCategories.Any())
            {
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    @category.Name
                </a>
                <ul class="dropdown-menu">
                    @foreach (var subCategory in category.SubCategories)
                    {
                        <li><a class="dropdown-item" href="#">@subCategory.Name</a></li>
                    }
                </ul>
            }
            else
            {
                <a class="nav-link" href="#">@category.Name</a>
            }
        </li>
    }
</ul>

If using Bootstrap, make sure you've included its CSS and JS in _Layout.cshtml to enable dropdown functionality:

<!-- Add to <head> in _Layout.cshtml -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Add before closing </body> in _Layout.cshtml -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

4. Troubleshooting Common Errors #

• Null Reference Exception: This usually happens if SubCategories is null. Double-check that you initialized the collection in the Category model and used Include() in your query.
• No Subcategories Showing: Ensure your database has subcategories linked to categories via the CategoryId foreign key.
• Dropdown Doesn't Toggle: Confirm you have the required JavaScript (like Bootstrap's bundle) loaded—without it, the dropdown won't function.

Once you make these changes, your dynamic category-subcategory dropdown should work as expected!

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