asp net repeater radio button group name and get radio button value

Question

I have an aspx c# page for bank account numbers and credit card installment list in one page

if user want to bank transfer it choose bank account else if user want to pay credit card installment it did it.

the problem is radio buttons group name. I didn't group the radio buttons and didn't get the selected radio button value.

Here is my codes.

This İs Bank Account List

<asp:Repeater ID="RptBankalar" runat="server">
                        <ItemTemplate>
                            <div class="BankaListBox">
                                <table width="100%" height="100" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="200" align="center" valign="middle">
                                            <img alt="<%#Eval("BankName").ToString() %>" src="../../Files/<%#Eval("Logo").ToString() %>" /></td>
                                        <td>
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="120" height="22"><strong>Account Owner</strong></td>
                                                    <td width="15"><strong>:</strong></td>
                                                    <td><%#Eval("AcOwner").ToString() %></td>
                                                </tr>
                                                <tr>
                                                    <td width="120" height="22"><strong>Branch No</strong></td>
                                                    <td width="15"><strong>:</strong></td>
                                                    <td><%#Eval("Branch").ToString() %></td>
                                                </tr>
                                                <tr>
                                                    <td width="120" height="22"><strong>Account Number</strong></td>
                                                    <td width="15"><strong>:</strong></td>
                                                    <td><%#Eval("AccountNum").ToString() %></td>
                                                </tr>
                                                <tr>
                                                    <td width="120" height="22"><strong>IBAN</strong></td>
                                                    <td width="15"><strong>:</strong></td>
                                                    <td><%#Eval("Iban").ToString() %></td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td width="100" align="center" valign="middle">
                                            <asp:RadioButton ID="RadioBtn" Text='<%#Eval("id").ToString() %>' runat="server" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>

Same Page Credit card installment list

<asp:Repeater ID="RptTaksitList" OnItemDataBound="RptTaksitList_ItemDataBound" runat="server">
                                            <ItemTemplate>
                                                <tr runat="server" id="arka_tr">
                                                    <td align="center" height="22" width="40" runat="server" id="td1">
                                                        <b style="display: none; visibility: hidden">
                                                            <asp:Literal ID="lt_id" Text='<%#Eval("BankaID").ToString() %>' runat="server"></asp:Literal>
                                                        </b>
                                                        <asp:Literal ID="lt_taksit_sayisi" Text='<%#Eval("TaksitSayisi").ToString() %>' runat="server"></asp:Literal></td>
                                                    <td width="150" runat="server" id="td2">
                                                        <asp:Literal ID="LblSepetTotal" runat="server" Text='<%#Session["SepetUrunToplami"] %>'></asp:Literal></td>
                                                    <td runat="server" id="td3"><b style="display: none; visibility: hidden">
                                                        <asp:Literal ID="lt_komisyon_orani" Text='<%#Eval("KomisyonOrani").ToString() %>' runat="server"></asp:Literal>
                                                    </b>
                                                        <asp:Literal ID="lt_toplam_tutar" runat="server" Text=''></asp:Literal>
                                                        <b style="display: none; visibility: hidden">
                                                            <asp:Literal ID="lt_alt_limit" Text='<%#Eval("AltLimit").ToString() %>' runat="server"></asp:Literal>
                                                        </b>
                                                    </td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:Repeater>

How can i get the values and grouping this radio buttons.

Normally i did in classic asp but i change my coding language.

Kindly regards.

Thanks for your helps.

Answer 1

i never help in Stack. So i will contribute for the first time after been helped so many times by the community.

I hove you like. I have a more simple solution.

Surround your radio button with some element (DIV) with a className that you might like just to pick all the radio in jQuery.

EDITED IN: The aspnet wasnt persisting the viewstate when i changed that way. Now it works just fine :)

$(document).ready(function () {
    $(".radiofix").each(function () {
        var objRadiosContainer = $(this);
        objRadiosContainer.find("input[type=radio]").each(function () {
            var objRadio = $(this);
            objRadio.change(function () {
                if(objRadio.get(0).checked)
                {
                    objRadiosContainer.find("input[type=radio]").each(function () {
                        if($(this).get(0).id != objRadio.get(0).id)
                        {
                            $(this).get(0).checked = false;
                        }
                    });
                }
            });
        });
    });
});

Let's take a look in the HTML file (or ASPX file):

<asp:Repeater ID="questions" runat="server">
        <ItemTemplate>
            <h3>%# getQuestionNumber() %>) <%# Eval("questionDescription").ToString() %></h3>
            <div class="nameOfTheClass">
                <asp:Repeater ID="answers" runat="server">
                    <ItemTemplate>
                        <asp:RadioButton ID="radioId" runat="server" />
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </ItemTemplate>

This you will work just fine. Just create some javascript file (.js) and call it, fixTheRadios.js and choose a name for "nameOfTheClass" that you like.

Important: I didnt tested the code inside an update panel. I suggest you do that.

Answer 2

Here's how I do it.

In the markup I declare the radio button as server side html control:

<input id="rbMyRadio" type="radio"runat="server" class="myClass" />

And in the code access the value:

foreach (RepeaterItem item in RptBankalar.Items)
{
    if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
    {
        HtmlInputRadioButton rbMyRadio = (HtmlInputRadioButton)item.FindControl("rbMyRadio");
        if (rbMyRadio != null && rbMyRadio.Checked)
        {
            //Do tasks
        }
    }
}

Grouping is done using jquery in page head:

<script type="text/javascript">
    $(document).ready(function () {
        $('input[type=radio]').click(function () {
            var cname = $(this).attr('class');

            $('.' + cname).each(function () {
                $(this).prop('checked', false);
            });

            $(this).prop('checked', true);
        });
    });
</script>

And reference jquery in the head:

<script src="Scripts/jquery-1.8.2.js"></script>

Answer 3

Very late answer but you can also try adding the radio buttons like this in the repeater:

        <asp:TemplateColumn>
            <ItemTemplate>
                <div style="text-align: center">
                    <input type="radio" id="rptMyRadio" runat="server" />
                </div>
            </ItemTemplate>
        </asp:TemplateColumn>

Then in a script block add:

        $('input[type=radio]').click(function () {
            $('input[type=radio]').removeAttr("checked");
            $(this).prop('checked', true);
        });