Display data in categorywise - asp.net-mvc-3

Question

I had one list named category. It contains the following data.
Name - Id
----------------------------
Mobile - 0
Cellphones - 21
Mobile Accessories - 22
Camera - 0
Camcorder - 55
Camera Accessories 60
SLRs 61
Photo Printers 63
Computers 0
Laptops 65
Memory Cards 67
Monitors 69
RAM 70
Computer Accessories 71
And i want to display above data as following way using Ul and Li tag :
Mobile
-Cellphones
-Mobile Accessories
Camera
-Camcorder
-Camera Accessories
-SLRs
-Photo Printers
Computers
-Laptops
-Memory Cards
-Monitors
-RAM
-Computer Accessories
That is id=0 means parent category and id=non-zero means subcategory
Help me.Thanks in advance.

Answer 1

Namespace Test
Public Class Class1
Dim Categories As List(Of Category) = New List(Of Category) _
From {New Category With {
.ID = 0, .Name = "Mobile",
.Items = New List(Of CategoryItem) _
From {New CategoryItem With {.ID = 1, .Name = "Cellphones"},
New CategoryItem With {.ID = 2, .Name = "Mobile Accessories"}
}
},
New Category With {
.ID = 1, .Name = "Camera",
.Items = New List(Of CategoryItem) _
From {New CategoryItem With {.ID = 1, .Name = "Camcorder"},
New CategoryItem With {.ID = 2, .Name = "Camera Accessories"},
New CategoryItem With {.ID = 3, .Name = "SLRs"},
New CategoryItem With {.ID = 4, .Name = "Photo Printers"}
}
},
New Category With {
.ID = 2, .Name = "Computers",
.Items = New List(Of CategoryItem) _
From {New CategoryItem With {.ID = 1, .Name = "Laptops"},
New CategoryItem With {.ID = 2, .Name = "Memory Cards"},
New CategoryItem With {.ID = 3, .Name = "Monitors"},
New CategoryItem With {.ID = 4, .Name = "RAM"},
New CategoryItem With {.ID = 5, .Name = "Computer Accessories"}
}
}
}
Public Sub New()
Dim ul As String = SetCategories()
End Sub
Private Function SetCategories() As String
Dim ulCategories As XElement = <ul class="float-left"></ul>
For Each cat As Category In Categories
Dim currentCategory As Category = cat
Dim liCategory As XElement = <li><%= currentCategory.Name %></li>
Dim ulCategoryItems As XElement = <ul></ul>
For Each item As CategoryItem In currentCategory.Items
Dim currentItem As CategoryItem = item
Dim liItem As XElement = <li><%= currentItem.Name %></li>
ulCategoryItems.Add(liItem)
Next item
liCategory.Add(ulCategoryItems)
ulCategories.Add(liCategory)
Next cat
Return ulCategories.ToString()
End Function
End Class
Public Class Category
Public Property ID As Integer
Public Property Name As String
Public Property Items As List(Of CategoryItem)
End Class
Public Class CategoryItem
Public Property ID As Integer
Public Property Name As String
End Class
End Namespace

Answer 2

Here, put this in your view:
<ul>
<li>Mobile
<ul>
<li>Cellphones</li>
<li>Mobile Accessories</li>
</ul>
</li>
<li>Camera
<ul>
<li>Camcorder</li>
<li>Camera Accessories</li>
<li>SLRs</li>
<li>Photo Printers</li>
</ul>
</li>
<li>Computers
<ul>
<li>Laptops</li>
<li>Memory Cards</li>
<li>Monitors</li>
<li>RAM</li>
<li>Computer Accessories</li>
</ul>
</li>
</ul>
While that is what you are asking for, I think you are wanting something a little more.
Because there is nothing specific in your question or any attempt in your part, several assumptions where made in the following solution.
Class:
public class Category
{
public int Id { get; set; }
public string Name { get; set; }
public List<Category> Subcateogries { get; set; }
public Category()
{
Subcateogries = new List<Category>();
}
}
Controller:
public ActionResult Index()
{
//The Data
var categories = new List<Category>
{
new Category { Id = 0, Name = "Mobile" },
new Category { Id = 21, Name = "Cellphones" },
new Category { Id = 22, Name = "Mobile Accessories" },
new Category { Id = 0, Name = "Camera" },
new Category { Id = 55, Name = "Camcorder" },
new Category { Id = 60, Name = "Camera Accessories" },
new Category { Id = 61, Name = "SLRs" },
new Category { Id = 63, Name = "Photo Printers" },
new Category { Id = 0, Name = "Computers" },
new Category { Id = 65, Name = "Laptops" },
new Category { Id = 67, Name = "Memory Cards" },
new Category { Id = 69, Name = "Monitors" },
new Category { Id = 70, Name = "RAM" },
new Category { Id = 71, Name = "Computer Accessories" }
};
var GroupedData = new List<Category>();
foreach(var category in categories)
{
if(category.Id == 0)
{
GroupedData.Add(category);
}
else
{
GroupedData.Last().Subcateogries.Add(category);
}
}
return View(GroupedData);
}
View:
#model List<Category>
<h2>Categories</h2>
<ul>
#foreach (var topCategory in Model)
{
<li>#topCategory.Name
<ul>
#foreach (var subCategory in topCategory.Subcateogries)
{
<li>#subCategory.Name</li>
}
</ul>
</li>
}
</ul>
This is made with the assumptions that the starting list, in this case categories is in the order that you want. I also took a short cut by just reusing the original list items when I created the GroupedData. It is also assumed that there will only ever be two levels.
The view can be refactored to take advantage of partial views and handle multiple levels but that was not part of the question.