Задайте класс CSS в элементе ListView ListBox ListList для ASP.NET

Есть ли способ установить класс CSS для элемента ввода в списке переключателей? Я хотел бы ссылаться на эти значения формы по классу в jQuery.

Учитывая ASP.NET RadioButtonList с классами, установленными в ListItems:

 <asp:RadioButtonList ID="RadioButtonList" runat="server">
      <asp:ListItem class="myClass" Text="Yes" Value="1" />
      <asp:ListItem class="myClass" Text="No" Value="0" />
 </asp:RadioButtonList>

Отметьте как:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span class="myClass">
          <input id="RadioButtonList_0" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span class="myClass">
          <input id="RadioButtonList_1" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

К сожалению, класс "myClass" добавлен в <span>, который содержит элемент переключателя, а не сам <input>. Как я мог заставить его выглядеть так:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span>
          <input id="RadioButtonList_0" class="myClass" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span>
          <input id="RadioButtonList_1" class="myClass" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

(Это даже не связано с вопросом о добавлении классов к динамически связанным спискам RadioButtonLists.)

Ответы

Ответ 1

Да, RadioButtonList отображает ужасный HTML.

В любом случае, все еще легко получить их из jQuery.

Try

$('span.myclass input:radio')

Выше будут отображаться все переключатели внутри диапазона с классом "myclass".

Ответ 2

Альтернативой, которую вы, возможно, захотите сделать, является изменение вашего класса CSS для поддержки визуализации управления сервером.

Итак, в вашем CSS вместо следующего:

.myClass { ... }

Вы используете это:

.myClass input { ... }

Я не знаю, можно ли объявить атрибут класса (через класс или CSSClass) декларативным образом; однако вышеизложенное должно дать вам работу.

Ответ 3

untested

$('.myclass input:radio').each(function() {
        this.css({'style-name':'style-value'})
)};

После отображения списка вы можете манипулировать клиентской стороной css, используя вышеуказанный оператор.

Ответ 4

Используя .NET, вы можете создать обработчик событий для события RowBinding. Это позволит вам получить доступ к отдельным элементам управления в каждом элементе списка. Как только вы потянете элемент управления RadioButton, вы можете программно установить его в CssClass, чтобы применить свой класс на уровне RadioButton.

Вы также можете использовать jquery, чтобы найти элементы управления радиокнопками, в которых применяется myClass, а затем применить к нему еще один класс.

В-третьих, вы можете просто изменить определение MyClass, чтобы также указать, что оно применяется только к элементам ввода под элементами, в которых применяется MyClass.

Ответ 5

ответ desigeek довольно хорош.

Чтобы заставить это работать для радиолюбителей, я должен был сделать это на document.ready()

$('#<%=radRisksMarginTrading.ClientID  %>_0').addClass("validate[required]");
$('#<%=radRisksMarginTrading.ClientID  %>_1').addClass("validate[required]");

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