在没有 AutoPostBack 的情况下,如何让 asp:Panel 与 asp:RadioButtonList 一起正常工作?
How do I can get asp:Panel to work properly with asp:RadioButtonList without AutoPostBack?
我正在 WebForms 应用程序中开发表单页面。
我有一个 RadioButtonList 和一个面板,我希望在选择 RadioButtonList 的特定值时打开面板,我该怎么做?
我尝试过使用 AutoPostBack,但我不喜欢它的工作方式(运行 页面再次出现),还有其他解决方案吗?
我搜索的一些地方推荐使用 AutoPostBack 属性,但我个人不喜欢它,所以我不得不找到另一种方法让它工作,所以我决定使用JavaScript/JQuery...
这是 RadioButtonList 示例的 HTML 示例代码,以及在单击其上的选定选项时打开的面板(值 "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");
确保当页面运行时面板被隐藏并且只会打开 when/if "Required" selected...
您可能会纠结的另一件事是在函数中放入什么 ID,因为您可以看到面板 ID 是 "PanelAccommodation",但我在函数中使用的 ID 是 "MainContent_PanelAccommodation",因为那是它是如何在您的浏览器上被识别的(只检查 select 面板的位置并检查元素)您会注意到 ID 变为 "MainContent_PanelAccommodation" 因为它继承自您的 asp:Content ContentHolderID...
希望这对您有所帮助 ;) 有任何问题都可以问...
我正在 WebForms 应用程序中开发表单页面。
我有一个 RadioButtonList 和一个面板,我希望在选择 RadioButtonList 的特定值时打开面板,我该怎么做?
我尝试过使用 AutoPostBack,但我不喜欢它的工作方式(运行 页面再次出现),还有其他解决方案吗?
我搜索的一些地方推荐使用 AutoPostBack 属性,但我个人不喜欢它,所以我不得不找到另一种方法让它工作,所以我决定使用JavaScript/JQuery...
这是 RadioButtonList 示例的 HTML 示例代码,以及在单击其上的选定选项时打开的面板(值 "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");
确保当页面运行时面板被隐藏并且只会打开 when/if "Required" selected...
您可能会纠结的另一件事是在函数中放入什么 ID,因为您可以看到面板 ID 是 "PanelAccommodation",但我在函数中使用的 ID 是 "MainContent_PanelAccommodation",因为那是它是如何在您的浏览器上被识别的(只检查 select 面板的位置并检查元素)您会注意到 ID 变为 "MainContent_PanelAccommodation" 因为它继承自您的 asp:Content ContentHolderID...
希望这对您有所帮助 ;) 有任何问题都可以问...