Question

I have a list of categories and sub categories which is passing from controller to the view. Now, I want them to be represented in the HTML like following. But, I dont know how can i achieve this by using foreach or table or whatever.

EDIT : Code

public ActionResult Electronics()
    {
        var topCategories = pe.Categories.Where(category => category.ParentCategory.CategoryName == "Electronics").ToList();
        //var catsAndSubs = pe.Categories.Include("ParentCategory").Where(c => c.ParentCategory.CategoryName == "Electronics");
        return View(topCategories);
    }

With this view code, I am just able to pull a vertical list.

@foreach (var cats in Model)
{
<li>@cats.CategoryName</li>
foreach (var subcats in cats.SubCategories)
{
<li>@subcats.CategoryName</li>
}
}

Answer 1

When designing HTML mark-up it is very important to consider semantics. What meaning are you trying to convey? That doesn’t look like tabular data to me so please don’t put it in tables 😛

Based on your wireframe above, the way I would probably structure this is like this:

<h1>Category Directory</h1>

<h2><a href="/projectors">Multimedia Projectors</a></h2>

<h2><a href="/audio">Home Audio</a></h2>
<p>
    <a href="/audio/amps">Amplifiers</a>, <a href="/audio/speakers">Speakers</a>
</p>

Adjust the hX tags to reflect their position within the document’s hierachy. Remember to only ever have ONE h1 per page (or per <acticle>, or <section> if using HTML5).

If instead you wind up turning this into something like a Superfish menu then this is the markup that you would use:

<nav id="category_menu">
    <ul>
        <li>
            <a href="/projectors">Multimedia Projectors</a>
        </li>
        <li>
            <a href="/audio">Home Audio</a>
            <ul>
                <li>
                    <a href="/audio/amps">Amplifiers</a>
                </li>
                <li>
                    <a href="/audio/speakers">Speakers</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Edit
Your model is not suitable for creating your desired view, the relationship is bottom-up, but to conveniently construct the view you will want the relationships defined top-down. You need to start by converting the data model into a view model, such as:

class CategoryViewModel
{
    string CategoryName { get;set; }
    IList<CategoryModel> SubCategories { get;set; }
}

and to make this:

IList<CategoryViewModel> Map(IList<CategoryDataModel> dataModel)
{
   var model = new List<CategoryViewModel>();

   //Select the categories with no parent (these are the root categories)
   var rootDataCategories = dataModel.Where(x => x.ParentCategory == null);

   foreach(var dataCat in rootDataCategories )
   {
       //Select the sub-categories for this root category
       var children = dataModel
           .Where(x => x.ParentCategory != null && x.ParentCategory.Name = cat.Name)
           .Select(y => new CategoryViewModel() { CategoryName = y.CategoryName })
           .ToList();

       var viewCat = new CategoryViewModel()
       {
           CategoryName = dataCat.CategoryName,
           SubCategories = children
       };

       model.Add(viewCat);
   }

   return model;
}

Then your view:

<h1>Category Directory</h1>

@foreach(var category in Model)
{
    @Html.Partial("Category", category)
}

Category partial:

<h2>@Html.ActionLink(Model.CategoryName, "Detail", new { Model.CategoryName })</h2>

@if(Model.SubCategories.Count> 0)
{
<p>
    @for (var i = 0; i < Model.SubCategories.Count; i++)
    {
        var subCat = Model.SubCategories[i];
        @Html.ActionLink(subCat.CategoryName, "Detail", new { subCat.CategoryName })

        @if(i < Model.SubCategories.Count - 1)
        {
            <text>,</text>
        }
    }
</p>
}

Note that my current solution only supports 2 levels of categories (as per your wireframe). It could however be easily extended to be recursive.