当asp.net的更新面板触发时,css类更改为初始状态
Posted
技术标签:
【中文标题】当asp.net的更新面板触发时,css类更改为初始状态【英文标题】:Css class changes to its initial state when update panel of asp.net triggers 【发布时间】:2019-07-26 15:02:06 【问题描述】:您好,我有一个搜索控件 div,它仅在我单击用于显示搜索 div 的锚标记时显示。同时我更改放置在锚标记中的过滤器图标更新为关闭图标。我使用 toggleClass 方法实现了它。我的问题是,当更新面板更新其内容或发生回发时,图标会重置为第一个过滤器图标,因此与我在 asp.net 更新面板中添加所有这些控件的存在逻辑不匹配。 这是我的代码 sn-p。
<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]
提前致谢。
【问题讨论】:
【参考方案1】:由于这只是客户端更改,服务器无法识别它并将其更改回原始状态。您必须从服务器端更改此设置或将部件移到更新面板之外。我猜您使用的是网格视图的更新面板,所以您可以这样做。
<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>
【讨论】:
以上是关于当asp.net的更新面板触发时,css类更改为初始状态的主要内容,如果未能解决你的问题,请参考以下文章
当其他更新面板执行时通过触发器刷新更新面板,因为第一个必须具有 UpdateMode=Conditional