千里之行，始于足下

酌贪泉而觉爽，处涸辙而犹欢
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  34 随笔 :: 0 文章 :: 192 评论 :: 10 引用
使用UpdatePanel控件要注意的一个问题

刚刚在开发中发现，在使用 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

没点按钮之前的截图：



点击按钮之后的截图：

 

 


之所以会如此，应当是由于 UpdatePanel 的工作机制使然，script 脚本所输出的部分毕竟不是控件嘛！

不过，在实际开发中往往还是会碰到类似这种情况的，比如我就是在 UpdatePanel 控件中使用了一个用户控件，该控件内部使用 JavaScript 绘制了一个 div 并直接写入页面（即不在任何函数内部），此时当 UpdatePanel 更新时，该 div 就不会被写入，所以就出错了。

解决的方法就是改造出问题的用户控件，要么不再使用 JavaScript 去直接绘制页面，比如使用 Literal 控件代替；要么将 JavaScript 代码移至 UpdatePanel 之外，比如使用 ClientScriptManager 的几个脚本注册函数将其写到页面中去。

posted on 2006-11-02 00:13 sunwaywei 阅读(2099) 评论(6) 编辑 收藏

评论

#1楼 2006-11-02 00:18 aspnetx      
之前版本的是否这样忘记了
不过其实自己想一想还是挺有道理的
　回复　引用　查看　  

#2楼 2006-11-02 00:27 moslem[未注册用户]
解决方法试验过吗？恐怕不成吧。
　回复　引用　  

#3楼 2006-11-02 01:11 Dflying Chen      
JavaScript修改DOM之后的内容在页面内容刷新之后当然不会保存。这就和Ajax页面没法在刷新后保留状态一样。和UpdatePanel没有任何关系。
　回复　引用　查看　  

#4楼 2006-11-02 01:52 FantasySoft      
分清楚哪些事情是客户端做的，哪些是服务器端做的，问题就会明朗了。
　回复　引用　查看　  

#5楼[楼主] 2006-11-02 07:55 sunwaywei      
@moslem
呵呵，怎么可能会不行呢？我就改好了嘛

@Dflying Chen
你说的对，本身与UpdatePanel是没关系的，不过UpdatePanel会导致这样的问题，一开始想不到的话也容易一头雾水的
　回复　引用　查看　  

#6楼 2006-11-02 15:39 李振波      
之前的版本也是这样的.这不是UpdatePanel的错吧.也容易解决就是得重复执行js
　回复　引用　查看　  

最新IT新闻:
· 最想要的Entity Framework功能
· 专访Jeffrey Richter：Windows 8是微软的重中之重
· 《福布斯》：谷歌进军硬件产品 难撼动苹果地位
· 美国空军拟最多购买1.8万台iPad 2
· 分析称专利之争让谷歌苹果两败俱伤
» 更多新闻...