将 RadioButtonList 更改为单个 RadioButtons 的问题答案

【问题标题】：Issues with changing RadioButtonList to individual RadioButtons将 RadioButtonList 更改为单个 RadioButtons 的问题
【发布时间】：2014-01-17 12:12:50
【问题描述】：

我继承了一个包含与此类似的 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 对象，但在这样做之后，我开始得到以下内容：

无法验证由“”的 ControlToValidate 属性引用的控件“ctl00$Content$ChicagoCubsInfield_0”。

我尝试搞砸验证（包括将 CausesValidation 属性设置为“False”），但均无济于事。

注意：我并不像关心表格渲染那样关心验证错误；这更重要（除非修复验证错误有助于修复渲染问题）。

解决这个问题的最佳方法是什么？

提前致谢。 . .

编辑： 我能够通过直接使用客户端标记重新创建我想要的内容，但这并不理想。我更喜欢使用服务器端。

我一直在进行一些挖掘，看来我的 RadioButton 标签未能通过验证的原因是因为 ct100 前缀连接到 ID/Name 标签的开头。当页面工作时（使用 RadioButtonList），每个 ListItem 的 ID 似乎都有一个“ct100_Content_”前缀，但名称有一个“ct100$Content$”前缀。

我遇到的错误（尝试使用单个 RadioButtons 时）是：

无法验证由“”的 ControlToValidate 属性引用的控件“ctl00$Content$ChicagoCubsInfield_0”。

~~据我所见，我认为控件正在寻找“ctl00_Content_ChicagoCubsInfield_0”（注意“_”而不是“$”）。~~

如何强制 ID 使用下划线而不是美元符号？我需要将其保留在这些标签的本地，因为我相信设置在其他地方使用（同样，这不是我的表单），我不想破坏其他任何东西。

编辑：该理论就这么多。我遇到了“ClientIDMode”属性，将其设置为“静态”，并明确设置了我的 ID。没有骰子。挖掘仍在继续。 . .

【问题讨论】：

标签： asp.net radio-button rendering radiobuttonlist tablecell

【解决方案1】：

这可能是您正在寻找的答案：

$( 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());

});

查看演示：

Demo Here

【讨论】：

我会继续玩这个，看看我能不能想出一个更优雅的解决方案，但这应该可以。如果我最终使用此解决方案运行，我会将其标记为答案。谢谢！
我做了类似的事情；我会发布我的答案。
@RayK。好的，没问题。
不过，您的回复帮助我实现了目标。感谢您的帮助！

【解决方案2】：

当一切都说完了，这就是我最终要做的事情。 . .

我将此添加到我的

$('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]);

这正是我想要的。现在我可以随意格式化表格了。

【讨论】：