ASP.NET 2.0 AJAX UpdatePanel

Posted on 2007-04-27 14:51 Fulcrum-A

UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。UpdatePanel定义如下：

< asp:UpdatePanel ID ="UpdatePanel1" runat ="server" >

< ContentTemplate > //

</ ContentTemplate >

< Triggers >

<! —写入控件事件的触发器，控件可在updatepanel中也可以不在-- >

< asp:AsyncPostBackTrigger ControlID =”Button1” Event =”Click” />

<! —AsyncPostBackTrigger表明button1的click事件采用异步回送,并且不触发传统的页面回送(无论button1是否在UpdatePanel1中)，除非控件声明了入dropdownlist的postback属性为true-- >

< asp:PostBackTrigger ContolID =”Button2” Event =”Click” />

<! —PostBackTrigger声明了在UpdatePanel中Button2控件的Click触发采用了传统的POSTBACK方法 -- >

</ Triggers >

</ asp:UpdatePanel >

控件可以直接从工具箱AJAX EXTENSIONS中拖取使用，下面罗列了较为重要的几个属性：

1、ChildrenAsTriggers：当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。
2、UpdateMode：表示UpdatePanel的更新模式，有两个选项：Always和Conditional。Always是不管有没有Trigger，其他控件都将更新该UpdatePanel，Conditional表示只有当前UpdatePanel的Trigger，或ChildrenAsTriggers属性为true时当前UpdatePanel中控件引发的异步回送或者整页回送，或是服务器端调用Update()方法才会引发更新该UpdatePanel。

        UpdatePanel还可以嵌套使用，即在一个UpdatePanel的ContentTemplate中还可以放入另一个UpdatePanel。当最外面的UpdatePanel被触发更新时，它里面的子UpdatePanel也随着更新，里面的UpdatePanel触发更新时，只更新它自己，而不会更新外层的UpdatePanel。

       一个使用UpdatePanel的例子：

当选在dropdown中选择不同的值或在detailview中进行插入操作时，girdview都可以不通过
刷新页面来反应数据库中的变化。

<? xml version="1.0" ?>

< configuration >

< configSections >

< sectionGroup name ="system.web.extensions" type ="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" >

< sectionGroup name ="scripting" type ="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" >

< section name ="scriptResourceHandler" type ="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission ="false" allowDefinition ="MachineToApplication" />

< sectionGroup name ="webServices" type ="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" >

< section name ="jsonSerialization" type ="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission ="false" allowDefinition ="Everywhere" />

< section name ="profileService" type ="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission ="false" allowDefinition ="MachineToApplication" />

< section name ="authenticationService" type ="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission ="false" allowDefinition ="MachineToApplication" />

</ sectionGroup >

</ configSections >

< connectionStrings >

< add name ="con" connectionString ="" />

< add name ="userDBConnectionString" connectionString ="Data Source=./SQLEXPRESS;AttachDbFilename=|DataDirectory|/userDB.mdf;Integrated Security=True;User Instance=True" providerName ="System.Data.SqlClient" />

</ connectionStrings >

< system .web >

< pages >

< controls >

< add tagPrefix ="asp" namespace ="System.Web.UI" assembly ="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</ controls >

</ pages >

<!--

Set compilation debug="true" to insert debugging

symbols into the compiled page. Because this

affects performance, set this value to true only

during development.

-->

< compilation debug ="true" >

< assemblies >

< add assembly ="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

< add assembly ="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

< add assembly ="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" /></ assemblies >

</ compilation >

< httpHandlers >

< remove verb ="*" path ="*.asmx" />

< add verb ="*" path ="*.asmx" validate ="false" type ="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

< add verb ="*" path ="*_AppService.axd" validate ="false" type ="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

< add verb ="GET,HEAD" path ="ScriptResource.axd" type ="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate ="false" />

</ httpHandlers >

< httpModules >

< add name ="ScriptModule" type ="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</ httpModules >

</ system.web >

< system .webServer >

< validation validateIntegratedModeConfiguration ="false" />

< modules >

< add name ="ScriptModule" preCondition ="integratedMode" type ="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</ modules >

< handlers >

< remove name ="WebServiceHandlerFactory-Integrated" />

< add name ="ScriptHandlerFactory" verb ="*" path ="*.asmx" preCondition ="integratedMode" type ="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

< add name ="ScriptHandlerFactoryAppServices" verb ="*" path ="*_AppService.axd" preCondition ="integratedMode" type ="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

< add name ="ScriptResource" preCondition ="integratedMode" verb ="GET,HEAD" path ="ScriptResource.axd" type ="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</ handlers >

</ system.webServer >

< appSettings >

</ appSettings ></ configuration >

<% @ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>

< asp:Content ID ="Content1" ContentPlaceHolderID ="ContentPlaceHolder1" Runat ="Server" >

< asp:ScriptManager ID ="ScriptManager1" runat ="server" >

</ asp:ScriptManager >

< div class ="todoheader" >

Refurbish The Users` List:

</ div >

< div >

sex

< asp:DropDownList ID ="DropDownList1" runat ="server" AutoPostBack ="true" >

< asp:ListItem Selected ="True" > female </ asp:ListItem >

< asp:ListItem > male </ asp:ListItem >

</ asp:DropDownList >

< asp:UpdateProgress ID ="UpdateProgress1" runat ="server" >

< ProgressTemplate >

< DIV > Updating Data

</ DIV >

</ ProgressTemplate >

</ asp:UpdateProgress >

</ div >

< div class ="todoheader" >

Users` List:

</ div >

< asp:UpdatePanel ID ="UpdatePanel1" runat ="server" UpdateMode ="Conditional" >

< ContentTemplate >

< asp:GridView id ="GridView1" runat ="server" CssClass ="gridview" DataKeyNames ="userId" AllowPaging ="True" AutoGenerateColumns ="False" __designer:wfdid ="w1" DataSourceID ="SqlDataSource1" >

< Columns >

< asp:CommandField ShowDeleteButton ="True" ShowEditButton ="True" />

< asp:BoundField DataField ="userId" HeaderText ="userId" InsertVisible ="False" ReadOnly ="True"

SortExpression ="userId" />

< asp:BoundField DataField ="userName" HeaderText ="userName" SortExpression ="userName" />

< asp:BoundField DataField ="sex" HeaderText ="sex" SortExpression ="sex" />

< asp:BoundField DataField ="age" HeaderText ="age" SortExpression ="age" />

</ Columns >

</ asp:GridView >  

</ ContentTemplate >

< Triggers >

< asp:AsyncPostBackTrigger ControlID ="DropDownList1" EventName ="SelectedIndexChanged" ></ asp:AsyncPostBackTrigger >

</ Triggers >

</ asp:UpdatePanel >

< div class ="todoheader" >

User`s Detail:

</ div >

< asp:UpdatePanel ID ="UpdatePanel2" runat ="server" >

< ContentTemplate >

< asp:DetailsView ID ="DetailsView1" runat ="server" Width ="125px" AutoGenerateRows ="False" DataKeyNames ="userId" DataSourceID ="SqlDataSource1" CssClass ="detailsview" >

< Fields >

< asp:BoundField DataField ="userId" HeaderText ="userId" InsertVisible ="False" ReadOnly ="True"

SortExpression ="userId" />

< asp:BoundField DataField ="userName" HeaderText ="userName" SortExpression ="userName" />

< asp:BoundField DataField ="sex" HeaderText ="sex" SortExpression ="sex" />

< asp:BoundField DataField ="age" HeaderText ="age" SortExpression ="age" />

< asp:CommandField ShowInsertButton ="True" />

</ Fields >

</ asp:DetailsView >

</ ContentTemplate >

</ asp:UpdatePanel >

< asp:SqlDataSource ID ="SqlDataSource1" runat ="server" ConnectionString ="<%$ ConnectionStrings:userDBConnectionString %>"

SelectCommand ="SELECT * FROM [userTable] WHERE ([sex] = @sex)" DeleteCommand ="DELETE FROM [userTable] WHERE [userId] = @userId" InsertCommand ="INSERT INTO [userTable] ([userName], [sex], [age]) VALUES (@userName, @sex, @age)" UpdateCommand ="UPDATE [userTable] SET [userName] = @userName, [sex] = @sex, [age] = @age WHERE [userId] = @userId" OnSelecting ="SqlDataSource1_Selecting" OnUpdating ="SqlDataSource1_Updating" >

< SelectParameters >

< asp:ControlParameter ControlID ="DropDownList1" Name ="sex" PropertyName ="SelectedValue"

Type ="String" />

</ SelectParameters >

< DeleteParameters >

< asp:Parameter Name ="userId" Type ="Int32" />

</ DeleteParameters >

< UpdateParameters >

< asp:Parameter Name ="userName" Type ="String" />

< asp:Parameter Name ="sex" Type ="String" />

< asp:Parameter Name ="age" Type ="String" />

< asp:Parameter Name ="userId" Type ="Int32" />

</ UpdateParameters >

< InsertParameters >

< asp:Parameter Name ="userName" Type ="String" />

< asp:Parameter Name ="sex" Type ="String" />

< asp:Parameter Name ="age" Type ="String" />

</ InsertParameters >

</ asp:SqlDataSource >

</ asp:Content >

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void SqlDataSource1_Updating(object sender, SqlDataSourceCommandEventArgs e)

{

System.Threading.Thread.Sleep(1000);

}

protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e)

{

System.Threading.Thread.Sleep(1000);

}

ASP.NET 2.0 AJAX UpdatePanel

ASP.NET 2.0 AJAX UpdatePanel

你可能感兴趣的:(ASP.NET 2.0 AJAX UpdatePanel)