asp.net 单选按钮分组

Posted 2023-03-05

【中文标题】asp.net 单选按钮分组

【英文标题】：asp.net radio button grouping

【发布时间】：2010-11-23 00:35:30

【问题描述】：

我目前遇到单选按钮和分组问题。我在中继器控件中有一个 asp 单选按钮。我将组名属性设置为“客户”。页面加载时，单选按钮未分组。它不是将 id 字段设置为组名，而是设置单选按钮的值字段。我知道我曾尝试在中继器控件之外设置单选按钮并且遇到了同样的问题。这是怎么回事？

aspx

<asp:Repeater ID="repCustomers" runat="server">
    <HeaderTemplate>
        <table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
            <tr>
                <th>&nbsp;</th>
                <th>Cust. No.</th>
                <th>Cust. Name</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
            <tr>
                <td>
                    <asp:RadioButton ID="radCustomer" GroupName="Customer" runat="server" ValidationGroup="Customer" ToolTip='<%#Eval("CustomerNumber") %>' />
                </td>
                <td><%#Eval("CustomerNumber")%></td>
                <td><%#Eval("Name") %></td>
            </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

输出html

<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
    <tr>
        <th>&nbsp;</th>
        <th>Cust. No.</th>
        <th>Cust. Name</th>
    </tr>

    <tr>
        <td>
            <span title="111111"><input id="ctl00_PrimaryContent_repCustomers_ctl01_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl01$Customer" value="radCustomer" /></span>
        </td>
        <td>111111</td>
        <td>Jeremy's Test</td>
    </tr>

    <tr>
        <td>
            <span title="222222"><input id="ctl00_PrimaryContent_repCustomers_ctl02_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl02$Customer" value="radCustomer" /></span>
        </td>
        <td>222222</td>
        <td>My Test</td>
    </tr>

    <tr>
        <td>
            <span title="333333"><input id="ctl00_PrimaryContent_repCustomers_ctl03_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl03$Customer" value="radCustomer" /></span>
        </td>
        <td>333333</td>
        <td>Jim Bob's BBQ</td>
    </tr>

    <tr>
        <td>
            <span title="444444"><input id="ctl00_PrimaryContent_repCustomers_ctl04_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl04$Customer" value="radCustomer" /></span>
        </td>
        <td>444444</td>
        <td>New Hope Hamburgers</td>
    </tr>

    <tr>
        <td>
            <span title="555555"><input id="ctl00_PrimaryContent_repCustomers_ctl05_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl05$Customer" value="radCustomer" /></span>
        </td>
        <td>555555</td>
        <td>Pied Piper Pizza</td>
    </tr>

    <tr>
        <td>
            <span title="666666"><input id="ctl00_PrimaryContent_repCustomers_ctl06_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl06$Customer" value="radCustomer" /></span>
        </td>
        <td>666666</td>
        <td>Sandy's Subs</td>
    </tr>

    <tr>
        <td>
            <span title="777777"><input id="ctl00_PrimaryContent_repCustomers_ctl07_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl07$Customer" value="radCustomer" /></span>
        </td>
        <td>777777</td>
        <td>Leonard's Lambchops</td>
    </tr>

    <tr>
        <td>
            <span title="888888"><input id="ctl00_PrimaryContent_repCustomers_ctl08_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl08$Customer" value="radCustomer" /></span>
        </td>
        <td>888888</td>
        <td>Dave's Diamond Deli</td>
    </tr>

    <tr>
        <td>
            <span title="999999"><input id="ctl00_PrimaryContent_repCustomers_ctl09_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl09$Customer" value="radCustomer" /></span>
        </td>
        <td>999999</td>
        <td>Ernie's Eatery</td>
    </tr>

</table>

【问题讨论】：

这是什么版本的 ASP.Net？

如果 RadioButtons 的“名称”而不是“ID”字段相同，则它们将被分组。

尽管您对中继器外部发生的这种情况发表了评论，但我认为这个特定问题与您对中继器的使用密切相关，正如 CAbbott 所指出的那样。如果您发现情况确实如此，您可能需要考虑编辑您的问题标题以反映这一点。

【参考方案1】：

我终于通过创建一个普通的单选按钮并使用服务器端 eval 设置值来解决这个问题。

<input type="radio" name="radCustomer" value='<%#Eval("CustomerNumber") %>' />

现在，当应用程序执行回发时，我检查 Request.Form["radCustomer"] 的值。这完美无缺。

【讨论】：

如果我们需要 AutoPostback 功能？

我不能这样做，因为我需要 并且如果不将其设置为服务器端控件就无法定位收音机

并非完美无瑕 - 当表单未通过某种验证时，回发后单选按钮未被选中 - 换句话说：回发之间未保存选择。

【参考方案2】：

不幸的是，这是一口井known issue with radio buttons within a repeater。您唯一的选择之一是创建一个从 RadioButton 类派生的自定义服务器控件并覆盖它的呈现方式。

编辑：下面是派生类的样例：

public class MyRadioButton : RadioButton

    protected override void Render(htmlTextWriter writer)
    
        writer.Write("<input id=\"" + base.ClientID + "\" ");
        writer.Write("type=\"radio\" ");
        writer.Write("name=\"" + base.ID + "\" ");
        writer.Write("value=\"" + base.ID + "\" />");
        writer.Write("<label for=\"" + base.ClientID + "\">");
        writer.Write(base.Text);
        writer.Write("</label>");
    

【讨论】：

哇。这是功能上的一个很大的漏洞。呜呜。

这是基于您可以在转发器的项目模板中拥有一个单选按钮组的想法（同一行上有多个单选按钮）。在这种情况下，您会希望根据损坏的 id 进行唯一分组，但大多数时候人们想要 OP 尝试做的事情。

<input /> 标记是自闭合的，其中不应有结束标记和文本。带有它的文本应该在 <label> 标记中。最终输出应如下所示：writer.Write("<input id='" + base.ClientID + "' type='radio' name='" + base.ID + "' value='" + base.ID + "' /><label for='" + base.ClientID + "'>" + base.Text + "</label>");

你好，为什么value属性设置为base.ID？

【参考方案3】：

我在 javascript 中修复了它：

$(function () 
  $("#divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
); 

【讨论】：

这“有效”有很多潜在的混淆。如果您真的要使用这种方法，请确保您认真记录正在发生的事情。

【参考方案4】：

我也有同样的问题。我使用 Literal 作为占位符来呈现单选按钮 onItemCreated 事件。

ASP.Net

<asp:Repeater ID="rpt" runat="server" OnItemCreated="rpt_OnItemCreated">
    <ItemTemplate>
        <asp:Literal ID="lit" runat="server"></asp:Literal>
    </ItemTemplate>
</asp:Repeater>

C#

protected void rpt_OnItemCreated(object sender, RepeaterItemEventArgs e) 
    Literal lit = (Literal)e.Item.FindControl("lit");
    lit.Text = "<input type=\"radio\" name=\"myGroup\">";

【讨论】：

请注意，您必须为单选按钮指定名称属性（而不仅仅是 id）才能在回发时显示在 Request.Form 中！

【参考方案5】：

我不得不稍微修改上面 r3dsky 发布的答案。

这对我有用：

$(document).ready(function () 
        $(".divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
    ); 

【参考方案6】：

我会首先在我的单选按钮 Value='' 上添加一个值。

【讨论】：

asp单选按钮控件没有value属性。

他可能指的是“文本”属性。 ;)

那不行。我知道它只是要为其添加一个标签，但我想我还是会尝试一下。

【参考方案7】：

我将单选按钮的自动回发设置为 true，然后在事件处理程序中将所有其他单选按钮设置为未选中。

不理想，但我需要对单选按钮的可见性和启用属性进行大量控制，让 ASP.NET 控制似乎比诉诸客户端脚本更容易。

【参考方案8】：

这是使用 RadioButtons 的 ASP.NET 中继器的一个众所周知的错误： here best solution in my opinion

【参考方案9】：

我这样做了：

$("input:radio").attr("name", $("input:radio").first().attr("name"));

为什么？因为如果您将 name 属性替换为您想要的任何字符串，您将收到“未找到错误”。因此，您需要获取第一个单选按钮的名称，并使用该名称重命名所有单选按钮。它就像一个沙姆;）

【参考方案10】：

我的解决方案，和其他人类似：

<input id="ctlRadio" runat="server" type="radio" data-fixgroupbug="1" >

// Fixes this ASP.NET bug: if radio input is inside repeater you can't set its name.
// Every input gets set different name by ASP.NET.
// They don't behave as a group. You can select multiple radios.
function fixRadiogroupBug()

    $('[type="radio"][data-fixgroupbug]').click(function () 
        $(this).siblings('[type="radio"]').prop('checked', false);
    );


$(document).ready(function () 
    fixRadiogroupBug();
);