Rendering a sublist of a list in .net MVC

Question

I'm still learning .net MVC, and perhaps am not searching correctly for what I need to find a solution to.

In short, I have a table in the database that is structured as:

ID    Category    Subcategory    FK

So each category may appear multiple times, as well as each subcategory, which is unique to the category.

I want to render a menu in the view that looks like:

Category 1
    Subcategory 1a
    Subcategory 1b
    Subcategory 1c
Category 2
    Subcategory 2a
    Subcategory 2b

And so on. Right now in the controller I have:

var categories = db.Category
                     .Where(oa => oa.Category != "")
                     .GroupBy(oa => new { oa.Category, oa.Subcategory })
                     .Select(oa => oa.FirstOrDefault());

However, I'm not sure how to do what I want to achieve in the view. I know I have to loop through the list somehow, but I'm not sure how. I know it involved something along the lines of:

@foreach (var item in Model)
{
    <li>
        <a id="@item.ID" href="#">@item.Category</a>
    </li>
}

But I only want each category to appear once, and then need all subcategories to appear under the parent category. Or maybe I need to change the controller and how it sends the data?

score 5 · Accepted Answer · edited Apr 02 '17 at 14:29

5

Start by creating a simple view model to represent what you want to display in the view

public class CategoryVM
{
    public string Name { get; set; }
    public IEnumerable<string> SubCategories { get; set; }
}

Then project your query to a collection of that view model and return it to the view

var model = db.Category.Where(x => x.Category != "")
    .GroupBy(x => x.Category).Select(x => new CategoryVM
    {
        Name = x.Key,
        SubCategories = x.Select(y => y.Subcategory)
    });
return View(model);

and in the view

@model IEnumerable<CategoryVM>
....
@foreach(var category in Model)
{
    <h2>@category.Name</h2>
    <ul>
        @foreach(var subCategory in category.SubCategories)
        {
            <li>@subCategory</li>
        }
    </ul>
}

edited Apr 02 '17 at 14:29

Nkosi

235,767
35
427
472

answered Apr 02 '17 at 13:48

What will be the code if it is tree or more level list? I mean more child list under sublist. – Sumon Tito Sep 18 '18 at 06:46
1

@SumonTito. You will need a hierarchical view model - refer the [How to create dynamic menu using tree](https://stackoverflow.com/questions/46560515/how-to-create-dynamic-menu-using-tree/46562343#46562343) for an example, and how to populate it in the controller. – Sep 18 '18 at 06:54
1

Then if you want to render the whole tree initially (not using a jquery plugin), then you need a recursive method to generate the html - refer [How to render singly Linked list in MVC View page](https://stackoverflow.com/questions/27146524/how-to-render-singly-linked-list-in-mvc-view-page/27147744#27147744) for an example of using an extension method – Sep 18 '18 at 06:54
If you need further help, then you need to ask a new question on SO. – Sep 18 '18 at 06:54
Thanks dear, I have made a question but can't get my solution, I'm now submitting your suggestions to a developer may be he can help me. I'm also Thanking you for your support. God Bless You :) – Sumon Tito Sep 18 '18 at 07:54

Rendering a sublist of a list in .net MVC

1 Answers1

Linked