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>

果然,问题解决了!

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