当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>&nbsp;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

从放置在更新面板外部的控件触发 asp.net 事件

ASP.Net 文件上传导致使用触发器在更新面板中回发

更新面板 AJAX asp.net 后运行脚本

ASP.NET 部分回发上的 Chrome 自动填充(更新面板)

隐藏面板内的 ASP.NET updatepanel 可能存在错误