AJAX——ASP.NET AJAX(二)UpdatePanel

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

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

然后来学习一下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。

一些子元素：

contentTemplate	局部更新控件的内容模板，可以在其中添加任何控件
Triggers	局部更新的触发器，包括俩中：异步回发(AsyncPostBackTrigger) 用来实现局部更新。普通回发(PostBackTrigger)和普通的一养，不管是否使用了局部更新控件，都会引起页面的全部更新。

这几个属性都是非常简单的，主要UpdateMode和ChildrenAsTriggers和Triggers配合使用，来使我们想要异步更新的控件进行更新即可。下边看一个例子，需要大家下来亲自试验一下，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，处理异步刷新的问题，能够避免很多不必要的代码编写。下一篇博客将在介绍其它的几个控件。这只是简单的学习这几个控件，还行在运用中多实践。

原文链接：https://www.f2er.com/ajax/165446.html

AJAX——ASP.NET AJAX(二)UpdatePanel

猜你在找的Ajax相关文章