Updatepanel 后端返回后，在 Updatepanel 内控件的前端 js 失效问题

时间：2021-06-11 08:54:43

实际情况：点击下箭头弹出列表，点击列表上的隐藏按钮隐藏列表。

背景：模块没有使用Js或者Jquery的Ajax功能，而是使用Asp.Net的Ajax控件——UpdatePanel + ScriptManager 的方式

问题：按钮均使用.Net的单击事件，页面加载时功能正常，当使用了如Ask后端事件返回后，前端的 Hide 功能失效

截图如下：

Updatepanel 后端返回后，在 Updatepanel 内控件的前端 js 失效问题

Updatepanel 后端返回后，在 Updatepanel 内控件的前端 js 失效问题

代码如下：

$(document).ready(function () {

        RegisterJs();

    });

    function RegisterJs() {

        $(".NewestArea").hide();

        //显示Note区域

        $(".ShowNoteListArea").click(function () {

            $(".NewestArea").hide("slow");

            $(".NoteListArea").slideDown("slow");

        });

        //隐藏Note区域

        $(".HideNoteListArea").click(function () {

            $(".NewestArea").show("slow");

            $(".NoteListArea").slideUp("slow");

            return false;

        });

    }
<asp:UpdatePanel ID="UpdatePanelNoticeControl" runat="server">

    <ContentTemplate>

        <!-- NoticeControl控件 -->

        <div class="NoticeControl">

            <!-- 最新Note区域 -->

            <div class="NewestArea">

                <!-- 点击显示Note区域 -->

                <span class="ShowNoteListArea glyphicon glyphicon-chevron-down"></span>

                <!-- 最新Note标签 -->

                <asp:Label ID="NewestShow" runat="server"></asp:Label>

            </div>

            <!-- NoteList区域 -->

            <div class="NoteListArea">

                <ul>

                    <li>

                        <ul>

                            <asp:Repeater ID="NoteList" runat="server">

                                <ItemTemplate>

                                    <li>

                                        <%#Eval("NoteContent")%>

                                    </li>

                                </ItemTemplate>

                            </asp:Repeater>

                        </ul>

                    </li>

                    <li>

                        <asp:TextBox ID="TxtNoteContentValue" runat="server" TextMode="MultiLine" Width="500px" Height="50px"></asp:TextBox>

                    </li>

                    <li>

                        <!--<input class="HideNoteListArea ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" type="button" value="Hide" />-->

                        <asp:LinkButton ID="HideNoteListArea" CssClass="HideNoteListArea ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" runat="server">

                            <span class="glyphicon glyphicon-chevron-up" style="margin-right: -8px;"></span>

                            <span class="ButtonText">Hide</span>

                        </asp:LinkButton>

                        <asp:LinkButton ID="AskGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" OnClick="AskGo_Click" runat="server">

                            <span class="glyphicon glyphicon-question-sign" style="margin-right: -8px;"></span>

                            <span class="ButtonText">Ask</span>

                        </asp:LinkButton>

                        <asp:LinkButton ID="AnswerGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" OnClick="AnswerGo_Click" runat="server">

                            <span class="glyphicon glyphicon-info-sign" style="margin-right: -8px;"></span>

                            <span class="ButtonText">Answer</span>

                        </asp:LinkButton>

                        <asp:LinkButton ID="CompleteGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" OnClick="CompleteGo_Click" runat="server">

                            <span class="glyphicon glyphicon-ok-circle" style="margin-right: -8px;"></span>

                            <span class="ButtonText">Complete</span>

                        </asp:LinkButton>

                        <asp:Label ID="ResultShow" runat="server"></asp:Label>

                    </li>

                </ul>

            </div>

        </div>

    </ContentTemplate>

    <Triggers>

        <asp:AsyncPostBackTrigger ControlID="AskGo" />

        <asp:AsyncPostBackTrigger ControlID="AnswerGo" />

        <asp:AsyncPostBackTrigger ControlID="CompleteGo" />

    </Triggers>

</asp:UpdatePanel>

后端事件省略。

——————————————————————————————————————————————————————

问题解决方案一：

该方法网络上均有提及，然而并没有解决我的问题（求圈子朋友帮忙解答），个人表示对原理还是半知不解，继续研究中。方法如下：

在每一个可能引起对前端Js影响的后端事件结束位置使用下面代码注册Js：

ScriptManager.RegisterClientScriptBlock(UpdatePanelNoticeControl, this.GetType(), "RegisterJs", "RegisterJs();", true);

——————————————————————————————————————————————————————

问题解决方案二：

百度另寻来方法：

因为Updatapanel没有postback，你的js不会重新加载。所以失效。更改你的页面代码如下就可以了：
<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {

        // re-bind your jquery events here

        $(document).ready(function () {

            RegisterJs();

        });

    });

    $(document).ready(function () {

        RegisterJs();

    });

    function RegisterJs() {

        $(".NewestArea").hide();

        //显示Note区域

        $(".ShowNoteListArea").click(function () {

            $(".NewestArea").hide("slow");

            $(".NoteListArea").slideDown("slow");

        });

        //隐藏Note区域

        $(".HideNoteListArea").click(function () {

            $(".NewestArea").show("slow");

            $(".NoteListArea").slideUp("slow");

            return false;

        });

    }

</script>

果然，问题解决了！

但是到此时，问题的第一个解决方案没有行通，不免心不安，所以挂单求解答！圈子的大牛们，帮帮忙！我也继续到百度寻求答案！

相关文章