在c#， ASP.net中选择下拉列表后选项卡重置
本文关键字：选项 下拉列表 选择 ASP net | 更新日期: 2023-09-27 18:10:29
<ul id="tabs">
<li><a href="#" name="#tab1"></a></li>
<li><a href="#" name="#tab2"></a></li>
<li><a href="#" name="#tab3"></a></li>
<li><a href="#" name="#tab4"></a></li>
<li><a href="#" name="#tab5"></a></li>
<li><a href="#" name="#tab6"></a></li>
<li><a href="#" name="#tab7"></a></li>
<li><a href="#" name="#tab8"></a></li>
</div>
<div id="tab2">
</div>
<div id="tab3">
</div>
<div id="tab4">
</div>
<div id="tab5">
</div>
<div id="tab6">
<table>
<tr>
<td style ="color: Black "><asp:DropDownList ID="ddlPageSize1" runat="server" AutoPostBack="True" onselectedindexchanged="ddlPageSize_SelectedIndexChanged1">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>25</asp:ListItem>
<asp:ListItem>50</asp:ListItem>
<asp:ListItem>100</asp:ListItem>
<asp:ListItem>250</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td colspan="6">
<asp:GridView ID="GridView2" runat="server" AllowPaging="True" AllowSorting="True" CurrentSortField="ActivityDate" CurrentSortDirection="ASC" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" AutoGenerateColumns="False" OnPreRender="GridView2_PreRender" OnSorting="GridView2_Sorting" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" OnRowCommand="GridView2_RowCommand" OnRowCreated="GridView2_RowCreated" >
<AlternatingRowStyle BackColor="#CCCCCC" />
<Columns>
<asp:BoundField DataField="username" HeaderText="username" SortExpression="username" />
<asp:BoundField DataField="ActivityDate" HeaderText="ActivityDate" SortExpression="ActivityDate" />
<asp:BoundField DataField="Action" HeaderText="Action" SortExpression="Action" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Outcome" HeaderText="Outcome" SortExpression="Outcome" />
<asp:TemplateField HeaderText="File" ShowHeader="False"> <ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server"
CausesValidation="False"
CommandArgument='<%# Eval("ImportedFilename") %>'
CommandName="Download" Text='<%# Eval("ImportedFilename") %>'>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCCCC" />
<HeaderStyle BackColor="#999999" Font-Bold="True" ForeColor="Black" BorderStyle="Dashed" BorderWidth="1" BorderColor="Black" Font-Size="Medium" Font-Names="Arial" />
<PagerStyle ForeColor="#330099" HorizontalAlign="Center" BorderStyle="None" />
<RowStyle BackColor="White" BorderStyle="Solid" BorderWidth="1" BorderColor="Black" Font-Size="Medium" HorizontalAlign="Center" ForeColor="Black"/>
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#808080" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
</td>
</tr>
<tr>
<td> </td>
<td> <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label></td>
<td style ="color: Black "> Page Number:<asp:DropDownList ID="ddlPageNumbers1" runat="server" AutoPostBack="True" onselectedindexchanged="ddlPageNumbers_SelectedIndexChanged1"></asp:DropDownList></td>
</tr>
</table>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" SelectMethod="GetAllImportLogs" TypeName="demo.ImportLogAccessLayer">
<SelectParameters>
<asp:Parameter Name="pageIndex" Type="Int32" />
<asp:Parameter Name="pageSize" Type="Int32" />
<asp:Parameter Name="sortExpression" Type="String" />
<asp:Parameter Name="sortDirection" Type="String" />
<asp:Parameter Direction="Output" Name="totalRows" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</div>
<div id="tab7">
</div>
<div id="tab8">
</div>
function resetTabs() {
$("#content > div").hide(); //Hide all content
$("#tabs a").attr("id", ""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab
Sys.Application.add_Load(tabs);
(function tabs() {
$("#content > div").hide(); // Initially hide all content
$("#tabs li:first a").attr("id", "current"); // Activate first tab
$("#content > div:first").fadeIn(); // Show first tab content
$("#tabs a").on("click", function (e) {
e.preventDefault();
if ($(this).attr("id") == "current") { //detection for current tab
return
}
else {
resetTabs();
$(this).attr("id", "current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
$(myUrlTab).fadeIn(); // Show url tab content
}
}
})()
当我尝试在标签6中使用下拉菜单时，它重置为标签1。下拉列表工作得很好，但我必须再次单击选项卡6查看结果。我试了好几种方法来修理它，但都没有用。任何帮助将不胜感激，以防止标签得到重置。
在DOM的Sys.Application.add_load( //your code here)中添加Jquery代码
EDIT 2(删除Reset Tabs函数和add_load
直接调用)<script type="text/javascript">
$(document).ready(function () {
Sys.Application.add_load(function () {
$("#content > div").hide(); //Hide all content
$("#tabs a").attr("id", ""); //Reset id's
$("#content > div").hide(); // Initially hide all content
$("#tabs li:first a").attr("id", "current"); // Activate first tab
$("#content > div:first").fadeIn(); // Show first tab content
$("#tabs a").on("click", function (e) {
e.preventDefault();
if ($(this).attr("id") == "current") { //detection for current tab
return
}
else {
resetTabs();
$(this).attr("id", "current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
$("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
$(myUrlTab).fadeIn(); // Show url tab content
}
}
});
});
</script>
当您从下拉菜单中选择值时，您的页面回发(很可能是必需的)。现在这篇文章带你回到服务器端，核心问题是你没有告诉服务器你在第6页。
将选项卡id传递给服务器，以便当回发返回时，它将检查选项卡id并将相同的选项卡设置为启用。
但是如果你没有重新加载数据，那么禁用重新加载，这是问题的实际原因
除了@Webruster建议的方法。我也能够通过使用"更新面板"来解决这个问题。谢谢大家的建议。