[英]How do I can get asp:Panel to work properly with asp:RadioButtonList without AutoPostBack?
我正在WebForms应用程序中开发表单页面。
我有一个RadioButtonList和一个面板,当希望选择RadioButtonList的特定值时,我想打开面板,我该怎么做?
我已经尝试过AutoPostBack,但是我不喜欢它的工作方式(再次运行页面),还有其他解决方案吗?
我在某些地方搜索了使用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 ...
希望这会有所帮助;)任何问题都可以问...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.