如何创建一个RadioButtonList，其中每个单选按钮位于一个单独的表行？

Question

I'm creating an MCQ Question and answer Interface where I need to place my each radio option in separete row next to the answer, so that user can select the answer, I know to use radiobutton list in a single row in normal way,

 <asp:RadioButtonList ID="opt_questiontype" runat="server" RepeatLayout="Flow" OnClick="call()">
                        <asp:ListItem Value="MCQ" Selected="True">MCQ</asp:ListItem>
                        <asp:ListItem Value="Single">Single Answer</asp:ListItem>
                    </asp:RadioButtonList>

but here i need to place them in row by row in an html table as follows,

<table id="mcqtable">
        <tr style="border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC;">
            <th class="captions2">Option</th><th class="captions2">Answer Text</th><th class="captions2">Is Correct</th>
        </tr>
         <tr>
                <td class="captions1">Answer Option 1</td><td><asp:TextBox ID="txt_answeropt1" runat="server" TextMode="SingleLine" Width="600px"></asp:TextBox></td><td><asp:RadioButton ID="opt_answer1" runat="server" GroupName="grp_answers" Checked="true" /></td>
            </tr>
            <tr>
                <td class="captions1">Answer Option 2</td><td><asp:TextBox ID="txt_answeropt2" runat="server" TextMode="SingleLine" Width="600px"></asp:TextBox></td><td><asp:RadioButton ID="opt_answer2" runat="server" GroupName="grp_answers" /></td>
            </tr>
            <tr>
                <td class="captions1">Answer Option 3</td><td><asp:TextBox ID="txt_answeropt3" runat="server" TextMode="SingleLine" Width="600px"></asp:TextBox></td><td><asp:RadioButton ID="opt_answer3" runat="server" GroupName="grp_answers" /></td>
            </tr>
            <tr>
                <td class="captions1">Answer Option 4</td><td><asp:TextBox ID="txt_answeropt4" runat="server" TextMode="SingleLine" Width="600px"></asp:TextBox></td><td><asp:RadioButton ID="opt_answer4" runat="server" GroupName="grp_answers" /></td>
            </tr>

        </table>

Here I have used normal radiobuttons, but there is a conflict when getting the selected value, So please any one could suggest a way to use asp:RadioButtonList to do this task?

Answer 1

here I have used normal radiobuttons, but there is a conflict when getting the selected value

What is conflict? why you want to use RAdioButtonList here? Your existing code does not show me any conflict.

Answer 2

You should set RepeatDirection="Vertical" in order to show the options row-wise.

Please refer my answer @CodeProject - Change ASP radiobuttonlist repeatdirection property with Javascript or JQuery for a more detailed information on how we can toggle between Vertical and Horizontal alignments.

Demo - [Demo] Change Repeat Direction of asp RadioButtonList

EDIT

Do like below...

<asp:RadioButtonList ID="opt_questiontype" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical" OnClick="call()">

Answer 3

Either use repeater or you can use css to create single row for each radio button.

In repeater you can control the HTML as per your requirement