HtmlTextWriter добавляет класс к элементу, который уже имеет один

Question

Я обрабатываю несколько объектов партиями и генерирую некоторую разметку для их использования в карусели.

Когда я нахожусь на последнем элементе в партии, я хотел бы дать этому элементу класс, чтобы я мог его соответствующим образом подгонять.

Я могу дать элементу встроенный стиль, чтобы получить его, как я хочу, однако, если я попытаюсь добавить класс к элементу (который уже получил класс), он не отображается в разметке , Очень странно - не можете ли вы присвоить элемент более одного класса, не добавляет ли этот класс к существующему?

Вот код, я работаю с, надеюсь, кто-то может посоветовать:

public static string CreateCarouselMarkup(BrandCollection carouselBrands) 
{ 
    StringWriter stringWriter = new StringWriter(); 
    using (HtmlTextWriter textWriter = new HtmlTextWriter(stringWriter)) 
    { 
     //List items 
     textWriter.RenderBeginTag(HtmlTextWriterTag.Li); 

     int idx = 0; 
     foreach (Brand brand in carouselBrands) 
     { 
      idx++; 
      textWriter.AddAttribute(HtmlTextWriterAttribute.Href, string.Format("/brands/{0}/", brand.SeoInfo.SeoUrl)); 
      textWriter.RenderBeginTag(HtmlTextWriterTag.A); 

      textWriter.AddAttribute(HtmlTextWriterAttribute.Class, "carousel-image"); 
      textWriter.AddAttribute(HtmlTextWriterAttribute.Src, brand.Logo); 
      textWriter.AddAttribute(HtmlTextWriterAttribute.Alt, brand.Title); 

      //If we are on the last item or last item for this batch 
      if (idx == carouselBrands.Count()) 
      { 
       textWriter.AddAttribute(HtmlTextWriterAttribute.Class, "last-img"); 
      } 
      textWriter.RenderBeginTag(HtmlTextWriterTag.Img); 

      textWriter.RenderEndTag();//End Img tag 
      textWriter.RenderEndTag();//End A tag 
     } 

     textWriter.RenderEndTag();//End Li tag 
    } 

    return stringWriter.ToString(); 
} 

Вот небольшой пример разметки, который визуализируется:

<ul class="bjqs" style="height: 80px; width: 100%; display: block;"> 
    <li class="bjqs-slide" style="height: 80px; width: 100%; display: list-item;"> 
     <a href="/brands/kaldewei/"> 
      <img class="carousel-image" src="/Images/Brands/Logos/kaldewei_logo_02.png" alt="Kaldewei"> 
     </a> 
     <a href="/brands/iotti/"> 
      <img class="carousel-image" src="/Images/Brands/Logos/Iotti-logo.jpg" alt="Iotti"> 
     </a> 
     <a href="/brands/ellis/"> 
      <img class="carousel-image" src="/Images/Brands/Logos/Ellis-logo.jpg" alt="Ellis"> 
     </a> 
     <a href="/brands/burgbad/"> 
      <img class="carousel-image" src="/Images/Brands/Logos/Burgbad-logo.png" alt="Burgbad"> 
     </a> 
    </li> 
    <li class="bjqs-slide" style="height: 80px; width: 100%; display: none;"> 
    <a href="/brands/pura/"> 
     <img class="carousel-image" src="/Images/Brands/Logos/Pura-logo.png" alt="Pura"> 
    </a> 
    </li> 
</ul> 

Я ожидал класс last-img, который будет применяться к последним изображениям в каждой партии (я не хочу использовать для этого свойство CSS3). В приведенном выше примере он будет применяться к burgbad и pura.

Answer 1

Ну, самое интересное для меня при запуске кода является то, что он делает class атрибут дважды:

<ul> 
    <li> 
     <a href="/brands/uno/"><img class="carousel-image" src="uno" alt="uno" /></a> 
     <a href="/brands/dos/"><img class="carousel-image" src="dos" alt="dos" /></a> 
     <a href="/brands/tres/"><img class="carousel-image" src="tres" alt="tres" class="last-img" /></a> 
    </li> 
</ul> 

В любом случае, это добавляет атрибут, хотя обработанная разметка «выключено». Итак:

textWriter.AddAttribute(HtmlTextWriterAttribute.Class, idx == carouselBrands.Count() ? "carousel-image last-img" : "carousel-image"); 

оказывает:

<ul> 
    <li> 
     <a href="/brands/uno/"><img class="carousel-image" src="uno" alt="uno" /></a> 
     <a href="/brands/dos/"><img class="carousel-image" src="dos" alt="dos" /></a> 
     <a href="/brands/tres/"><img class="carousel-image last-img" src="tres" alt="tres" /></a> 
    </li> 
</ul> 

Hth ....