How to retain selected HTML5 radio button value when you navigate through a DataPager?

704 views Asked by At

I'm trying to create an online questionnaire and this is the front-end of my website

 <table>
    <tbody>

        <asp:ListView ID="lvQuestion" runat="server"  OnPagePropertiesChanged="lvQuestion_OnPagePropertiesChanged" OnPagePropertiesChanging="lvQuestion_PagePropertiesChanging">
             <LayoutTemplate>
            <ul>
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <tr runat="server">
                    <td><%# Eval("theQuestion") %></td>
                </tr>
                <tr>
                    <td><input type="radio" name="choice" value="<%# Eval("Choice1") %>" /><%# Eval("Choice1") %></td>
                    <td><input type="radio" name="choice" value="<%# Eval("Choice2") %>" /><%# Eval("Choice2") %></td>
                    <td><input type="radio" name="choice" value="<%# Eval("Choice3") %>" /><%# Eval("Choice3") %></td>
                    <td><input type="radio" name="choice" value="<%# Eval("Choice4") %>" /><%# Eval("Choice4") %></td>
                </tr>
            </ItemTemplate>
            <EmptyDataTemplate>
             No data
             </EmptyDataTemplate>
        </asp:ListView>
    </tbody>
</table>


    <asp:DataPager ID="lvDataPager1" runat="server" PagedControlID="lvQuestion" PageSize="1">
        <Fields>
            <asp:NumericPagerField ButtonType="Link" />
        </Fields>
    </asp:DataPager>

I have successfully displayed the questions and its choices(using HTML5 radio buttons). However, when the user navigates from Question #1 to Question #2, the selected answer in Question #1 is lost by DataPager. I needed the selected answers to be saved in order to collect all answers using a single submit button.

1

There are 1 answers

7
Dgan On

You can Use runat='server' with providing id to controls

<input type="radio" name="choice" value="<%# Eval("Choice1") %>" id="rdCh1" runat="server" />

<input type="radio" name="choice" value="<%# Eval("Choice1") %>" id="rdCh2" runat="server" />

<input type="radio" name="choice" value="<%# Eval("Choice1") %>" id="rdCh3" runat="server" />

on Code Behind You can get these values by

string selvalues=rdCh1.Value.ToString();

You have to Find Radio Buttons inside ListView Some what like this on ItemDataBound

protected void ListView_ItemDataBound(object sender, ListViewItemEventArgs e)
    {

        if (e.Item.ItemType == ListViewItemType.DataItem)
        {
System.Web.UI.HtmlControls.HtmlInputRadioButton =
            (System.Web.UI.HtmlControls.HtmlInputRadioButton)e.Item.FindControl("rdCh1");



}