Работа с ASP.NET Razor и HTML

Question

У меня есть список категорий и подкатегорий, который передается от контроллера к представлению. Теперь я хочу, чтобы они были представлены в HTML, как показано ниже. Но я не знаю, как я могу достичь этого, используя foreach или таблицу или что-то еще.

РЕДАКТИРОВАТЬ : Код

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);
    }

С помощью этого кода вида я могу просто вытянуть вертикальный список.

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

Answer 1

При разработке HTML-разметки очень важно учитывать семантику . Какой смысл вы пытаетесь передать? Для меня это не похоже на табличные данные, поэтому, пожалуйста, не помещайте их в таблицы: P

Исходя из приведенного выше каркаса, способ, которым я, вероятно, структурировал бы это, выглядит следующим образом:

<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>

Настройте теги hX, чтобы они отражали их положение в иерархии документа. Не забывайте всегда иметь ОДИН h1 на страницу (или на , или

при использовании HTML5).

Если вместо этого вы превратите это в нечто вроде Superfish меню, то вы должны использовать эту разметку:

<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>

Редактировать Ваша модель не подходит для создания желаемого представления, отношения расположены снизу вверх, но для удобного построения представления вам понадобятся отношения, определенные сверху вниз. Вам нужно начать с преобразования модели данных в модель представления, например:

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

и сделать это:

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;
}

Тогда ваш взгляд:

<h1>Category Directory</h1>

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

Категория частичная:

<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>
}

Обратите внимание, что мое текущее решение поддерживает только 2 уровня категорий (согласно вашему каркасу). Однако его можно легко расширить, чтобы он стал рекурсивным.