Prevent full page PostBack on RadioButton selection inside ASP.Net ListView using UpdatePanel

tanweeruddinbeeharry
 
on Dec 05, 2021 10:47 PM
Sample_116713.zip
1054 Views

i have an updatepanel which consists of a listview. Inside the list view i have 3 radiobutton as shown below.

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:ListView ID="ListView_quiz" runat="server">
            <ItemTemplate>
                <asp:Panel ID="choice_panel" ClientIDMode="Static" runat="server">
                    <asp:RadioButton ID="rdbFirst_Choice" AutoPostBack="true" CssClass="rdBTN" ValidationGroup="rdbC" OnCheckedChanged="RadioButton_CheckedChanged" GroupName="choice" Text='<%#Eval("ques_choice_1")%>' runat="server" /><br />
                    <asp:RadioButton ID="rdbSecond_Choice" AutoPostBack="true" CssClass="rdBTN" ValidationGroup="rdbC" GroupName="choice" OnCheckedChanged="RadioButton_CheckedChanged" Text='<%#Eval("ques_choice_2")%>' runat="server" /><br />
                    <asp:RadioButton ID="rdbThird_Choice" AutoPostBack="true" CssClass="rdBTN" ValidationGroup="rdbC" GroupName="choice" OnCheckedChanged="RadioButton_CheckedChanged" Text='<%#Eval("ques_choice_3")%>' runat="server" /><br />
                    <asp:HiddenField ID="correct_Choice" Value='<%#Eval("ques_correct_choice")%>' runat="server" />
                    <asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic" OnServerValidate="CustomValidator1_ServerValidate" />
                </asp:Panel>
            </ItemTemplate>
        </asp:ListView>
    </ContentTemplate>
</asp:UpdatePanel>

OnCheckedChanged i need to trigger an event but the problem is that when AutoPostBack="true" i am getting a postback which i don't want.

How to trigger the OnCheckedChanged event without the page being reload?

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Dec 06, 2021 04:45 AM

Hi tanweeruddinb...,

Please refer below sample.

Note: For this sample i have used temporary DataTable. For more details refer Dynamically create DataTable and bind to GridView in ASP.Net.
 

HTML

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%=DateTime.Now.ToString() %>
<hr />
<asp:ListView ID="ListView_quiz" runat="server">
    <ItemTemplate>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Panel ID="choice_panel" runat="server" ClientIDMode="Static">
                    <asp:RadioButton ID="rdbFirst_Choice" AutoPostBack="true" CssClass="rdBTN" ValidationGroup="rdbC"
                        GroupName="choice" Text='<%#Eval("ques_choice_1")%>' runat="server" /><br />
                    <asp:RadioButton ID="rdbSecond_Choice" AutoPostBack="true" CssClass="rdBTN" ValidationGroup="rdbC"
                        GroupName="choice" Text='<%#Eval("ques_choice_2")%>' runat="server" /><br />
                    <asp:RadioButton ID="rdbThird_Choice" AutoPostBack="true" CssClass="rdBTN" ValidationGroup="rdbC"
                        GroupName="choice" Text='<%#Eval("ques_choice_3")%>' runat="server" /><br />
                </asp:Panel>
                <%=DateTime.Now.ToString() %>
                <br /><br /><hr />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="rdbFirst_Choice" />
                <asp:AsyncPostBackTrigger ControlID="rdbSecond_Choice" />
                <asp:AsyncPostBackTrigger ControlID="rdbThird_Choice" />
            </Triggers>
        </asp:UpdatePanel>
    </ItemTemplate>
</asp:ListView>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
            new DataColumn("ques_choice_1"),
            new DataColumn("ques_choice_2"),
            new DataColumn("ques_choice_3")
        });
        dt.Rows.Add("Red", "Green", "Yellow");
        dt.Rows.Add("Mango", "Banana", "Orange");
        ListView_quiz.DataSource = dt;
        ListView_quiz.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {
            New DataColumn("ques_choice_1"), 
            New DataColumn("ques_choice_2"), 
            New DataColumn("ques_choice_3")})
        dt.Rows.Add("Red", "Green", "Yellow")
        dt.Rows.Add("Mango", "Banana", "Orange")
        ListView_quiz.DataSource = dt
        ListView_quiz.DataBind()
    End If
End Sub

Screenshot