ASP.NET MVC List of Categorized Items to Display as Accordion

Question

I currently have a page showing a list of all items sorted by Category and SortOrder. The page must contain "all" items and users should be able to hide/unhide items by category using accordion / collapsible panels.

I have the following simplified models:

public class Basket
{
    public List Items { get; set; }
}

public class Item
{
    public string Category { get; set; }
    public string Name { get; set; }
    public int SortOrder { get; set; }
}

The object being passed from my controller to my view:

Basket model = new Basket()
{
    Items = new List()
    {
        new Item(){ Category = "CategoryA", SortOrder = 1, Name = "A001" },
        new Item(){ Category = "CategoryA", SortOrder = 2, Name = "A002" },
        new Item(){ Category = "CategoryA", SortOrder = 3, Name = "A003" },
        new Item(){ Category = "CategoryB", SortOrder = 1, Name = "B001" },
        new Item(){ Category = "CategoryB", SortOrder = 2, Name = "B002" }
    }
};

return View(model);

My Display Templates for the Basket model:

@model SampleApp.Models.Basket


    @Html.DisplayFor(model => model.Items)

My Display Templates for the Item model:

@model SampleApp.Models.Item

@{
    string cat = Model.Category;
}


    @if (Model.SortOrder == 1)
    {
        
    }

    
        @Html.DisplayFor(model => model.Category) -
        @Html.DisplayFor(model => model.SortOrder) -
        @Html.DisplayFor(model => model.Name)

The result I was aiming for:


    
        

        
            CategoryA - 1 - A001
            CategoryA - 2 - A002
            CategoryA - 3 - A003
        
    

    
        

        
            CategoryB - 1 - B001
            CategoryB - 2 - B002

The result I am getting:


    
        

        CategoryA - 1 - A001
    
    
        CategoryA - 2 - A002
    
    
        CategoryA - 3 - A003
    

    
        

        CategoryB - 1 - B001
    
    
        CategoryB - 2 - B002

user_5964792 · Answer

I did not work with asp.net mvc 4 but I know what is your problem. you need three view template not two.

One for Basket model, one for group of items with specific category and one for each item inside that category. You missing view for group of items.

@model List

@{
    var groupItems = Model.GroupBy(item => item.Category).Select(item => item.Key);
}


    @if (Model.SortOrder == 1)
    {
        
    }

   @foreach(var groupItem in groupItems)
   {
      var itemsInsideAGroup = Model.Where(item => item.Category.Equals(groupItem));

      
          
      
   }

and item template is something like this

@model SampleApp.Models.Item


     @Html.DisplayFor(model => model.Category) -
     @Html.DisplayFor(model => model.SortOrder) -
     @Html.DisplayFor(model => model.Name)

ASP.NET MVC List of Categorized Items to Display as Accordion

1 Answers