当asp.net的更新面板触发时，Css类更改为其初始状态

Question

嗨，我有一个搜索控制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>&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]

提前致谢。

Answer 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>