HtmlTextWriter добавляет класс к элементу, у которого он уже есть

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

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

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

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

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.


html c# asp.net htmltextwriter
person DGibbs    schedule 14.11.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Что ж, самое интересное для меня при запуске вашего кода заключается в том, что он дважды отображает атрибут 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>

Хт....

person EdSF    schedule 14.11.2013
comment
Просмотр исходного кода на странице также показывает, что класс отображается дважды, я думаю, хром (проверить элемент) обнаруживал повторяющийся атрибут и удалял его для меня. Конечно, правильным поведением было бы добавить его к любым существующим классам, как это ни странно. Ну что ж, ваше решение отлично подойдет, спасибо! - person DGibbs; 14.11.2013
comment
@DGibbs Да, я считаю, что элемент проверки в Chrome дает вам интерпретируемый результат всего. Вы даже найдете разметку, сгенерированную вашим скриптом, в исходном коде — на самом деле довольно круто, хотя это может сбить вас с толку :) - person EdSF; 14.11.2013