Проблемы с изменением RadioButtonList на отдельные RadioButtons

Я унаследовал форму, которая включает структуру RadioButtonList, похожую на эту (имена изменены для защиты невиновных):

 <asp:RadioButtonList id="ChicagoCubsInfield" RepeatDirection="Vertical" RepeatColumns="1" XPath="somePath">
     <asp:ListItem Value="Tinker" Text="Tinker (Shortstop)" />
     <asp:ListItem Value="Evers" Text="Evers (Second Base)" />
     <asp:ListItem Value="Chance" Text="Chance (First Base)" />
 </asp:RadioButtonList>

Конечно, при рендеринге в браузере это выглядит примерно так:

 <table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker (Shortstop)</label></td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers (Second Base)</label></td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance (First Base)</label></td></tr>
 </table>

Вот моя проблема: мне нужно, чтобы это выглядело так (обратите внимание на разницу в отображении ячеек таблицы):

 <table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker</label></td><td>(Shortstop)</td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers</label></td><td>(Second Base)</td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance</label></td><td>(First Base)</td></tr>
 </table>

Другими словами, мне нужно, чтобы имя и (позиция) были разделены на отдельные столбцы, но их все еще нужно выровнять по строке. Возможно ли это в RadioButtonList?

Я попытался превратить их в отдельные объекты RadioButton, но после этого я начал получать следующее:

Элемент управления 'ctl00$Content$ChicagoCubsInfield_0', на который ссылается свойство ControlToValidate '', не может быть проверен.

Я пытался возиться с проверкой (включая установку свойства CausesValidation на «False»), но все безрезультатно.

Примечание. Меня не столько беспокоит ошибка проверки, сколько рендеринг таблицы; это более важно (если только исправление ошибки проверки не поможет решить проблему рендеринга).

Что было бы лучшим способом справиться с этим?

Заранее спасибо . . .


Изменить: я смог воссоздать то, что хотел, используя прямые теги ‹input> на стороне клиента, но это не идеально. Я бы предпочел использовать ‹asp:RadioButton> на стороне сервера.

Я кое-что покопался, и оказалось, что причина, по которой мои теги RadioButton не проходят проверку, связана с префиксами ct100, которые присоединены к началу тегов ID/Name. Когда страница работает (с RadioButtonList), идентификаторы для каждого ListItem, кажется, имеют префикс «ct100_Content_», но имя имеет префикс «ct100$Content$».

Ошибка, которую я получаю (при попытке использовать отдельные RadioButtons):

Элемент управления 'ctl00$Content$ChicagoCubsInfield_0', на который ссылается свойство ControlToValidate '', не может быть проверен.

Из того, что я вижу, я думаю, что элемент управления ищет "ctl00_Content_ChicagoCubsInfield_0" (обратите внимание на "_" вместо "$").

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

Правка: достаточно об этой теории. Я наткнулся на атрибут «ClientIDMode», установил для него значение «Статический» и явно установил свои идентификаторы. Нет игральных костей. Копание продолжается. . .


person Ray K.    schedule 30.12.2013    source источник


Ответы (2)


Это может быть ответом на то, что вы ищете:

$( document ).ready(function() {

   $('label[for^="ChicagoCubsInfield"]' ).each(function() {
   var data  =  $(this).text();
   var arr = data.split('(');
   $(this).text(data.substring(0, data.indexOf("(")));
   $(this).parent().parent().append("<td>(" + arr[1] + "</td>");
   // alert(arr[0] + " : " + arr[1]);
  });

   //alert( $('#ctl00_Content_ChicagoCubsInfield').html());

});

См. демо:

Демо здесь

person Bhavesh Kachhadiya    schedule 30.12.2013
comment
Я собираюсь продолжить играть с этим, чтобы увидеть, смогу ли я придумать более элегантное решение, но это должно сработать. Если я закончу работу с этим решением, я отмечу его как ответ. Спасибо! - person Ray K.; 02.01.2014
comment
Я сделал что-то подобное этому; Я опубликую свой ответ. - person Ray K.; 03.01.2014
comment
@РэйК. Без проблем. - person Bhavesh Kachhadiya; 03.01.2014
comment
Ваш ответ, однако, помог мне добраться туда. Спасибо за помощь! - person Ray K.; 03.01.2014

Когда все было сказано и сделано, вот что я в итоге сделал. . .

Я добавил это в свой ‹script>:

$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(0)').append(<td>(Shortstop)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(1)').append(<td>(Second Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(2)').append(<td>(First Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr td').css([misc formatting goes here]);

Это сделало именно то, что я хотел. Теперь я могу отформатировать таблицу на досуге.

person Ray K.    schedule 03.01.2014