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