ASP.NET 2.0 AJAX UpdatePanel

Posted on 2007-04-27 14:51 Fulcrum-A 阅读(2367) 评论(0) 编辑收藏举报

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

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

<ContentTemplate>//

</ContentTemplate>

<!—写入控件事件的触发器，控件可在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的例子：

<?xml version="1.0"?>

</sectionGroup>

</configSections>

</connectionStrings>

<system.web>

<pages>

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

</httpHandlers>

</httpModules>

</system.web>

<system.webServer>

</modules>

</handlers>

</system.webServer>

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

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

<DIV>Updating Data

</DIV>

</ProgressTemplate>

</asp:UpdateProgress>

</div>

Users` List:

</div>

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

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

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

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

</Triggers>

</asp:UpdatePanel>

User`s Detail:

</div>

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

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

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

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

Type="String" />

</SelectParameters>

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

</DeleteParameters>

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

<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);

}

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

会员力量，点亮园子希望

刷新页面返回顶部

墨与彩的博客

公告

ASP.NET 2.0 AJAX UpdatePanel