如何在沒有AutoPostBack的情況下使asp：Panel與asp：RadioButtonList一起正常使用？

Question

我正在WebForms應用程序中開發表單頁面。

我有一個RadioButtonList和一個面板，當希望選擇RadioButtonList的特定值時，我想打開面板，我該怎么做？

我已經嘗試過AutoPostBack，但是我不喜歡它的工作方式（再次運行頁面），還有其他解決方案嗎？

Answer 1

我在某些地方搜索了使用AutoPostBack屬性推薦的答案，但是我個人不喜歡它，因此我不得不尋找另一種方法來工作，因此我決定使用JavaScript / JQuery ...

這是一個HTML示例代碼，它是RadioButtonList的示例，並且在單擊面板上的選定選項時會打開一個面板（在這種情況下，值“ Required”導致其打開，而“ Not Required”導致其關閉）：

<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：Content ContentHolderID ...

希望這會有所幫助;）任何問題都可以問...