How do I can get asp:Panel to work properly with asp:RadioButtonList without AutoPostBack?

Question

I'm developping a form page in a WebForms application.

I have a RadioButtonList and a Panel, and I wanted the panel to open when a especific value of the RadioButtonList was selected, how do I do this?

I've tried with AutoPostBack but I didn't like how it worked (running the page again), are there any other solutions?

Answer 1

Some of the places I searched for an answer recommended using the AutoPostBack property, but I personally didn't like it and so I had to find another way for it to work and so I decided to use JavaScript/JQuery...

This is an HTML sample code of an example of a RadioButtonList and a panel that opens when a chosen option on it is clicked (the value "Required" causes it to open and "Not Required" to close in this case):

<div>
   <p class="space">3.2. ACCOMMODATION (*)</p>

   <asp:RadioButtonList ID="accomodation" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" Width="500px">
         <asp:ListItem Text="Not Required" Value="Not Required"></asp:ListItem>
         <asp:ListItem Text="Required" Value="Required"></asp:ListItem>
   </asp:RadioButtonList>

   <asp:Panel ID="PanelAccommodation" runat="server">
          <p>
               Number of nights (*):
               <asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="numberOfNights" ForeColor="red" ErrorMessage="<- Required"></asp:RequiredFieldValidator>
          </p>
               <asp:TextBox ID="numberOfNights" runat="server" Width="50px"></asp:TextBox>

                <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" TargetControlID="numberOfNights"
                            FilterType="Numbers" runat="server">
                </ajaxToolkit:FilteredTextBoxExtender>

                <p>Preferred Hotel:</p>
                      <asp:TextBox ID="preferredHotel" runat="server" Width="450px"></asp:TextBox>

                      <p>Preferred Hotel URL:</p>
                      <asp:TextBox ID="preferredHotelURL" runat="server" Width="450px"></asp:TextBox>
      </asp:Panel>
</div>

The Script I used:

$(document).ready(function () {
    $("#MainContent_PanelAccommodation").hide("fast");
    $('#<%= accomodation.ClientID%>').find('input:radio').click(function () {
          var selVal = $('#<%= accomodation.ClientID %>').find('input:checked').val();
          if (selVal == "Required") {
               $("#MainContent_PanelAccommodation").show("fast");
          }
          if (selVal == "Not Required") {
               $("#MainContent_PanelAccommodation").hide("fast");
          }
     })
});

In this Script I use the first

$("#MainContent_PanelAccommodation").hide("fast");

to make sure that when the page runs the panel is hidden and will only open when/if "Required" is selected...

Another thing you may struggle with is what ID to put in the function since as you can see the panel ID is "PanelAccommodation", but the ID I use in the function is "MainContent_PanelAccommodation" since that's how it's recognized on your browser (to check this just select the panel's position and inspect element) you'll notice that the ID becomes "MainContent_PanelAccommodation" because it inherits from your asp:Content ContentHolderID...

Hope this helps ;) any questions just ask...