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>

第……