asp.net radio button grouping

问题:

I am currently having an issue with radio buttons and grouping. I have an asp radio button within a repeater control. I have the group name attribute set to "Customer". When the page loads, the radio buttons are not grouped. Instead of the id fields being set to the group name, it is setting the value fields of the radio buttons. I know that I have tried setting radio buttons up outside of a repeater control and have had the same issue. What is going on here?

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>

output 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>

回答1:

I finally got around this by creating a plain radio button and setting the value using an server-side eval.

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

Now when the application performs a postback, I check for the value of Request.Form["radCustomer"]. This works flawlessly.

回答2:

Unfortunately, this is a well known issue with radio buttons within a repeater. One of your only options would be to create a custom server control derived from the RadioButton class and override how it renders.

EDIT: Here's a sample of what the derived class may look like:

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>");
    }
}

回答3:

I fixed it in javascript

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

回答4:

I had the same issues. I am using Literal as placeholder to render radio button onItemCreated event.

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\">";
}

回答5:

I had to modify slightly the answer posted above by r3dsky.

Here's what worked for me:

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

回答6:

I would start by adding a value on my radiobutton Value='<%#Eval("CustomerNumber") %>'.

回答7:

I made my radiobutton have autopostback set to true, and then in the event handler set all the other radio buttons to BE unselected.

Not ideal, but I need lots control over the visibility and enabled attributes of the radiobutton, and it seemed easier to let ASP.NET control that rather than resorting to client side script.

回答8:

This is a well known bug with the ASP.NET Repeater using RadioButtons: here best solution in my opinion

回答9:

I did this:

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

Why? because if you replace the name property for any string you want, you will get an 'not found error'. So, you need to get the name of the first radiobutton, and rename all of them with that name. It works like a sharm ;)

回答10:

My solution, similar to others:

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