AJAX——UpdatePanel

在学习AJAX这是第一个遇到的控件，有点陌生，所以对于没有接触过的东西还是去主动亲近一些比较好。学到后面的地方，发现这个控件很常用，几乎是所有用到局部刷新的地方都会有它的出现。

首先看一下UpdatePanel的结构：

	<asp:ScriptManager ID="ScriptManager1" runat="server" >
	</asp:ScriptManager>
	<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block">
	<ContentTemplate>
	</ContentTemplate>
	<Triggers>
	<asp:AsyncPostBackTrigger />
	<asp:PostBackTrigger />
	</Triggers>
	</asp:UpdatePanel>

其次，什么是UpdatePanel呢？

通俗的说UpdatePanel是AJAX实现的一个组件，用于实现局部更新的。
UpdatePanel控件其实也是Ajax里用得最多的控件之一，网页上要局部更新的内容必须放在UpdatePanel控件里，他必须和ScriptManager控件一起使用。

UpdatePanel的重要属性如下：

下面我们做一个获得页面上异步更新的按钮的例子：

页面代码：

<asp:Button ID="Button1" runat="server" Text="Button" />
<script language="javascript" type="text/javascript">
    //针对更新的panels给出提示
	function highlightPanels(panels, clear)
	{
		for (var i = 0; i < panels.length; i++)
		{
		    var panel = panels[i];
            //显示对比对
			panel.style.border = clear ? "solid 0px white" : "solid 2px red";
			panel.style.backgroundColor = clear ? "white" : "#d6dde8";
		}
	}
	//add_pageLoading事件在客户端在获得服务端结果，但是还没有对updatepanel更新的时候触发
	Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(
		function(sender, e) {
            //获取一个数组后马上就拷贝，进行保留，否则就被清空了，因为数组的对象是被引用的？？
		    var panelsUpdating = Array.clone(e.get_panelsUpdating());
		    //强调panel显示
			highlightPanels(panelsUpdating);
			//2秒后清除强调的效果
			window.setTimeout(
                //这里的语法没看懂，参数调用？？？
				function(){ highlightPanels(panelsUpdating, true); },
				2000);
		});
</script>

在页面load事件中我们获得异步更新的按钮

ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.Button1);

结果显示：

其实学习控件无外乎就是它是什么、有什么用、怎么样的问题，然后我们看我们用在了哪这样一个过程，在AJAX学习中也是这样，及时是对于一个新的控件来说，我们按着这三步走就可以了。这不仅是学习一个新的控件的过程，对于学习也是这样，还要最后的总结。过程很重要，经历过过程的总结收获更重要。