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

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">

        <contenttemplate>

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

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

        </contenttemplate>

        <triggers>

           <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所示。

图1-27

请注意上面这两个UpdatePanel控件的UpdateMode属性都是Always,这时候请键入下面的代码:

EX: PrimerAJAX/UpdatePanel/Demo4.aspx.vb

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

       Me.TextBox1.Text = Now

        Me.TextBox2.Text = Now

    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)

        Me.TextBox1.Text = Now

        Me.TextBox2.Text = Now

    End Sub

您会发现不论点击哪一个Button,都会分别将两个落在不同UpdatePanel中的TextBox内的值设置为Server端的时间。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值