AJAX——ASP.NET AJAX(二)UpdatePanel

          上一篇博客学习了ScriptManager这个异步刷新必备的控件,这篇博客再来学习UpdatePanel这个非常重要的控件。

 

          先来看一个概念:UpdatePanel控件是用来局部更新网页上的内容,网页上要局部更新的内容必须放在UpdatePanel里边。主要用于定义页面更新区域和更新方式。


            然后来学习一下UpdatePanel的属性和方法:

属性

说明

ChildrenAsTriggers

UpdateMode属性为Conditional时,UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。

RenderMode

表示UpdatePanel最终呈现的HTML元素。Block(默认)表示<div>Inline表示<span>

UpdateMode

表示UpdatePanel的更新模式,有两个选项:AlwaysConditionalAlways是不管有没有Trigger,其他控件都将更新该UpdatePanelConditional表示只有当前UpdatePanelTrigger,或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送,或是服务器端调用Update()方法才会引发更新该UpdatePanel

 

         一些子元素:

contentTemplate

局部更新控件的内容模板,可以在其中添加任何控件 

Triggers

局部更新的触发器,包括俩中:异步回发(AsyncPostBackTrigger) 用来实现局部更新。普通回发(PostBackTrigger)和普通的一养,不管是否使用了局部更新控件,都会引起页面的全部更新。

 

 

          这几个属性都是非常简单的,主要UpdateModeChildrenAsTriggersTriggers配合使用,来使我们想要异步更新的控件进行更新即可。下边看一个例子,需要大家下来亲自试验一下,conditional,Always值的不同,如何指向不同控件的更新等等。

         看这个例子:


	<body>
	    <form id="form1" runat="server">
	        <%--添加ScriptManager控件--%>
			 <asp:ScriptManager ID="ScriptManager1" runat="server">
			</asp:ScriptManager>
	
	        <%--设置ChildrenAsTrggers为True时必须设置UpdateMode为Conditional--%>
			<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
				<ContentTemplate>
					<%= DateTime.Now %>
					<asp:Button ID="Button11" runat="server" Text="Button" />
					<asp:Button ID="Button22" runat="server" Text="Button" />
				</ContentTemplate>
	
				<Triggers>
	                <%--指定的控件触发刷新,当单击Button3时这个也会进行异步刷新--%>
					<asp:AsyncPostBackTrigger ControlID="Button3" />
				</Triggers>
			</asp:UpdatePanel>
			
	        <%--设置UpdateMode为True时,可以设置其他Triggers指向,如下为Button2的同步刷新 --%>
			<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
				<ContentTemplate>
					<%= DateTime.Now %>
					<asp:Button ID="Button1" runat="server" Text="Button" />
				</ContentTemplate>
				<Triggers>
					<asp:PostBackTrigger ControlID="Button2" />
				</Triggers>
			</asp:UpdatePanel>
			
	
			<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
				<ContentTemplate>
					<%= DateTime.Now %>
					<asp:Button ID="Button2" runat="server" Text="Button" />
				</ContentTemplate>
			</asp:UpdatePanel>
	        <asp:Button ID="Button3" runat="server" Text="Button" />
	    </form>
	</body>

            这个例子的具体效果需要单击来查看,大家自己复制这段代码,写在HTML文件,直接在网页打开即可查看。

  

            总而言之,根基最基础的属性方法,灵活运用UpdatePanel会对我们的异步更新起到很大的作用,这里我们把这几个控件学习好,可以非常方便的在VS中开发.net,处理异步刷新的问题,能够避免很多不必要的代码编写。下一篇博客将在介绍其它的几个控件。这只是简单的学习这几个控件,还行在运用中多实践。


你可能感兴趣的:(Ajax,asp.net,ajax框架,UpdatePanel)