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的重要属性如下：

属性	说明
ChildrenAsTriggers	当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
RenderMode	表示UpdatePanel最终呈现的HTML元素。Block（默认）表示<div>，Inline表示<span>
UpdateMode	表示UpdatePanel的更新模式，有两个选项：Always和Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的Trigger，或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。
Contente Template	用来定义UpdatePanel的内容
AsyncPostBackTrigge	用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的整页回送
conditional	只有满足如下某一条件时才更新panel的内容如果设置UpdateMode="conditional" ChildrenAsTriggers="false"时候，子控件不允许触发更新 1)，当panel中的某个控件引发PostBack时 2),当Panel指定的某个Trigger被引发时

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

页面代码：

<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学习中也是这样，及时是对于一个新的控件来说，我们按着这三步走就可以了。这不仅是学习一个新的控件的过程，对于学习也是这样，还要最后的总结。过程很重要，经历过过程的总结收获更重要。

AJAX——UpdatePanel

猜你在找的Ajax相关文章