如何让asp:Panel在没有AutoPostBack的情况下与asp:RadioButtonList正常工作

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

本文关键字：asp RadioButtonList 常工作 工作 情况下 AutoPostBack Panel      更新时间：2023-09-26

我正在WebForms应用程序中开发一个表单页面。

我有一个单选按钮列表

和一个面板，我希望在选择单选按钮列表的特定值时打开面板，我该怎么做？

我尝试过使用自动回发，但我不喜欢它的工作方式（再次运行页面），还有其他解决方案吗？

我搜索答案的一些地方建议使用 AutoPostBack 属性，但我个人不喜欢它，所以我必须找到另一种方式让它工作，所以我决定使用 JavaScript/JQuery...

这是 RadioButtonList 示例的 HTML 示例代码，以及单击其上所选选项时打开的面板（在这种情况下，值"必需"会导致它打开，"不需要"导致关闭）：

<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>

我使用的脚本：

$(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");
          }
     })
});

在此脚本中，我使用第一个

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

以确保当页面运行时，面板是隐藏的，并且只有在选择"必需"时才会打开...

您可能纠结的另一件事是将什么 ID 放入函数中，因为如您所见，面板 ID 是"PanelAccommodation"，但我在函数中使用的 ID 是"MainContent_PanelAccommodation"，因为这就是它在浏览器上的识别方式（要检查这一点，只需选择面板的位置并检查元素）您会注意到 ID 变为"MainContent_PanelAccommodation"，因为它继承自您的 asp：内容持有人ID...

希望这对;)有所帮助任何问题都问...

相关文章：