jquery - 当asp.net的更新面板触发时,css类更改为初始状态
问题描述
嗨,我有一个搜索控件 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>
推荐阅读
- jenkins - 詹金的项目没有自动触发
- qt - 在没有 Canvas 的 QML 中绘制虚线圆
- php - php将html转换为pdf并下载
- scala - Scala - 如何将文件中的数据映射为不同的格式?
- php - 在PHP中显示多个表中的外键
- laravel - Predis:Client.php:370 处的 ERR 未知命令“EVAL”
- wso2esb - 如何在 WSO2 FTP 中用十六进制值替换特殊字符?
- python - 如何从python中的字符串中删除这些特殊的ascii字符?
- angular - 角度文本框的动态串联名称
- shared-hosting - 我所有的帖子请求都给我“由于不活动,该页面已过期。请刷新并重试。” 我的共享主机 laravel 5.6 中的错误