ScriptManager的功能之一就是处理页面上局部更新,对于这点,我想大家都知道。但是他工作的原理到底是什么呢,这个暂且不从正面来回答。

我们这样想一下,目前能够真正实现局部刷新的就是js+xml+dom等编写的ajax代码,而ScriptManager竟然也能实现局部刷新,必然是通过什么手段最终转化成了js等的ajax代码。这种猜想我们从哪里去验证一下呢,且看下面。

1.下面引用了TerreyLee的例子,稍作改动后如下,没有带任何Ajax控件

前台代码:
<form id="form1" runat="server">
<div> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="">==请选择==</asp:ListItem>
<asp:ListItem Value="">Red</asp:ListItem>
<asp:ListItem Value="">Yellow</asp:ListItem>
<asp:ListItem Value="">Green</asp:ListItem>
</asp:DropDownList>
</div>
</form> 后台代码: protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{ Calendar1.DayStyle.BackColor = System.Drawing.Color.FromName(DropDownList1.SelectedItem.Text); }

运行结果:

看到状态栏带有刷新进度条。

查看一下服务器端返回的源文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> </title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkxMjIzNTI5NQ9kFgICAw9kFgICAw8QZGQWAWZkZJtbkkCYOre8ffrFCqW5LPWkPTtr" />
</div> <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgLIi4jfDQLd2/zADgK38ereCQLa96nuBQLa94WJDQLa9/GkBgLa9+3fDwLa99l6Atr39cMFAtr34f4OApeUoIgLApeUnKMMApeUiN4FApeU5PkOApeU0JQGApeUzM8PApeUuGsCl5SUhggCl5TA7g4Cl5S8igYC8q3OkgEC8q26zgoC8q2W6QMC8q2ChAsC8q3+vwwC8q3q2gUC8q3G9Q4C8q2ykQYC8q3u+QQC8q3alAwC7brsvQ8C7brYWALturT0CQLtuqCvAQLtupzKCgLtuojlAwLtuuSACwLtutC7DALtuoyEAQLtuvi/CgLI04vIBQLI0+fjDgLI09OeBgLI08+5DwLI07tVAp3kj+UKAo2LpYsGApKLpYsGApOLpYsGApCLpYsGdr/l7ekdPMwRDZCnhQ2pPfOpOcI=" />
</div>
<div> <SPAN style="COLOR: #ff0000"><SPAN style="COLOR: #339966"> <table id="Calendar1“>...</table>
</SPAN> <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1">
<option selected="selected" value="0">==请选择==</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option> </select> </SPAN>
</div>
</form>
</body>
</html> 日期控件转换成了table(绿色部分),下拉列表转换成了select标签(红色部分)等,所有的一切都转换成了浏览器能解释的html标记语言 没有什么特别的

2.下面是带有ScriptManager控件的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> </title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkxMjIzNTI5NQ9kFgICAw9kFgICAw8QZGQWAWZkZJtbkkCYOre8ffrFCqW5LPWkPTtr" />
</div> <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgLIi4jfDQLd2/zADgK38ereCQLa96nuBQLa94WJDQLa9/GkBgLa9+3fDwLa99l6Atr39cMFAtr34f4OApeUoIgLApeUnKMMApeUiN4FApeU5PkOApeU0JQGApeUzM8PApeUuGsCl5SUhggCl5TA7g4Cl5S8igYC8q3OkgEC8q26zgoC8q2W6QMC8q2ChAsC8q3+vwwC8q3q2gUC8q3G9Q4C8q2ykQYC8q3u+QQC8q3alAwC7brsvQ8C7brYWALturT0CQLtuqCvAQLtupzKCgLtuojlAwLtuuSACwLtutC7DALtuoyEAQLtuvi/CgLI04vIBQLI0+fjDgLI09OeBgLI08+5DwLI07tVAp3kj+UKAo2LpYsGApKLpYsGApOLpYsGApCLpYsGdr/l7ekdPMwRDZCnhQ2pPfOpOcI=" />
</div>
<div> <SPAN style="COLOR: #ff0000"><SPAN style="COLOR: #339966"> <table id="Calendar1“>...</table>
</SPAN> <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1">
<option selected="selected" value="0">==请选择==</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option> </select> </SPAN>
</div>
</form>
</body>
</html> <form id="form1" runat="server">
<div>
<STRONG><SPAN style="COLOR: #ff0000"> <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</SPAN></STRONG> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="0">==请选择==</asp:ListItem>
<asp:ListItem Value="1">Red</asp:ListItem>
<asp:ListItem Value="2">Yellow</asp:ListItem>
<asp:ListItem Value="3">Green</asp:ListItem>
</asp:DropDownList>
</div>
</form>

没什么特别,只是添加了一个scriptManager,当然运行结果不会跟第一个实例有什么区别,因为页面内没有可以让ScriptManager局部更新的组件。

我们看一下服务器返回的html代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> </title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE3MDQ3NDcyNDcPZBYCAgMPZBYCAgUPEGRkFgFmZGRJzKmEsYB5gVwYRx8dFV3x6MurTw==" />
</div> <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script> <SPAN style="COLOR: #ff0000"><script src="/AJAX/WebResource.axd?d=WpudyoSACkhJZI41rIr6Gw2&t=634172191729687500" type="text/javascript"></script> <script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq8YX82ufeV_8av8uEdGjhLBt36ynpIinbuj4reqRYgPiw1&t=5ccefe3d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax 客户端框架未能加载。');
//]]>
</script> <script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq82Fnxq88VMyVxCirTmVquRfdErM4nM7jSYzP2oTAbs70SDfMUJ-ZIDBycHzaXmnVW0&t=5ccefe3d" type="text/javascript"></script>
</SPAN><div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgLGvacPAt3b/MAOArfx6t4JAtr3qe4FAtr3hYkNAtr38aQGAtr37d8PAtr32XoC2vf1wwUC2vfh/g4Cl5SgiAsCl5ScowwCl5SI3gUCl5Tk+Q4Cl5TQlAYCl5TMzw8Cl5S4awKXlJSGCAKXlMDuDgKXlLyKBgLyrc6SAQLyrbrOCgLyrZbpAwLyrYKECwLyrf6/DALyreraBQLyrcb1DgLyrbKRBgLyre75BALyrdqUDALtuuy9DwLtuthYAu26tPQJAu26oK8BAu26nMoKAu26iOUDAu265IALAu260LsMAu26jIQBAu26+L8KAsjTi8gFAsjT5+MOAsjT054GAsjTz7kPAsjTu1UCneSP5QoCjYuliwYCkouliwYCk4uliwYCkIuliwbzSm3y5GzwZploQy1UEn46DjrBBg==" />
</div>
<SPAN style="COLOR: #ff0000"><SPAN style="COLOR: #000000"> <div>
</SPAN> <script type="text/javascript">
//<![CDATA[
<STRONG>Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
</STRONG>//]]>
</script>
</SPAN> <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1">
<option selected="selected" value="0">==请选择==</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option> </select>
</div>
<SPAN style="COLOR: #ff0000"><script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</SPAN></form>
</body>
</html>

相对于第一个实例,添加了一些js引用和一些js代码,尤其要注意加粗的地方,这里实际就是我们能实现刷新的重要部分。现在应该知道,为什么只有ScriptManager不能实现局部刷新了吧,因为在Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90)这句话中,没有可更新的控件。

可能到这里,还是不太相信添加这些代码就能实现局部刷新啦,我们继续往下看

3.带有ScriptManager和UpdatePanel控件的实例

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<SPAN style="COLOR: #ff0000"><asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</SPAN> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="0">==请选择==</asp:ListItem>
<asp:ListItem Value="1">Red</asp:ListItem>
<asp:ListItem Value="2">Yellow</asp:ListItem>
<asp:ListItem Value="3">Green</asp:ListItem>
</asp:DropDownList>
<SPAN style="COLOR: #ff0000"> </ContentTemplate>
</asp:UpdatePanel> </SPAN>
</div>
</form>

这一步其实也没做什么,只是添加了UpdatePanel控件。

运行结果:


注意状态栏可是无刷新哦

看一下服务器端返回的html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> </title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1OTA0NzEyNTMPZBYCAgMPZBYCAgMPZBYCZg9kFgICAw8QZGQWAWZkZNKOh9DNKQIiu+lJISv5z1xLDKNA" />
</div> <script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script> <script src="/AJAX/WebResource.axd?d=WpudyoSACkhJZI41rIr6Gw2&t=634172191729687500" type="text/javascript"></script> <script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq8YX82ufeV_8av8uEdGjhLBt36ynpIinbuj4reqRYgPiw1&t=5ccefe3d" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax 客户端框架未能加载。');
//]]>
</script> <script src="/AJAX/ScriptResource.axd?d=BRDs2LbU_LAg6ZAoegBg0A1ZmMB4Gl-EP20pmeKgxP1i7fAhHRAcUfOQW96vJTq82Fnxq88VMyVxCirTmVquRfdErM4nM7jSYzP2oTAbs70SDfMUJ-ZIDBycHzaXmnVW0&t=5ccefe3d" type="text/javascript"></script>
<div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWMgKmh4YaAt3b/MAOArfx6t4JAtr3qe4FAtr3hYkNAtr38aQGAtr37d8PAtr32XoC2vf1wwUC2vfh/g4Cl5SgiAsCl5ScowwCl5SI3gUCl5Tk+Q4Cl5TQlAYCl5TMzw8Cl5S4awKXlJSGCAKXlMDuDgKXlLyKBgLyrc6SAQLyrbrOCgLyrZbpAwLyrYKECwLyrf6/DALyreraBQLyrcb1DgLyrbKRBgLyre75BALyrdqUDALtuuy9DwLtuthYAu26tPQJAu26oK8BAu26nMoKAu26iOUDAu265IALAu260LsMAu26jIQBAu26+L8KAsjTi8gFAsjT5+MOAsjT054GAsjTz7kPAsjTu1UCneSP5QoCjYuliwYCkouliwYCk4uliwYCkIuliwYWM6Mt9LLccy445bZ7PABY3EeS5w==" />
</div>
<div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
<SPAN style="COLOR: #ff0000">Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], [], [], 90);
</SPAN>//]]>
</script> <div id="UpdatePanel1"> <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1">
<option selected="selected" value="0">==请选择==</option>
<option value="1">Red</option>
<option value="2">Yellow</option>
<option value="3">Green</option> </select> </div>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>

相对于第二个实例的源码,我们可以看到差距是在红色的部分,多出了ScriptManager局部刷新的控件UpdatePanel1。

通过这三个实例呢,我们应该能够理解,为什么ScirptManager能够实现局部刷新了,关键还是引入了我们在源码中看到的js代码,真是这些代码实现了ScirptManager控件的局部刷新功能。

也可参考http://www.cnblogs.com/pangxiaoliang/archive/2009/06/28/1512758.html 写的也很详细,很不错。

转TerreyLee AJAX入门系列2——ScriptManager的理解总结的更多相关文章

  1. ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  2. ASP.NET AJAX入门系列(1):概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  3. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  4. ASP.NET AJAX入门系列(2):使用ScriptManager控件

    ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问W ...

  5. ASP.NET AJAX入门系列(11):在多个UpdatePanle中使用Timer控件

    本文将使用Timer控件更新两个UpdatePanel控件,Timer控件将放在UpdatePanel控件的外面,并将它配置为UpdatePanel的触发器,翻译自官方文档. 主要内容 在多个Upda ...

  6. ASP.NET AJAX入门系列(10):Timer控件简单使用

    本文主要通过一个简单示例,让Web页面在一定的时间间隔内局部刷新,来学习一下ASP.NET AJAX中的服务端Timer控件的简单使用. 主要内容 Timer控件的简单使用 1.添加新页面并切换到设计 ...

  7. ASP.NET AJAX入门系列(9):在母版页中使用UpdatePanel

    本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档. 主要内容 1.添加UpdatePanel控件到Content Page 2.通过Master Page刷新UpdatePan ...

  8. ASP.NET AJAX入门系列(8):自定义异常处理

    在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. ...

  9. ASP.NET AJAX入门系列(7):使用客户端脚本对UpdateProgress编程

    在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager, ...

随机推荐

  1. C# 枚举,传入int值返回string值

    需求:1:子公司负责人2:人事3:审批人4:签批人 5:管理员  传入值为1,2,3,4,5这个数字的某一个.需要返回他们的中文描述. 一下忘记该怎么写了...后来百度下查出来了..记录下当个小工具吧 ...

  2. pipe/popen/fifo

    pipe(管道) 专用于父子进程通信, 函数原型 int pipe(int fd[2]) fd[0]表示输入, fd[1]表示输出 如果父子进程要双向通信, 可以通过类似信号的功能进行控制, 也可以简 ...

  3. 单例模式(Singleton)的6种实现

    1.1.1 摘要 在我们日常的工作中经常需要在应用程序中保持一个唯一的实例,如:IO处理,数据库操作等,由于这些对象都要占用重要的系统资源,所以我们必须限制这些实例的创建或始终使用一个公用的实例,这就 ...

  4. C#加密NodeJS解密

    C#代码: class Program { static void Main(string[] args) { Console.WriteLine(", "abcdefghijkl ...

  5. 作业三--Linux内核分析

    一.Linux内核源码 arch目录支持不同CPU的源代码,是内核源码中比较大的文件. fs文件系统Linux内核的源码放在kernel目录中. 二.构造一个简单的Linux系统MenuOS 三.使用 ...

  6. JavaScript string array 数组

    Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); -------- ...

  7. 3640: JC的小苹果 - BZOJ

    让我们继续JC和DZY的故事.“你是我的小丫小苹果,怎么爱你都不嫌多!”“点亮我生命的火,火火火火火!”话说JC历经艰辛来到了城市B,但是由于他的疏忽DZY偷走了他的小苹果!没有小苹果怎么听歌!他发现 ...

  8. 混乱的url编码||URL编码解码问题

    转载自:http://www.ruanyifeng.com/blog/2010/02/url_encoding.html 一.问题的由来. url就是网址,只要上网就一定会用到. 一般来说,URL只能 ...

  9. 【BZOJ】【1430】小猴打架

    排列组合 蛮逗的…… 这题题干描述的就一股浓浓的Kruskal的气息……很容易就想到是求一个n个点的完全图的生成树个数,然后由于有序,再乘一个n-1的排列数(n-1条边的全排列)即(n-1)! 但是我 ...

  10. uva 11609

    可以想到 答案为 1*C(1,n)+2*C(2,n)+3*C(3,n)+....+n*C(n,n); 由公式 k*C(k,n) = n*C(k-1,n-1) 所以最终答案 n*2^(n-1) 用到快速 ...