ASP.NET AJAX应用剖析立即上手-1

最新推荐文章于 2019-07-24 23:36:11 发布

TorerCoder

最新推荐文章于 2019-07-24 23:36:11 发布

阅读量1k

点赞数

文章标签： asp.net ajax postback calendar button textbox

本文链接：https://blog.csdn.net/TorerCoder/article/details/4419289

版权

http://hi.baidu.com/caojuxiang/blog/item/2a396a30909f8d9ca9018ea6.html

1.3 UpdatePanel控件

我们先来看ASP.NET AJAX 1.0在Server端控件这一块的功能，首先看到的是UpdatePanel控件。

UpdatePanel控件是ASP.NET AJAX Server Control当中重要的一个成员，它与ScriptManager配合之后，可以通过相当简单的方式完成AJAX功能。

1.3.1 如何使用UpdatePabel控件

我们在前面曾经介绍过了一个UpdatePanel简单的使用案例，我们接着来看一个更复杂的功能示例。我们同样建立一个.aspx页面，在上面布置一个ScriptManager和UpdatePanel，并在其中插入一个2×3的HTML表格，如图1-17所示。

在这个表格当中，我们布置几个控件，分别是Label、Textbox、Calendar、Button，如图1-18所示。

图1-17

图1-18

我们做一个典型的日期选择输入功能，在网页载入的时候，先让Calendar隐藏，当用户点击TextBox右边的按钮之后，则Calendar弹出让用户选择，选择完成之后将用户选择的值自动填入TextBox中。这个代码相当简单，请先在Buton上面Double-Click，并撰写代码如下：

EX： PrimerAJAX/UpdatePanel/Demo01.aspx.vb

'当点击Button

Protected Sub Button1_Click（ByVal sender As Object, ByVal e As System.EventArgs）

'将原本隐藏的Calendar1显示出来

Me.Calendar1.Visible = True

End Sub

'当用户选取Calendar

Protected Sub Calendar1_SelectionChanged（ByVal sender As Object, ByVal e As System.EventArgs）

'将用户选择的日期，放入TextBox1中

Me.TextBox1.Text = Me.Calendar1.SelectedDate

'隐藏Calendar1

Me.Calendar1.Visible = False

End Sub

上面这段代码您可能很熟悉，但是请特别注意，有一个很不一样的地方，就是整段代码当中，所有本来应该在事件后面出现的“Handles …”都不见了：

当您试着打开这个网页，整个执行过程中，都不会产生Postback动作，如图1-19所示。

图1-19

是不是很神奇呢?

UpdatePanel的使用就是那么简单，轻易地就让您的网页出现AJAX功能，却不需要为其多撰写一行代码。

1.3.2 UpdatePanel架构与异步Postback机制

您可以试着切换到.aspx的源文件模式，会发现一个有趣的现象。

您大概可以猜到一二，凡是位于这区段（<ContentTemplate>）中的控件，都会被动态地Render出来，而布置于其中的控件都不会真的产生Postback（但不代表不支持Server端ASP.NET的事件处理），因此我们点击Button1按钮之后，尽管原本应该会有一个Submit事件发生，但是由于我们把控件放在UpdatePanel中，因此原本的Submit机制不见了，取而代之的则是所谓的“异步Postback（asynchronous postback）”，因此后端的事件过程代码却依旧会被执行到：

EX： PrimerAJAX/UpdatePanel/Demo01.aspx.vb

'当点击Button

Protected Sub Button1_Click（ByVal sender As Object, ByVal e As System.EventArgs）

'将原本隐藏的Calendar1显示出来

Me.Calendar1.Visible = True

End Sub

这时候，虽然页面没有Postback，却依旧可以在浏览器前端出现我们想要的结果：Calendar控件动态地显示了。

同样的，当Calendar控件上的日期被改变时，虽然不会Postback，却照样执行到了后端的事件过程码（也是因为触发了所谓的“异步Postback机制”）：

EX： PrimerAJAX/UpdatePanel/Demo01.aspx.vb

'当用户选取Calendar

Protected Sub Calendar1_SelectionChanged（ByVal sender As Object, ByVal e As System.EventArgs）

'将用户选择的日期，放入TextBox1中

Me.TextBox1.Text = Me.Calendar1.SelectedDate

'隐藏Calendar1

Me.Calendar1.Visible = False

End Sub

TextBox中的内容变成选择的日期，而Calendar控件消失。

前面我们多次提到了“异步Postback”这个概念，这是什么意思呢?

在传统的ASP.NET程序设计架构下，后端事件的产生是通过Postback来进行的，但是Postback的进行却会导致网页刷新（Submit）状况。

而UpdatePanel控件，则提供了所谓“异步Postback”这个机制，在预设的状况下面，所有被放置于ContentTemplate区段中的控件，都不会产生Postback，取而代之的机制则是“异步Postback”，但是别小看异步Postback它依旧可以执行到后端的事件，并且利用AJAX模式来刷新（refresh）前端的网页显示内容。

通过这样的“异步postback”技术，我们已经可以轻松完成相当多的AJAX功能，在本书后面的整合范例当中，有更多实际的应用实践可供读者参考。

备注

我们在这边仅针对控件的使用加以介绍，而不会详细介绍整个异步Postback技术的背后细节，这部分属于进阶书籍的范围，如果您对这部分有兴趣，请参考http://Ajax.StudyHost.com。

1.3.3 UpdatePanel的触发机制Triggers

按照传统的使用方式，我们都是通过UpdatePanel控件“里面”放的控件（例如上例中的按钮）来触发“异步Postback”，但是其实还有其他的方式来触发异步Postback动作，我们看下面这个范例，如图1-20所示。

上方的DropDownList已经启动AutoPostback，但请注意我们刻意把它放置在UpdatePane之外，同时再撰写下面的程序：

EX： PrimerAJAX/UpdatePanel/Demo02.aspx.vb

Protected Sub DropDownList1_SelectedIndexChanged（ByVal sender As Object, ByVal e As System.EventArgs） Handles DropDownList1.SelectedIndexChanged

Me.Label1.Text = "您选择的数据是:" & Me.DropDownList1.SelectedValue

End Sub

这时候您会发现，倘若DropDownList选项改变，在页面上会产生Postback，如图1-21所示。

图1-20

图1-21

如果我们希望位于UpdatePanel外的控件，在Postback时，依旧采用异步Postback的模式来进行时，可以在UpdatePanel上面作如下的设定，请先点击UpdatePanel的Triggers属性，如图1-22所示。

图1-22

接着在出现的界面中作如图1-23所示的设置。

图1-23

您会发现我们将UpdatePanel加上了一个异步Postback（AsyncPostBack）的触发器（Trigger），并选择Control ID为PropDownList 1。

说明

何谓同步Postback（AsyncPostBack）的触发器（Trigger）?

UpdatePanel的异步刷新是针对UpdatePanel中<ContentTemplate>里面的控件来进行的，但这些被布置于UpdatePanel当中的控件究竟何时从服务器端获取动态Render出的数据并通过AJAX模式来刷新呢?这个时机点是由触发器（Trigger）来决定的。

当触发器（某个控件的某个事件）被触发时，就会针对该UpdatePanel进行异步刷新的动作，在默认的状况下面，UpdatePanel中的每一个控件都是触发器，而UpdatePanel外的控件若要作为触发器，则必需要依照上面这种方式来设置。

我们也可以通过代码来设置触发器（通过 RegisterAsyncPostBackControl方法），或把某一个位于UpdatePanel控件中的对象，取消其触发器功能（通过 RegisterPostBackControl方法）。

不过RegisterPostBackControl这种功能要用在哪里呢?

干嘛把UpdatePanel当中的控件改为支持传统Postback呢?

典型的例子体现在FileUpload 控件的使用，因为UpdatePanel不支持FileUpload ，因此如果FileUpload 放置于UpdatePanel当中将会不work，您必须把UpdatePanel当中的FileUpload 控件与相关的按钮改为同步Postback机制，例如：

<asp:updatepanel runat="server" id="UpdatePanel1">

<asp:FileUpload runat="server" id="FileUpload1" />

<asp:button runat="server" id="Button1" text="Postback" />

</contenttemplate>

<asp:postbacktrigger controlid="Button1" />

</triggers>

</asp:updatepanel>

这样文件上传功能才能够正确执行。

如此一来，当DropDownList因为选取的项目改变（触发了SelectedIndexChanged事件）而有Postback动作时，UpdatePanel中的内容都会以AJAX模式动态改变。DropDownList1的SelectedIndexChanged事件当场变成异步Postback了，即使它并没有被布置在UpdatePanel控件中。

1.3.4 RegisterAsyncPostBackControl方法

同样的，前面提到的这个触发机制的设定动作，也可以通过代码来进行，请参考如图1-24所示的界面。

图1-24

我们一样将“取得时间”按钮放置在UpdatePanel的外面，且在按钮上Double-Click，撰写下面的代码：

EX： PrimerAJAX/UpdatePanel/demo03.aspx.vb

Protected Sub Button1_Click（ByVal sender As Object, ByVal e As System.EventArgs） Handles Button1.Click

Me.TextBox1.Text = Now

End Sub

这只是一个简单的范例，倘若您只是这样就开始执行，会发现点击Button时会触发传统的Postback动作，如图1-25所示。

图1-25

但是您只需要在Page_Load事件中加入下面这行代码，一样可以将Button1设置成UpdatePanel的触发器（Trigger）：

EX： PrimerAJAX/UpdatePanel/demo03.aspx.vb

Protected Sub Page_Load（ByVal sender As Object, ByVal e As System.EventArgs） Handles Me.Load

Me.ScriptManager1.RegisterAsyncPostBackControl（Me.Button1）

End Sub

您会发现点击Button之后，TextBox的内容依旧会改变，但已经变成异步Postback了，如图1-26所示。

图1-26

1.3.5 UpdateMode属性与异步刷新模式

UpdatePanel的刷新状况依照updateMode属性的设置而有所不同，当您将UpdatePanel的UpdateMode属性设为Always时，页面上的任何传统Postback动作或是任何一个控件所产生的异步postback动作（不管是通过代码设置的，或是页面上哪一个UpdatePanel控件中的任何一个控件所触发的）都会导致页面上的每一个（如果有多个的话）UpdatePanel尝试刷新其内容。

也就是说，当UpdateMode属性设为Always时，不管页面上有几个UpdatePanel，只要有任何一个UpdatePanel中的控件触发了异步Postback，页面上每一个UpdatePanel中的内容都会尝试刷新。

但若您将UpdatePanel的UpdateMode属性设为Conditional时，则该UpdatePanel的刷新状况会依照下面条件而定：

1. 若是该UpdatePanel内的控件（包含通过Trigger方式设置的）所触发的异步Postback，才刷新。

2. 若是明确地调用了该UpdatePanel控件的Update（）方法时，才刷新。

3. 当UpdatePanel以嵌套方式建立时（表示一个UpdatePanel中还有另一个UpdatePanel），父级的UpdatePanel发生刷新时，才刷新。

我们看下面这个范例，请注意下面控件的布置方式，如图1-27所示。