ASP.NET 2.0 AJAX UpdatePanel

ASP.NET 2.0 AJAX UpdatePanel

Posted on 2007-04-27 14:51 Fulcrum-A 阅读(545) 评论(0)   编辑 收藏 所属分类: ASP.net 2.0 Ajax

 

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

  < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
      < ContentTemplate > // 
         <!-- 用来定义UPDATEPANEL总的内容，可以是任何HTML或ASP.NET元素，如果想用C#编程的方式加入控件，折需要在后台代码文件中写入 UpdatePanel1.ContentTemplateContainer.Controls.Add(button1); -->
       </ 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 >
             </ sectionGroup >
         </ 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 > &nbsp;  
</ 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);
    }
}