[索引页]
[源码下载]
新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件(ScriptManager、ScriptManagerProxy、UpdatePanel、 UpdateProgress和Timer)
作者:
webabcd
介绍
ASP.NET AJAX就5个控件,分别是ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer。先简单地过一下。
关键
1、ScriptManager 和ScriptManagerProxy
·一个页只能有一个ScriptManager(包含了所有脚本资源),要放到任何用到AJAX的控件的前面。
·如果把它放到母版页,而内容页需要与其不同的配置的话,则应在内容页使用ScriptManagerProxy。
·ScriptManager默认EnablePartialRendering="true"。
·ScriptManager的 AllowCustomErrorsRedirect="true"的时候,出现异常就会转到web.config里customErrors中defaultRedirect所指的地址。
2、 UpdatePanel
·UpdatePanel内放置需要被刷新的控件,如果是其内部控件事件导致其刷新,则不用另外做什么设置,因为UpdatePanel默认ChildrenAsTriggers="true"。
·如果是UpdatePanel外部控件导致其刷新的话,则应设置 Triggers。
·在Triggers内,如果AsyncPostBackTrigger未设置EventName,则为其指定控件的默认事件。
·UpdatePanel默认UpdateMode="Always",需要的话应设置UpdateMode="Conditional"。
·RenderMode="Block"对应div;RenderMode="Inline"对应span
3、UpdateProgress
·默认,任何回发,当有延迟的时候则显示UpdateProgress里的ProgressTemplate。
·要与某UpdatePanel关联则设置 AssociatedUpdatePanelID属性。
·DynamicLayout为true则用“display:none;”隐藏;DynamicLayout为false则用 “visibility:hidden;”隐藏。
·默认情况下,例如有2个异步回发,如果第1个还没有执行完毕就执行第2个的话,则会先取消第1个异步回发。
4、Timer
·Interval:间隔时间,单位(毫秒);每一个间隔时间后将触发 Tick事件。
·Timer要放在其所刷新的UpdatePanel内部;放外面的话要设置UpdatePanel的Triggers。
5、其它
·要在UpdatePanel中使用Validator的话,请参看
http://blogs.msdn.com/mattgi/archive/2007/01/23/asp-net-ajax-validators.aspx
·内容页获取母版页的ScriptManager:ScriptManager.GetCurrent(Page)
·后置代码处对UpdatePanel编程,例: ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.Button1); ScriptManager.GetCurrent (this).RegisterPostBackControl(this.Button2); this.UpdatePanel1.Update();
·
Internet Explorer Developer Toolbar下载
·
Fiddler下载
·
Web Development Helper下载
示例
1、最简单的示例
<%
@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Sample.aspx.cs"
Inherits="Overview_Sample" Title="最简单的示例"
%>
<
asp:Content
ID
="Content1"
ContentPlaceHolderID
="ContentPlaceHolder1"
runat
="Server"
>
<
ul
>
<
li
>
之前要有ScriptManager(包含了所有脚本资源),我把它放到母版页了。内容页如需不同配置则应使用ScriptManagerProxy。
</
li
>
<
li
>
最简单的示例,拖个UpdatePanel进来。在 UpdatePanel内拖个GridView,并设置其数据源即可。
</
li
>
</
ul
>
<
asp:UpdatePanel
ID
="UpdatePanel1"
runat
="server"
>
<
ContentTemplate
>
<
asp:GridView
ID
="GridView1"
runat
="server"
AllowPaging
="True"
AllowSorting
="True"
DataSourceID
="SqlDataSource1"
>
<
Columns
>
& nbsp;
<
asp:CommandField
ShowEditButton
="True"
ShowSelectButton
="True"
/>
</
Columns
>
</
asp:GridView
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
asp:SqlDataSource
ID
="SqlDataSource1"
runat
="server"
ConnectionString
="<% $ ConnectionStrings:connstr %>"
DeleteCommand
="DELETE FROM [Products] WHERE [ProductID] = @ProductID"
InsertCommand
="INSERT INTO [Products] ([ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued]) VALUES (@ProductName, @QuantityPerUnit, @UnitPrice, @Discontinued)"
SelectCommand
="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued] FROM [Products]"
UpdateCommand
="UPDATE [Products] SET [ProductName] = @ProductName, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID"
>
<
DeleteParameters
>
<
asp:Parameter
Name
="ProductID"
Type
="Int32"
/>
</
DeleteParameters
>
<
UpdateParameters
>
<
asp:Parameter
Name
="ProductName"
Type
="String"
/>
<
asp:Parameter
Name
="QuantityPerUnit"
Type
="String"
/>
<
asp:Parameter
Name
="UnitPrice"
Type
="Decimal"
/>
<
asp:Parameter
Name
="Discontinued"
Type
="Boolean"
/>
<
asp:Parameter
Name
="ProductID"
Type
="Int32"
/>
</
UpdateParameters
>
<
InsertParameters
>
<
asp:Parameter
Name
="ProductName"
Type
="String"
/>
<
asp:Parameter
Name
="QuantityPerUnit"
Type
="String"
/>
<
asp:Parameter
Name
="UnitPrice"
Type
="Decimal"
/>
<
asp:Parameter
Name
="Discontinued"
Type
="Boolean"
/>
</
InsertParameters
>
</
asp:SqlDataSource
>
</
asp:Content
>
2、UpdatePanel
<%
@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdatePanel.aspx.cs"
Inherits="Overview_UpdatePanel" Title="UpdatePanel"
%>
<
asp:Content
ID
="Content1"
ContentPlaceHolderID
="ContentPlaceHolder1"
runat
="Server"
>
<
ul
>
<
li
>
UpdatePanel内放置需要被刷新的控件,如果是其内部控件事件导致其刷新,则不用另外做什么设置,因为UpdatePanel默认ChildrenAsTriggers="true"。
</
li
>
<
li
>
如果是UpdatePanel外部控件导致其刷新的话,则应设置Triggers。
</
li
>
<
li
>
在Triggers内,如果AsyncPostBackTrigger 未设置EventName,则为其指定控件的默认事件。
</
li
>
<
li
>
UpdatePanel默认UpdateMode="Always",需要的话应设置UpdateMode="Conditional"。
</
li
>
<
li
>
RenderMode="Block"对应div; RenderMode="Inline"对应span
</
li
>
</
ul
>
<
asp:UpdatePanel
ID
="UpdatePanel1"
runat
="server"
>
<
contenttemplate
>
<
fieldset
>
<
legend
>
我在UpdatePanel里
</
legend
>
<
asp:Label
ID
="Label1"
runat
="server"
Text
="我是 Label"
></
asp:Label
>
</
fieldset
>
</
contenttemplate
>
<
triggers
>
<%
--如果没设置 EventName,则取默认事件,Button的默认事件为Click--
%>
<
asp:AsyncPostBackTrigger
ControlID
="Button1"
/>
</
triggers
>
</
asp:UpdatePanel
>
<
p
>
</
p
>
<
fieldset
>
<
legend
>
我在UpdatePanel外
</
legend
>
<
asp:Button
ID
="Button1"
runat
="server"
Text
="按钮"
OnClick
="Button1_Click"
/>
</
fieldset
>
<
p
>
</
p
>
<%
--嵌套UpdatePanel--
%>
<
asp:UpdatePanel
ID
="UpdatePanel2"
runat
="server"
UpdateMode
="Conditional"
>
<
contenttemplate
>
<
fieldset
>
<
legend
>
外围UpdatePanel
</
legend
>
<
asp:Label
ID
="Label2"
runat
="server"
Text
="我是 Label"
></
asp:Label
>
<
asp:Button
ID
="Button2"
runat
="server"
Text
="按钮"
OnClick
="Button2_Click"
/>
<
asp:UpdatePanel
ID
="UpdatePanel3"
runat
="server"
>
& nbsp;
<
ContentTemplate
>
& nbsp;
<
fieldset
>
& nbsp;
<
legend
>
嵌套UpdatePanel
</
legend
>
& nbsp;
<
asp:Label
ID
="Label3"
runat
="server"
Text
="我是Label"
></
asp:Label
>
& nbsp;
<
asp:Button
ID
="Button3"
runat
="server"
Text
="按钮"
OnClick
="Button3_Click"
/>
& nbsp;
</
fieldset
>
& nbsp;
</
ContentTemplate
>
</
asp:UpdatePanel
>
</
fieldset
>
</
contenttemplate
>
</
asp:UpdatePanel
>
</
asp:Content
>
3、UpdateProgress
<%
@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="UpdateProgress.aspx.cs"
Inherits="Overview_UpdateProgress" Title="UpdateProgress"
%>
<
asp:Content
ID
="Content1"
ContentPlaceHolderID
="ContentPlaceHolder1"
runat
="Server"
>
<
ul
>
<
li
>
默认,任何回发,当有延迟的时候则显示 UpdateProgress里的ProgressTemplate。
</
li
>
<
li
>
要与某UpdatePanel关联则设置 AssociatedUpdatePanelID属性。
</
li
>
<
li
>
DynamicLayout为true则用“display:none; ”隐藏;DynamicLayout为false则用“visibility:hidden;”隐藏。
</
li
>
<
li
>
默认情况下,例如有2个异步回发,如果第1 个还没有执行完毕就执行第2个的话,则会先取消第1个异步回发。
</
li
>
</
ul
>
<
asp:UpdatePanel
ID
="UpdatePanel1"
runat
="server"
>
<
ContentTemplate
>
<
fieldset
>
<
legend
>
UpdatePanel1
</
legend
>
<
asp:Label
ID
="Label1"
runat
="server"
Text
="Label1"
></
asp:Label
>
<
br
/>
<
asp:Button
ID
="Button1"
runat
="server"
Text
="Button"
OnClick
="Button1_Click"
/>
</
fieldset
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
asp:UpdateProgress
ID
="UpdateProgress1"
runat
="server"
AssociatedUpdatePanelID
="UpdatePanel1"
DynamicLayout
="false"
>
<
ProgressTemplate
>
<
p
>
UpdatePanel1更新中
</
p
>
</
ProgressTemplate
>
</
asp:UpdateProgress
>
<
p
>
</
p
>
<
asp:UpdatePanel
ID
="UpdatePanel2"
runat
="server"
>
<
ContentTemplate
>
<
fieldset
>
<
legend
>
UpdatePanel2
</
legend
>
<
asp:Label
ID
="Label2"
runat
="server"
Text
="Label2"
></
asp:Label
>
<
br
/>
<
asp:Button
ID
="Button2"
runat
="server"
Text
="Button"
OnClick
="Button2_Click"
/>
</
fieldset
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
asp:UpdateProgress
ID
="UpdateProgress2"
runat
="server"
AssociatedUpdatePanelID
="UpdatePanel2"
DynamicLayout
="true"
>
<
ProgressTemplate
>
<
p
>
UpdatePanel2更新中
</
p
>
</
ProgressTemplate
>
</
asp:UpdateProgress
>
<
p
>
</
p
>
<
asp:UpdatePanel
ID
="UpdatePanel3"
runat
="server"
>
<
ContentTemplate
>
<
fieldset
>
<
legend
>
UpdatePanel3
</
legend
>
<
asp:Label
ID
="Label3"
runat
="server"
Text
="Label3"
></
asp:Label
><
br
/>
<
asp:Button
ID
="Button3"
runat
="server"
Text
="Button"
OnClick
="Button3_Click"
/>
</
fieldset
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
<
asp:UpdateProgress
ID
="UpdateProgress3"
runat
="server"
>
<
ProgressTemplate
>
有延迟我就更新
</
ProgressTemplate
>
</
asp:UpdateProgress
>
</
asp:Content
>
4、Timer
<%
@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Timer.aspx.cs"
Inherits="Overview_Timer" Title="Timer"
%>
<
asp:Content
ID
="Content1"
ContentPlaceHolderID
="ContentPlaceHolder1"
runat
="Server"
>
<
ul
>
<
li
>
Interval:间隔时间,单位(毫秒);每一个间隔时间后将触发Tick事件
</
li
>
<
li
>
Timer要放在其所刷新的UpdatePanel内部;放外面的话要设置UpdatePanel的Triggers。
</
li
>
</
ul
>
<
asp:UpdatePanel
ID
="UpdatePanel1"
runat
="server"
>
<
ContentTemplate
>
<
fieldset
>
<
legend
>
UpdatePanel1
</
legend
>
<
p
>
& nbsp;内部Timer
& nbsp;
<
asp:Timer
ID
="Timer1"
runat
="server"
OnTick
="Timer1_Tick"
Interval
="1000"
>
& nbsp;
</
asp:Timer
>
</
p
>
<
asp:Label
ID
="Label1"
runat
="server"
Text
="Label"
></
asp:Label
>
</
fieldset
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
</
asp:Content
>
注:以上示例涉及到后置代码的,其作用都是用来刷新相关的Label的,所以略掉了。
OK
[源码下载]