Question

I need to be able to trigger events when a user clicks on a radio button that is generated within an control on my page.

I’ve added an OnSelectedIndexChanged handler to the RadioButtonList and created a function in my code behind that should handle the selection of the RadioButtonList’s ListItems, but I don’t know how to pass a value to that function.
Here’s my code:

<asp:Repeater runat="server" ID="rptQuestions">
    <HeaderTemplate><table width="100%"></HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td colspan="2"><%# Container.DataItem("QuestionText")%></td>
        </tr>
        <tr>
            <td>
                <asp:RadioButtonList runat="server" ID="rblAnswerSelection" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="CheckAnswer">
                    <asp:ListItem Text="True" Value="1"></asp:ListItem>
                    <asp:ListItem Text="False" Value="0"></asp:ListItem>
                </asp:RadioButtonList>
                <asp:Label runat="server" ID="lblCorrectAnswer" Text="<%#Container.DataItem("CorrectAnswer") %>"></asp:Label>
            </td>
            <td><asp:Label runat="server" ID="lblResult"></asp:Label></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate></table></FooterTemplate>
</asp:Repeater>

Private Function CheckAnswer(ByVal SelectedAnswer As Integer) As Boolean
    Select Case SelectedAnswer
        Case 1 ' User answered True
            If lblCorrectAnswer.Text = "True" Then
                Return True
            Else
                Return False
            End If
        Case 0 ' User answered False
            If lblCorrectAnswer.Text = "False" Then
                Return True
            Else
                Return False
            End If
    End Select
End Function

The idea is that the user is to be informed whether or not their selected answer was correct. The value of the CheckAnswer function would determine a “CORRECT” or “INCORRECT” message displaying on lblResult. If there’s a way to do this without a PostBack, then that would be ideal.

Any suggestions will be greatly appreciated.

Answer 1

Here’s brief outline of client side solution (w/o post-back). Use html radio-buttons along with a hidden field to store the correct answer. Attach click event handlers on radio-buttons to match the value with the value from hidden field.

Repeater Mark-up:

    <tr>
        <td colspan="2"><%# Container.DataItem("QuestionText")%></td>
    </tr>
    <tr>
        <td class="answerContainer">
            <input type="radio" class="option" name='answer_<%# Container.ItemIndex %>' value="1">True
            <input type="radio" class="option" name='answer_<%# Container.ItemIndex %>' value="0">False                
            <input type="hidden" id="correct_answer" value='<%#Container.DataItem("CorrectAnswer") %>' />
        </td>
        <td>
            <span class="result" />
        </td>
    </tr>

Java-script (using jquery):

$(document).ready(function() {

  $('td.answerContainer .option').click(function() {   
      var opt = $(this);
      var correctAns = opt.next('#correct_answer');
      var result = (opt.val() == correctAns.val()) ? "Correct" : "Incorrect";
      opt.parent().next('td').find('.result').html(result);
  });

});

Disclaimer: untested code

Note that radio button names are suffixed with the item index so that on the server side, you can read the user’s answers by looking into the request (for example, value of Request["answer_1"] should tell user selected answer for second question -> “1” : True, “0”: False and empty string: no selection).

The obvious disadvantage is that correct answer is stored in the html and so it will be simpler to cheat the system. Solution can be to make ajax call to the server to check if the answer is correct or not – this will need creating salted time-bound pseudo-random tokens to identify questions (otherwise user can make same ajax calls to get answers).