Проблемы с добавлением стиля программного союзника в меню вертикальной навигации с помощью Razor - PullRequest
Новая
       13

Проблемы с добавлением стиля программного союзника в меню вертикальной навигации с помощью Razor

2 голосов
/ 06 декабря 2011

Я пытаюсь украсить вертикальное меню навигации с помощью бритвы в одном из моих проектов, я пытаюсь добавить стиль в зависимости от функциональности, но безуспешно, проблема в том, что у меня есть подкатегории и категории в одной таблице, поэтому янужно вызвать все категории, подкатегории в пределах одной ul, а затем украсить их при наведении, активном, неактивном и т. д. Ниже приведен код, любые идеи, почему не используется жирный оператор. 

  <div class="listbox">
        <ul class="">
            @foreach (var category in Model)
            {
                <li class="@(category.IsActive ? "active" : "inactive")" 
               @if (category.NumberOfParentCategories > 0)

                {

                  <text>style="background-image: url('/Content/images/cat-ul-li-list.png');border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px;
text-decoration: none;
padding-top: 4px;
padding-left: 15px;color:#5F9E95;min-height:27px;"</text>

                   }
                   **@if (category.NumberOfParentCategories > 0 && category.IsActive == true) 


                    {

                    <text>style="background-image: url('/Content/images/cat-ul-li-active.png') !Important;"</text>**
                    }><a href="@Url.RouteUrl("Category", new { categoryId = category.Id, SeName = category.SeName })">@category.Name

                </a>
                 </li><li class="separator"></li>
            }
        </ul>
    </div>

Css: 

.block-category-navigation .listbox ul .inactive
{
background-image: url('images/cat-rt-arrow.png');
background-repeat: no-repeat;
background-position: left center;
border-bottom-width: 1px;
border-bottom-color: #5F9E95;
border-bottom-style: solid;
padding-left:15px;
min-height:27px;
padding-top:8px;
}

.block-category-navigation .listbox ul li a:hover { color: #404041; }
 .block-category-navigation .listbox ul{ background-image: url('images/cat-ul-active.png') !Important; padding-left:15px;min-height:27px; padding-top: 8px;}

Демонстрацию можно увидеть на тестовом веб-сайте: Quadratech

Любое предложение или помощь будут оценены, если это можно сделать с помощью других методов, таких как css и jquery.,Я приложил изображение того, что я точно ищу, где гемостаз - это категория, выбранная ниже, это подкатегории для гем ... с активным сопротивлением подкатегории, а внизу - другие неактивные категории.: enter image description here

1 Ответ

1 голос
/ 06 декабря 2011

Вы добавляете два атрибута style в свой тег.

Я бы объединил их в один.

И немного очистить генерацию для тега LI.Сначала выполняя тест и сохраняя результат в некоторых переменных: 

    const string STYLEBASE= "border-bottom-style: solid;border-bottom-width:1px; border-bottom-color: #FFFFFF;font-size: 13px;
text-decoration: none;
padding-top: 4px;
padding-left: 15px;color:#5F9E95;min-height:27px;";

       var style = "";
       var backgroundimage = "";
       if (category.NumberOfParentCategories > 0) {
          backgroundimage = "background-image: url('/Content/images/cat-ul-li-list.png');";
          style = STYLEBASE;
       }

       if (category.NumberOfParentCategories > 0 && category.IsActive == true) {
          // override the background image
          backgroundimage = "background-image: url('/Content/images/cat-ul-li-active.png');
       }

       <li class="@(category.IsActive ? "active" : "inactive")" style="@Html.Raw(style + " " + backgroundimage)" >
...