刚刚在开发中发现,在使用 ASP.NET AJAX 的 UpdatePanel 控件时,其内部不能使用 JavaScript 语言来写页面,否则的话,当 UpdatePanel 更新其内容时,使用 JavaScript 所写的页面部分将不会重新写入。
以下为一个简单的例子:
1<%@ Page Language="C#" %>
2
3<%@ Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
4 Namespace="Microsoft.Web.UI" TagPrefix="asp" %>
5
6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7
8<script runat="server">
9 protected void Button1Clicked(object sender, EventArgs e)
10 {
11 Label1.Text = "耶,我变了!!!";
12 }
13</script>
14
15<html xmlns="http://www.w3.org/1999/xhtml" >
16<head runat="server">
17 <title>无标题页</title>
18</head>
19<body>
20 <form id="form1" runat="server">
21 <div style="padding:20px 20px 20px 20px;">
22 <asp:ScriptManager ID="ScriptManager1" runat="server" />
23 <asp:UpdatePanel runat="server" ID="UpdatePanel1">
24 <ContentTemplate>
25 <asp:Label runat="server" ID="Label1">我想变。。。</asp:Label>
26 <asp:Button runat="server" ID="Button1" Text="变吧" OnClick="Button1Clicked" />
27 <script language="javascript">
28 document.write("javascript executed!");
29 </script>
30 </ContentTemplate>
31 </asp:UpdatePanel>
32 </div>
33 </form>
34</body>
35</html>
36
2
3<%@ Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
4 Namespace="Microsoft.Web.UI" TagPrefix="asp" %>
5
6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7
8<script runat="server">
9 protected void Button1Clicked(object sender, EventArgs e)
10 {
11 Label1.Text = "耶,我变了!!!";
12 }
13</script>
14
15<html xmlns="http://www.w3.org/1999/xhtml" >
16<head runat="server">
17 <title>无标题页</title>
18</head>
19<body>
20 <form id="form1" runat="server">
21 <div style="padding:20px 20px 20px 20px;">
22 <asp:ScriptManager ID="ScriptManager1" runat="server" />
23 <asp:UpdatePanel runat="server" ID="UpdatePanel1">
24 <ContentTemplate>
25 <asp:Label runat="server" ID="Label1">我想变。。。</asp:Label>
26 <asp:Button runat="server" ID="Button1" Text="变吧" OnClick="Button1Clicked" />
27 <script language="javascript">
28 document.write("javascript executed!");
29 </script>
30 </ContentTemplate>
31 </asp:UpdatePanel>
32 </div>
33 </form>
34</body>
35</html>
36
没点按钮之前的截图:
点击按钮之后的截图:
之所以会如此,应当是由于 UpdatePanel 的工作机制使然,script 脚本所输出的部分毕竟不是控件嘛!
不过,在实际开发中往往还是会碰到类似这种情况的,比如我就是在 UpdatePanel 控件中使用了一个用户控件,该控件内部使用 JavaScript 绘制了一个 div 并直接写入页面(即不在任何函数内部),此时当 UpdatePanel 更新时,该 div 就不会被写入,所以就出错了。
解决的方法就是改造出问题的用户控件,要么不再使用 JavaScript 去直接绘制页面,比如使用 Literal 控件代替;要么将 JavaScript 代码移至 UpdatePanel 之外,比如使用 ClientScriptManager 的几个脚本注册函数将其写到页面中去。