Css class 在 asp.net 的更新面板触发时更改为初始状态
Css class changes to its initial state when update panel of asp.net triggers
您好,我有一个搜索控件 div,它仅在我单击用于显示搜索的锚标记时显示 div。同时我更改放置在锚标记内的过滤器图标得到更新以关闭图标。我使用 toggleClass 方法实现了它。我的问题是,每当更新面板更新其内容或发生回发时,图标都会重置为第一个过滤器图标,因此与其自身存在的逻辑不匹配请注意,我在 asp.net 更新面板中添加了所有这些控件。
这是我的代码片段。
<asp:UpdatePanel runat="server" ID="Up1">
<ContentTemplate>
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4 text-right">
<a id="SearchControl" href="#"><i id="SearchIcon" class="fa fa-filter"></i> Search</a>
</div>
</div>
<div id="filterControlDiv" class="row">
<div class="col-lg-12 bg-secondary" style="height: 150px;">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<asp:GridView runat="server" ID="grdAirportList" AllowPaging="true" PageSize="5" AutoGenerateColumns="true">
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
使用的脚本是,
[![<script>
$(function () {
InitialSearch();
$('#SearchControl').click(function ()
{
$('#filterControlDiv').slideToggle();
$('#SearchIcon').toggleClass("fa-filter fa-times");
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('#SearchControl').click(function () {
$("#filterControlDiv").slideToggle();
$('#SearchIcon').toggleClass("fa-filter fa-times");
});
});
function InitialSearch() {
$('#filterControlDiv').hide();
}
</script>][1]][1]
提前致谢。
由于这只是客户端更改,服务器无法识别它并将其更改回原始位置。您必须从服务器端更改它或将部件移到更新面板之外。我猜你使用了 gridview 的更新面板,所以你可以这样做。
<asp:UpdatePanel runat="server" ID="Up1">
<ContentTemplate>
<div class="row">
<div class="col-lg-12">
<asp:GridView runat="server" ID="grdAirportList" AllowPaging="true" PageSize="5" AutoGenerateColumns="true">
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
您好,我有一个搜索控件 div,它仅在我单击用于显示搜索的锚标记时显示 div。同时我更改放置在锚标记内的过滤器图标得到更新以关闭图标。我使用 toggleClass 方法实现了它。我的问题是,每当更新面板更新其内容或发生回发时,图标都会重置为第一个过滤器图标,因此与其自身存在的逻辑不匹配请注意,我在 asp.net 更新面板中添加了所有这些控件。 这是我的代码片段。
<asp:UpdatePanel runat="server" ID="Up1">
<ContentTemplate>
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4 text-right">
<a id="SearchControl" href="#"><i id="SearchIcon" class="fa fa-filter"></i> Search</a>
</div>
</div>
<div id="filterControlDiv" class="row">
<div class="col-lg-12 bg-secondary" style="height: 150px;">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<asp:GridView runat="server" ID="grdAirportList" AllowPaging="true" PageSize="5" AutoGenerateColumns="true">
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
使用的脚本是,
[![<script>
$(function () {
InitialSearch();
$('#SearchControl').click(function ()
{
$('#filterControlDiv').slideToggle();
$('#SearchIcon').toggleClass("fa-filter fa-times");
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('#SearchControl').click(function () {
$("#filterControlDiv").slideToggle();
$('#SearchIcon').toggleClass("fa-filter fa-times");
});
});
function InitialSearch() {
$('#filterControlDiv').hide();
}
</script>][1]][1]
提前致谢。
由于这只是客户端更改,服务器无法识别它并将其更改回原始位置。您必须从服务器端更改它或将部件移到更新面板之外。我猜你使用了 gridview 的更新面板,所以你可以这样做。
<asp:UpdatePanel runat="server" ID="Up1">
<ContentTemplate>
<div class="row">
<div class="col-lg-12">
<asp:GridView runat="server" ID="grdAirportList" AllowPaging="true" PageSize="5" AutoGenerateColumns="true">
</asp:GridView>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>