ASP.NET AJAX入门教程总汇

无处不在 · 发表于 2010-5-13 10:40

本帖最后由无处不在于 2010-5-13 10:41 编辑

ASP.NET AJAX入门系列（1）：概述

一．ASP.NET AJAX组成部分

在ASP.NET AJAX官方网站上有如下三个下载：
1．ASP.NET AJAX：这部分是ASP.NET AJAX的核心部分，包括了核心AJAX类型系统，网络协议层(networking stack)，组件模型，扩展器(extender)基类，以及与ASP.NET集成的服务器端功能(包括广受欢迎的ScriptManager，UpdatePanel，和 Timer控件)。功能列表如下：

服务端功能列表

Asynchronous client-to-server networking

Authentication as a Web service

ControlExtender class

Profile as a Web service

ScriptManager and ScriptManagerProxy controls

Static page methods as Web services

Timer control

UpdatePanel control

UpdateProgress control

客户端功能列表

Authentication for JavaScript

Behavior class

Calling .asmx Web services from JavaScript

Component class

Control class

Debug class

JavaScript Array type extensions

JavaScript Boolean type extensions

JavaScript Error type extensions

JavaScript Number type extensions

JavaScript Object type extensions

JavaScript String type extensions

JSON serialization

Profile for JavaScript

Trace class

2．ASP.NET AJAX “Value-Add”CTP：ASP.NET AJAX社区支持的“增值”CTP部分，包括了以前各个Atlas CTP版本包含的，但并不在完全支持的“核心”1.0 版本内的额外的高级特性。通过进一步的反馈，这些将会逐步稳定的增加到核心1.0中去。功能列表如下：

服务端功能列表

AutoCompleteExtender class

Cross-browser Web Parts drag-and-drop

DragOverlayExtender control

PopupExtender class

客户端功能列表

Actions components

AutoCompleteBehavior class

BatchResponse class

Binding component

Button control

Checkbox control

Click behavior

Counter class

Cross-browser Web Parts

Data control

DragDropList control

DragDropManager component

DraggableListItem control

FadeAnimation component
Floating behavior

Hover behavior

Hyperlink control

Image control

Input control

Label control

Layout behavior

Opacity behavior

Popup behavior

Selector control

ServiceMethodRequest class

Sys.Data and Sys.UI.Data namespaces

Textbox control

Timer control

Validator controls

xml-script support

3．ASP.NET AJAX Control Toolkit：包含了基于ASP.NET AJAX 1.0 版“核心”下载版本的28个非常酷的免费AJAX控件。它是一个开源项目，由微软和非微软开发人员共同开发的，去CodePlex下载代码。

二．安装ASP.NET AJAX
1．在安装ASP.NET AJAX 1.0 Beta之前，需要先卸载以前所有的CTP版本。
2．下载ASP.NET AJAX 1.0 Beta安装包，安装时Microsoft.Web.Extensions.dll程序集将被安装在GAC（Global Assembly Cache）中，所以使用时不需要再在Web站点的Bin文件夹中包括该程序集。
3．下载安装ASP.NET AJAX “Value-Add”CTP和ASP.NET AJAX Control Toolkit。列表如下：

名称
描述

Accordion:
Create efficient UI from multiple panes with this animated control.

AlwaysVisibleControl
Docks a panel to a corner of the browser window and keeps it visible even when the user scrolls.

Animation
Adds powerful, easy to use animations to any element or control.

CascadingDropDown
Easily link drop downs, complete with asynchronous population and no postbacks!

CollapsiblePanel
This extender allows panels on your page to collapse and expand with no code.

ConfirmButton
This extender adds a confirm dialog to any Button, LinkButton, or ImageButton control.

DragPanel
Makes any panel into an object that you can drag around the page.

DropDown
This extender can wrap any control to provide a SharePoint-style drop-down menu that is attached to the control.

DropShadow
This extender adds attractive drop shadows to any control on the page

DynamicPopulate
Replace the contents of a page element with the result of a web-service call.

FilteredTextBox
Restrict the types of input that text boxes will accept.

HoverMenu
Allows UI to pop up next to a control when the mouse hovers over it.

ModalPopup
Allows you to show styled modal UI without using HTML dialogs.

MutuallyExlcusiveCheckBox
By adding a number of checkboxes to the same “Key”, only one checkbox with the specified key can be checked at a time.

NoBot
Applies simple rules to prevent automated bots or scripts from posting to a page.

NumericUpDown
Allow users to easily increase and decrease values using the mouse to scroll through values.

PagingBulletedList
Add paging and sorting to long bulleted lists.

PasswordStrength
Give your users visual cues to help them create secure passwords.

PopupControl
This extender turns any panel into a popup.

Rating
Let your users easily give feedback by rating content with this easy-to-use control.

ReorderList
This control is a full-featured data-bound control that allows its elements to be reordered on the client via drag and drop.

ResizableControl
Allow users to dynamically resize content, right in the browser

RoundedCorners
Rounds the corners of any control for a clean, professional look!

Slider
Adds an elegant scrollbar-like user interface for setting numeric values.

TextBoxWatermark
This extender adds "watermark" prompt text to TextBoxes on the page.

ToggleButton
This extender turns an ASP.NET CheckBox into an image checkbox.

UpdatePanelAnimation
Animates page elements corresponding to hidden postback activity.

ValidatorCallout
This extender enhances the functionality of existing ASP.NET validators.

三．在Visual Studio.NET 2005开发基于ASP.NET AJAX的应用
安装完ASP.NET AJAX后，打开Visual Studio.NET 2005中新建Web Site，在项目模板中会出现一项ASP.NET AJAX-enabled Web site，直接选择它就可以了，如下图：

新建完成的项目中会自动在Web.config中做好相关的配置，并且AJAXExtensionToolbox.dll已经添加到了VS的工具箱中，不需要再手工添加。

概述篇简单的介绍这里，从下一篇开始学习ASP.NET AJAX中的每一项具体的功能。

无处不在 · 发表于 2010-5-13 10:48

ASP.NET AJAX入门系列（2）：使用ScriptManager控件
ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中，它用来处理页面上的所有组件以及页面局部更新，生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service，所有需要支持ASP.NET AJAX的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库，或者指定通过JS来调用的Web Service，以及调用AuthenticationService和ProfileService，还有页面错误处理等。

主要内容
1．控件概述
2．一个简单的示例
3．客户端脚本模式
4．错误处理
5．Services属性
6．Scripts属性

一．控件概述
ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中，它用来处理页面上的所有组件以及页面局部更新，生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service，所有需要支持ASP.NET AJAX的ASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库，或者指定通过JS来调用的Web Service，还可以指定页面错误处理等。
使用<asp:ScriptManager/>来定义一个ScriptManager，简单的ScriptManager定义形式：

<asp:ScriptManager ID="ScriptManager1"
runat="server">
<AuthenticationService Path="" />
<ProfileService LoadProperties="" Path="" />
<Scripts>
<asp:ScriptReference/>
</Scripts>
<Services>
<asp:ServiceReference />
</Services>
</asp:ScriptManager>

复制代码

ScriptManager属性和方法如下：

属性/方法
描述

AllowCustomError
和Web.config中的自定义错误配置区<customErrors>相联系，是否使用它，默认值为true

AsyncPostBackErrorMessage
异步回传发生错误时的自定义提示错误信息，

AsyncPostBackTimeout
异步回传时超时限制，默认值为90，单位为秒

EnablePartialRendering
是否支持页面的局部更新，默认值为True，一般不需要修改

ScriptMode
指定ScriptManager发送到客户端的脚本的模式，有四种模式：Auto，Inherit，Debug，Release，默认值为Auto，后面会仔细说到。

ScriptPath
设置所有的脚本块的根目录，作为全局属性，包括自定义的脚本块或者引用第三方的脚本块。如果在Scripts中的<asp:ScriptReference/>标签中设置了Path属性，它将覆盖该属性。

OnAsyncPostBackError
异步回传发生异常时的服务端处理函数，在这里可以捕获一场信息并作相应的处理。

OnResolveScriptReference
指定ResolveScriptReference事件的服务器端处理函数，在该函数中可以修改某一条脚本的相关信息如路径、版本等。

二．一个简单的示例
这个例子其实是UpdatePanel示例，在页面中加入了日期控件和一个下拉框，根据下拉框选择的不同，日期控件背景变为不同的颜色。示例代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<script runat="server">
void DropDownSelection_Change(Object sender, EventArgs e)
{
Calendar1.DayStyle.BackColor =
System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>ScriptManager Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1"
ShowTitle="True"
runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
</html>

复制代码

三．客户端脚本模式
在前面我们提到了ScriptMode属性指定ScriptManager发送到客户端的脚本的模式，它有四种模式：Auto，Inherit，Debug，Release，默认值为Auto。
1．Auto：它会根据Web站点的Web.config配置文件来决定使用哪一种模式，只有当配置文件中retail属性设置为false:．Inherit：应该是通过程序设置ScriptMode的时候，等同于Auto？（不太了解）

<system.web>

<deployment retail="false" />

</system.web>或者页面中的Debug指令设为true的时候会使用Debug版本，其他的情况都会使用Release版本。

<%@ Page Language="C#" Debug="true"

AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

2

3．Debug：客户端脚本使用Debug版本，除非retail属性设为true。
4．Release：客户端脚本使用Release版本，除非retail属性设为false。

四．错误处理
在页面回传时如果发生了异常AsyncPostBackError事件将被触发，错误信息的处理依赖于AllowCustomErrors属性、AsyncPostBackErrorMessage属性和Web.config中的<customErrors>配置区。下面看一个简单的错误处理例子，在AsyncPostBackError事件中捕获到异常信息并设置AsyncPostBackErrorMessage属性。

<%@ Page Language="C#" %>
<script runat="server">
protected void ErrorProcessClick_Handler(object sender, EventArgs e)
{
// This handler demonstrates an error condition. In this example
// the server error gets intercepted on the client and an alert is shown.
throw new ArgumentException();
}
protected void SuccessProcessClick_Handler(object sender, EventArgs e)
{
// This handler demonstrates no server side exception.
UpdatePanelMessage.Text = "The asynchronous postback completed successfully.";
}
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
ScriptManager1.AsyncPostBackErrorMessage = "异常信息为：" + e.Exception.Message;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>PageRequestManager endRequestEventArgs Example</title>
<style type="text/css">
body {}{
font-family: Tahoma;
}
#AlertDiv{}{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{}{
position: absolute;
right: 5%;
bottom: 5%;
}
</style>
</head>
<body id="bodytag">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';
var errorMessageAdditional = 'Please try again.';
var bodyTag = 'bodytag';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
if (visString == 'hidden')
{
$get(bodyTag).style.backgroundColor = 'white';
}
else
{
$get(bodyTag).style.backgroundColor = 'gray';
}
var adiv = $get(divElem);
adiv.style.visibility = visString;
}
function ClearErrorState() {
$get(messageElem).innerHTML = '';
ToggleAlertDiv('hidden');
}
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined && args.get_error().httpStatusCode == '500')
{
var errorMessage = args.get_error().message
args.set_errorHandled(true);
ToggleAlertDiv('visible');
$get(messageElem).innerHTML = '"' +
errorMessage + '" ' + errorMessageAdditional;
}
}
</script>
<asp:UpdatePanel runat="Server" UpdateMode="Conditional" ID="UpdatePanel1">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
<asp:Label ID="UpdatePanelMessage" runat="server" />
<br />
Last update:
<%= DateTime.Now.ToString() %>
.
<br />
<asp:Button runat="server" ID="Button1" Text="Submit Successful Async Postback"
OnClick="SuccessProcessClick_Handler" OnClientClick="ClearErrorState()" />
<asp:Button runat="server" ID="Button2" Text="Submit Async Postback With Error"
OnClick="ErrorProcessClick_Handler" OnClientClick="ClearErrorState()" />
<br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons" >
<input id="OKButton" type="button" value="OK"
runat="server" onclick="ClearErrorState()" />
</div>
</div>
</form>
</body>
</html>

复制代码

运行后时界面：

发生异常信息：

五．Services属性
Services用来管理对WebService的调用，通过<asp:ServiceReference>标签可以在Services中注册一个WebService，在运行时ScriptManager将为每一个ServiceReference对象生成一个客户端代理，<asp:ServiceReference>标签一个很重要的属性是Path，用来指定WebService的路径，如下所示：

<asp:ScriptManager ID="SM1" runat="server">
<Services>
<asp:ServiceReference Path="Service.asmx"/>
</Services>

复制代码

</asp:ScriptManager>看一个简单的调用WebService的例子：
WebService如下，注意在WebServiceSample上加ScriptService特性：页面：

[ScriptService]
public class WebServiceSample : System.Web.Services.WebService {
public WebServiceSample()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string EchoString(String s)
{
return "Hello " + s;
}
}ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<script type="text/javascript" language="JavaScript">
function OnbuttonGo_click()
{
requestSimpleService = WebServiceSample.EchoString(
document.getElementById('inputName').value, //params
OnRequestComplete //Complete event
);
return false;
}
function OnRequestComplete(result)
{
alert(result);
}
</script>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebServiceSample.asmx"/>
</Services>
</asp:ScriptManager>
<div>
<input type="text" id="inputName" size=20/>
<input id="button" type="button" value="调用" onclick="return OnbuttonGo_click()" /></div>
</form>
</body>
</html>

复制代码

运行后效果如下：

当然了也可以在运行时动态的在Services中加入ServiceReference，下面看一个运行时动态加入ServiceReference的例子：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
ServiceReference sr = new ServiceReference();
sr.Path = "WebServiceSample.asmx";
ScriptManager1.Services.Add(sr);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<script type="text/javascript" language="JavaScript">
function OnbuttonGo_click()
{
requestSimpleService = WebServiceSample.EchoString(
document.getElementById('inputName').value, //params
OnRequestComplete //Complete event
);
return false;
}
function OnRequestComplete(result)
{
alert(result);
}
</script>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<input type="text" id="inputName" size=20/>
<input id="button" type="button" value="调用" onclick="return OnbuttonGo_click()" /></div>
</form>
</body>
</html>

复制代码

可以看到运行后和在ScriptManager中直接加入的效果是一样的。

六．Scripts属性
关于Scripts属性到后面具体再说吧，最主要的属性有Path指定脚本的路径，ScriptMode指定客户端脚本的模式，它会覆盖ScriptManager中的ScriptMode属性，还有一个属性是IgnoreScriptPath，指定是否忽略掉ScriptManager中的ScriptPath属性。
关于ScriptManager控件就学习到这里了，至于AuthenticationService属性和ProfileService属性都很简单。

示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXScriptManagerDemo.rar

无处不在 · 发表于 2010-5-13 10:53

ASP.NET AJAX入门系列（3）：使用ScriptManagerProxy控件

在ASP.NET AJAX中，由于一个ASPX页面上只能有一个ScriptManager控件，所以在有母版页的情况下，如果需要在Master-Page和Content-Page中需要引入不同的脚本时，这就需要在Content-page中使用ScriptManagerProxy，而不是ScriptManager，ScriptManager 和 ScriptManagerProxy 是两个非常相似的控件。
主要内容
1．ScriptManagerProxy控件概述
2．简单示例

一．ScriptManagerProxy控件概述
在ASP.NET AJAX中，由于一个ASPX页面上只能有一个ScriptManager控件，所以在有Master-Page的情况下，如果需要在Master-Page和Content-Page中需要引入不同的脚本时，就需要在Content-page中使用ScriptManagerProxy，而不是ScriptManager，ScriptManagerProxy和 ScriptManager是两个非常相似的控件。简单定义形式如下：

<asp:ScriptManagerProxy id="ScriptManagerProxy1" runat="server">
<Services>
<asp:ServiceReference Path="CalculWebService.asmx" />
</Services>
</asp:ScriptManagerProxy>

复制代码

在它下面可以添加的子标签有：Services，Scripts，AuthenticationService，ProfileService

二．简单示例
下面看一个简单的使用ScriptManagerProxy的例子。
1．首先我们准备两个WebService，在Master-Page中我们输入一个字符串，而在Content-Page中我们求两个数的和。
SimpleWebService.asmx．添加一个Master-Page，在它上面添加一个ScriptManager控件，并引入WebService SimpleWebService.asmx，并添加相应的HTML元素：．添加一个Content-Page，在它上面添加一个ScriptManagerProxy控件，并引入WebService CalculWebService.asmx，并添加相应的HTML元素：

[ScriptService]
public class SimpleWebService : System.Web.Services.WebService {
public SimpleWebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string EchoString(String s)
{
return "Hello " + s;
}
}CalculWebService.asmx
[ScriptService]
public class CalculWebService : System.Web.Services.WebService {
public CalculWebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public int Add(int a,int b) {
return a + b;
}
}

复制代码

2

<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="SimpleWebService.asmx" />
</Services>
</asp:ScriptManager>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
 <h3>请输入名称：</h3>
<input id="inputName" type="text" />
<input id="button" type="button" value="确定" onclick="return OnbuttonGo_click()" />
</div>

复制代码

编写相应的JS代码：

<script type="text/javascript" language="JavaScript">
function OnbuttonGo_click()
{
requestSimpleService = SimpleWebService.EchoString(
document.getElementById('inputName').value, //params
OnRequestComplete //Complete event
);
return false;
}
function OnRequestComplete(result)
{
alert(result);
}
</script>

复制代码

3

<div>
<asp:ScriptManagerProxy id="ScriptManagerProxy1" runat="server">
<Services>
<asp:ServiceReference Path="CalculWebService.asmx" />
</Services>
</asp:ScriptManagerProxy>
<h3>请输入两个数：</h3> <input id="inputA" type="text" style="width: 110px" /> + 
<input id="inputB" style="width: 110px" type="text" /> 
<input id="buttonEqual" type="button" value=" = " onclick="return OnbuttonEqual_click()"/>
</div>

复制代码

编写相应的JS代码：

<script type="text/javascript" language="JavaScript">
function OnbuttonEqual_click()
{
requestSimpleService = CalculWebService.Add(
document.getElementById('inputA').value, //params
document.getElementById('inputB').value, //params
OnRequestComplete //Complete event
);
return false;
}
function OnRequestComplete(result)
{
alert(result);
}
</script>

复制代码

4．运行后界面如下：

测试Master-Page中的Web Service：

测试Content-Page中的Web Service：

关于ScriptManagerProxy就介绍到这儿，有个问题就是在我的IDE中为什么ScriptManagerProxy总是提示为未知元素，但运行起来并不抱错，结果也可以出来？
示例代码下载：/Files/Terrylee/ASPNETAJAXScriptManagerProxyDemo.rar

joe · 发表于 2010-5-13 10:57

ASP.NET AJAX入门系列（4）：使用UpdatePanel控件（一）
UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法（第一篇）。

主要内容
1．UpdatePanel控件概述
2．UpdatePanel工作原理
3．ContentTemplate属性
4．ContentTemplateContainer属性
5．Triggers属性

一．UpdatePanel控件概述
UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel工作原理和使用方法。简单的UpdatePanel定义如下：重要的属性如下：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger />
<asp:PostBackTrigger />
</Triggers>
</asp:UpdatePanel>UpdatePanel

复制代码

属性
说明

ChildrenAsTriggers
当UpdateMode属性为Conditional时，UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新。

RenderMode
表示UpdatePanel最终呈现的HTML元素。Block（默认）表示<div>，Inline表示<span>

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

二．UpdatePanel工作原理
UpdatePanel的工作依赖于ScriptManager服务端控件（ASP.NET AJAX入门系列（2）：使用ScriptManager控件）和客户端PageRequestManager类（Sys.WebForms.PageRequestManager，在后面的客户端类中会专门说到），当ScriptManager中允许页面局部更新时，它会以异步的方式回传给服务器，与传统的整页回传方式不同的是只有包含在UpdatePanel中的页面部分会被更新，在从服务端返回HTML之后，PageRequestManager会通过操作DOM对象来替换需要更新的代码片段。
看一下官方网站提供的UpdatePanel工作原理图：

三．ContentTemplate属性
Contente Template标签用来定义UpdatePanel的内容，在它里面可以放任何ASP.NET元素。如果你想要使用编程的手法来控制UpdatePanel中的内容，就需要使用ContenteTemplateContainer，下面会说到，先来看一个简单的ContentTemplate的例子。四．ContentTemplateContainer属性

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" ShowTitle="True" runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList" AutoPostBack="True" OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>

复制代码

事件代码：

<script runat="server">
void DropDownSelection_Change(Object sender, EventArgs e)
{
Calendar1.DayStyle.BackColor =
System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
</script>

复制代码

如果要使用编程的手法去设置UpdatePanel中的内容，需要创建一个UpdatePanel，并且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接设置ContentTemplate，则需要编写一个自定义的Template，并去实现位于System.Web.UI命名空间下的接口ITemplate。看一个简单的来自于官方网站的例子：

<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
up1.ID = "UpdatePanel1";
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
up1.ContentTemplateContainer.Controls.Add(button1);
up1.ContentTemplateContainer.Controls.Add(label1);
Page.Form.Controls.Add(up1);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="TheScriptManager"
runat="server" />
</div>
</form>
</body>
</html>

复制代码

五．Triggers属性
在ASP.NET AJAX中有两种Triggers：分别为AsyncPostBackTrigger和PostBackTrigger，AsyncPostBackTrigge用来指定某个服务器端控件以及其将触发的服务器端事件作为该UpdatePanel的异步更新触发器，它需要设置的属性有控件ID和服务端控件的事件；PostBackTrigger用来指定在UpdatePanel中的某个服务端控件，它所引发的回送不使用异步回送，而仍然是传统的整页回送。这一点跟Atlas有很大的区别，大家需要注意。看一个小例子，虽然两个Button都放在了UpdatePanel中，但是由于在PostBackTrigger中指定了Button2，所以它使用的仍然是整页回送。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<script runat="server">
void Button1_Click(object sender, EventArgs e)
{
this.Label1.Text = "更新时间：" + System.DateTime.Now.ToString();
}
void Button2_Click(object sender, EventArgs e)
{
this.Label1.Text = "更新时间：" + System.DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>UpdatePanel Trigger Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Button ID="Button1" runat="server" Text="异步回送" OnClick="Button1_Click"/>  
<asp:Button ID="Button2" runat="server" Text="整页回送" OnClick="Button2_Click"/><br />
<br />
<asp:Label ID="Label1" runat="server" Text="当前时间" Font-Bold="True" Font-Size="Large"></asp:Label></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"/>
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>

复制代码

（未完待续）
示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo1

joe · 发表于 2010-5-13 11:05

ASP.NET AJAX入门系列（5）：使用UpdatePanel控件（二）

UpdatePanel可以用来创建丰富的局部更新Web应用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件，其强大之处在于不用编写任何客户端脚本，只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel其他的一些使用方法（第二篇）。

主要内容
1．用编程的方法控制UpdatePanel的更新
2．UpdatePanel的嵌套使用
3．同一页面上使用多个UpdatePanel

一．用编程的方法控制UpdatePanel的更新
对于UpdatePanel，我们也可以使用编程的方法来控制它的更新，可以通过ScriptManager的RegisterAsyncPostBackControl()方法注册一个异步提交的控件，并且调用UpdatePanel的Update()方法来让它更新。再次用我在前面的文章中用到的一个无聊的时间更新例子来看一下，有时候我觉得例子过于复杂更加不好说明白所要讲的内容，如下代码所示，注意Button1并不包含在UpdatePanel中：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<script runat="server">
void Button1_Click(object sender, EventArgs e)
{
this.Label2.Text = DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Refreshing an UpdatePanel Programmatically</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="更新时间："></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick = "Button1_Click"/>
</div>
</form>
</body>
</html>

复制代码

这时候不用多说，肯定是整页提交了，运行如下图所示：

再次修改上面的例子，使用ScriptManager的RegisterAsyncPostBackControl()注册Button1为一个异步提交控件，并且调用UpdatePanel的Update()方法：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
}
void Button1_Click(object sender, EventArgs e)
{
this.Label2.Text = DateTime.Now.ToString();
this.UpdatePanel1.Update();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Refreshing an UpdatePanel Programmatically</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="更新时间："></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label" ForeColor="Red"></asp:Label><br/><br/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick = "Button1_Click"/>
</div>
</form>
</body>
</html>

复制代码

这时候可以看到，已经是异步提交了：

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{}{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager"
runat="server" />
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
runat="server" />
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
runat="server" />
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

复制代码

运行后如下：

三．同一页面上使用多个UpdatePanel
使用UpdatePanel的时候并没有限制在一个页面上用多少个UpdatePanel，所以我们可以为不同的需要局部更新的页面区域加上不同的UpdatePanel。由于UpdatePanel默认的UpdateMode是Always，如果页面上有一个局部更新被触发，则所有的UpdatePanel都将更新，这是我们不愿看到的，我们只需要UpdatePanel在它自己的触发器触发的时候更新就可以了，所以需要把UpdateMode设置为Conditional。
来看一下官方网站上提供的一个例子：包括两个UpdatePanel，其中一个用来用户输入而另一个则用来显示数据，每一个UpdatePanel的UpdateMode属性都设置为Conditional。当我们单击Cancel按钮时，只有用来用户输入的那个UpdatePanel刷新，当单击Insert按钮时，两个UpdatePanel都刷新。代码如下：

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Enter New Employees</title>
<script runat="server">
private List<Employee> EmployeeList;
protected void Page_Load()
{
if (!IsPostBack)
{
EmployeeList = new List<Employee>();
EmployeeList.Add(new Employee(1, "Jump", "Dan"));
EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));
ViewState["EmployeeList"] = EmployeeList;
}
else
EmployeeList = (List<Employee>)ViewState["EmployeeList"];
EmployeesGridView.DataSource = EmployeeList;
EmployeesGridView.DataBind();
}
protected void InsertButton_Click(object sender, EventArgs e)
{
if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }
int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;
string lastName = Server.HtmlEncode(FirstNameTextBox.Text);
string firstName = Server.HtmlEncode(LastNameTextBox.Text);
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
EmployeeList.Add(new Employee(employeeID, lastName, firstName));
ViewState["EmployeeList"] = EmployeeList;
EmployeesGridView.DataBind();
EmployeesGridView.PageIndex = EmployeesGridView.PageCount;
}
protected void CancelButton_Click(object sender, EventArgs e)
{
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
}
[Serializable]
public class Employee
{
private int _employeeID;
private string _lastName;
private string _firstName;
public int EmployeeID
{
get { return _employeeID; }
}
public string LastName
{
get { return _lastName; }
}
public string FirstName
{
get { return _firstName; }
}
public Employee(int employeeID, string lastName, string firstName)
{
_employeeID = employeeID;
_lastName = lastName;
_firstName = firstName;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
 </div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox runat="server" ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox runat="server" ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" runat="server" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" runat="server" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label runat="server" ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>

复制代码

运行后效果如下：

示例代码下载：http://files.cnblogs.com/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar

joe · 发表于 2010-5-13 11:14

ASP.NET AJAX入门系列（6）：UpdateProgress控件简单介绍

在ASP.NET AJAX Beta2中，UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中。以下两篇关于UpdateProgress的文章基本翻译自ASP.NET AJAX官方网站。

主要内容
1．UpdateProgress控件简单使用
2．使用多个UpdateProgress控件

一．UpdateProgress控件简单使用
1．创建一个Web页面并切换到设计视图。
2．在工具箱的AJAX Extensions标签下，双击ScriptManager控件添加到页面中。
3．双击UpdatePanel控件添加到页面中。

4．双击UpdateProgress控件添加到页面中。
5．在UpdateProgress控件中添加文本“Progress……”。

6．在UpdatePanel中添加一个Button和一个Label。
7．设置Label的Text属性值为“Initial Page Rendered”。

8．双击Button添加Click事件。
9．在Buttond的Click事件处理中添加如下代码，这里人为的创建一个3秒钟的延迟并显示当前时间。．保存并按Ctrl + F5运行。

protected void Button1_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed at " +
DateTime.Now.ToString();
}

复制代码

10

11．单击Button，界面如下：

二．使用多个UpdateProgress控件
默认情况下，UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息，在以前版本的UpdateProgress中，我们无法设置UpdateProgress只显示某一个UpdatePanel的更新，最新版本的UpdateProgress控件提供了AssociatedUpdatePanelID属性，可以指定UpdateProgress控件显示哪一个UpdatePanel控件。下面的这个例子中UpdateProgrss控件将只显示它所在的UpdatePanel更新信息。
1．创建一个Web页面并切换到设计视图。
2．在工具箱的AJAX Extensions标签下，双击ScriptManager控件添加到页面中。
3．双击UpdatePanel控件两次添加两个UpdatePanel控件到页面中。

4．在每一个UpdatePanel中分别添加一个Label和Button。
5．分别设置两个Label的Text属性值为“Initial Page Rendered”。（官方网站这步有些问题）

6．双击每一个Button控件添加Click事件。
7．在Buttond的Click事件处理中添加如下代码，这里人为的创建一个3秒钟的延迟并显示当前时间。．切换到设计视图。

protected void Button1_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label1.Text = "Page refreshed at " +
DateTime.Now.ToString();
}
protected void Button2_Click(object sender, EventArgs e)
{
// Introducing delay for demonstration.
System.Threading.Thread.Sleep(3000);
Label2.Text = "Page refreshed at " +
DateTime.Now.ToString();
}

复制代码

8

9．在第一个UpdatePanel中添加UpdateProgrss控件，并添加文本Panel1 updating…

10．在第二个UpdatePanel中添加UpdateProgress控件，Panel2 updating…

11．保存并按Ctrl + F5运行
12．单击第一个UpdatePanel中的Button按钮，进度信息只显示在第一个UpdatePanel中。

13．单击第二个UpdatePanel中的Button按钮，进度信息只显示在第二个UpdatePanel中。

无处不在 · 发表于 2010-5-13 11:24

ASP.NET AJAX入门系列（7）：使用客户端脚本对UpdateProgress

在本篇文章中，我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件，客户端代码将使用ASP.NET AJAX Library中的PageRequestManager，在UpdateProgress控件中，将添加一个Button，来允许用户取消异步更新，并且使用客户端脚本来显示或者隐藏进度信息。

主要内容
1．通过客户端脚本取消异步更新
2．通过客户端脚本显示或者隐藏进度信息

一．通过客户端脚本取消异步更新
1．创建一个Web页面并切换到设计视图。
2．在工具箱中双击ScriptManager、UpdatePanel、UpdateProgress控件添加到页面中。添加后页面如下：

3．在UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。
4．添加一个Button控件并设置它的Text属性值为“refresh”。
5．在UpdateProgress控件中添加文本text Processing…，并添加一个HtmlButton控件并设置它的Text属性为cancle。

6．双击refresh控件添加Click事件。
7．在Buttond的Click事件处理中添加如下代码，人为的创建一个3秒钟的延迟并显示当前服务器的时间。

protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString();
}

复制代码

8．添加如下脚本，获取一个当前PageRequestManager类的实例，并创建一个函数调用abortPostBack方法来停止异步更新。

<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
// -->
</script>

复制代码

9．设置HtmlButton的click特性为CancelAsyncPostBack。

10．添加如下的样式块到<head>元素之间。

<style type="text/css">
#UpdatePanel1 {}{
width:200px; height:100px;
border: 1px solid gray;
}
#UpdateProgress1 {}{
width:200px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>

复制代码

11．保存并按Ctrl + F5运行。
12．单击refresh按钮，经过短暂的延时之后显示进度信息，完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。

13．单击refresh按钮并立即单击Cancle按钮结束异步更新，注意到UpdatePanel中的时间信息并没有更新。
二．通过客户端脚本显示或者隐藏进度信息
在下列情况下，UpdateProgress控件将不会自动显示：
由UpdateProgress控件关联的UpdatePanel之外的控件引发的异步更新。
UpdateProgress控件没有关联任何UpdatePanel，不在UpdatePanel中的控件引发的异步更新（例如用代码实现的更新）。
下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时，如何显示UpdateProgress控件。
1．在我们前面所创建的页面中，切换到设计视图。
2．选中UpdateProgress控件，在属性窗口中，设置AssociatedUpdatePanelID属性为UpdatePanel1。

3．在UpdatePanel和UpdateProgress控件之外添加一个Button控件。
4．设置Button的Text属性值为Trigger，并设置ID属性为Panel1Trigger。

5．选择UpdatePanel控件，在属性窗口中Triggers属性行单击ellipsis (…)。
6．创建一个异步更新触发器，并设置控件ID为Panel1Trigger。

7．双击Trigger按钮添加Click事件。
8．在Buttond的Click事件处理中添加如下代码，人为的创建一个3秒钟的延迟并显示当前服务器的时间，并附加上一条信息表示是由触发器引发的异步更新。

protected void Panel1Trigger_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = DateTime.Now.ToString() + " - trigger";
}

复制代码

9．在代码窗口，在已有的<Script>脚本块中添加如下代码：

<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id = 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'block';
}
}
function EndRequest(sender, args) {
if (postBackElement.id = 'Panel1Trigger') {
$get('UpdateProgress1').style.display = 'none';
}
}
// -->
</script>

复制代码

10．保存并按Ctrl + F5运行。
11．单击Trigger按钮，如下所示：

无处不在 · 发表于 2010-5-13 11:35

ASP.NET AJAX入门系列（8）：自定义异常处理

在UpdatePanel控件异步更新时，如果有错误发生，默认情况下会弹出一个Alert对话框显示出错误信息，这对用户来说是不友好的，本文看一下如何在服务端和客户端脚本中自定义异常处理，翻译自官方文档。

主要内容
1．在服务端自定义异常处理
2．在客户端脚本中自定义异常处理

一．在服务端自定义异常处理
1．添加ASPX页面并切换到设计视图。
2．在工具箱中AJAX Extensions标签下双击ScriptManager和UpdatePanel控件添加到页面中。
3．在UpdatePanel控件中添加两个TextBox，一个Label，一个Button和一些文字，并设置Button的Text属性值为“Calculate”。

4．双击Calculate按钮并添加如下代码到事件处理中。

protected void Button1_Click(object sender, EventArgs e)
{
try
{
int a = Int32.Parse(TextBox1.Text);
int b = Int32.Parse(TextBox2.Text);
int res = a / b;
Label1.Text = res.ToString();
}
catch (Exception ex)
{
if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
{
ex.Data["ExtraInfo"] = " You can't divide " +
TextBox1.Text + " by " + TextBox2.Text + ".";
}
throw ex;
}
}

复制代码

在事件处理代码中包含了一个try-catch语句块，在try中进行除法运算，如果运算失败，在catch中设置ExtraInfo信息并重新抛出异常。
5．切换到设计视图并选择ScriptManager控件。
6．在属性窗口中的工具栏中，选择事件按钮，并双击AsyncPostBackError。

7．添加如下代码到AsyncPostBackError事件处理。

protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
if (e.Exception.Data["ExtraInfo"] != null)
{
ScriptManager1. AsyncPostBackErrorMessage =
e.Exception.Message +
e.Exception.Data["ExtraInfo"].ToString();
}
else
{ ScriptManager1.AsyncPostBackErrorMessage =
"An unspecified error occurred.";
}
}

复制代码

检测异常的ExtraInfo是否为空，并设置为ScriptManager控件的AsyncPostBackErrorMessage，如果不设置则会创建一个默认的异常。
8．保存并按Ctrl + F5运行。
9．在每一个文本框中输入大于零的数，并单击Calculate按钮提交成功。
10．在第二个文本框中输入0，单击Calculate将会引发一个异常。浏览器将会显示一个对话框，提示的信息为我们在服务端设置的信息。

二．在客户端脚本中自定义异常处理
前面的异常处理是在服务端通过设置ScriptManager控件的属性来进行处理，下面将看一下如何在客户端脚本中使用PageRequestManager类来进行异常处理，并用<div>元素来代替浏览器默认的Alert对话框。
1．在我们前面创建的页面中，切换到代码视图。
2．添加如下的HTML元素到页面中（官方文档中有点错误）

<div id="AlertDiv" language="javascript" onclick="return AlertDiv_onclick()">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons">
<input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
</div>
</div>

复制代码

3．在HEAD元素中添加如下样式标记。

<style type="text/css">
#UpdatePanel1 {}{
width: 200px; height: 50px;
border: solid 1px gray;
}
#AlertDiv{}{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{}{
position: absolute; right: 5%; bottom: 5%;
}
</style>

复制代码

4．切换到设计视图并确保你的页面如下所示。

5．在属性窗口中的下拉列表中选择DOCUMENT元素（它对应的是页面<Body>元素），设置Id属性值为bodytag。

6．切换到代码视图。
7．添加如下<script>代码块。

<script type="text/javascript" language="javascript">
var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';
var bodyTag = 'bodytag';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
if (visString == 'hidden')
{
$get(bodyTag).style.backgroundColor = 'white';
}
else
{
$get(bodyTag).style.backgroundColor = 'gray';
}
var adiv = $get(divElem);
adiv.style.visibility = visString;
}
function ClearErrorState() {
$get(messageElem).innerHTML = '';
ToggleAlertDiv('hidden');
}
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage;
if (args.get_response().get_statusCode() == '200')
{
errorMessage = args.get_error().message;
}
else
{
// Error occurred somewhere other than the server page.
errorMessage = 'An unspecified error occurred. ';
}
args.set_errorHandled(true);
ToggleAlertDiv('visible');
$get(messageElem).innerHTML = errorMessage;
}
}
</script>

复制代码

在代码块中，主要做以下几件事：
1）定义PageRequestManager类的endRequest事件处理，在事件处理中，当有错误发生时将显示AlertDiv。
2）定义ToggleAlertDiv函数，当有错误发生时它用来显示或者隐藏AlertDiv元素，并且改变页面的背景颜色。
3）定义ClearErrorState函数，它用来隐藏错误信息的UI。
8．保存并按Ctrl + F5运行。
9．在每一个文本框中输入大于零的数，并单击Calculate按钮提交成功。
10．在第二个文本框中输入0，单击Calculate将会引发一个异常。这时自定义的AlertDiv将会显示出来代替了默认的Alert对话框，如下图所示：

无处不在 · 发表于 2010-5-13 11:41

ASP.NET AJAX入门系列（9）：在母版页中使用UpdatePanel

本文简单介绍一下在母版页中使用UpdatePanel控件，翻译自官方文档。

主要内容
1．添加UpdatePanel控件到Content Page

2．通过Master Page刷新UpdatePanel

一．添加UpdatePanel控件到Content-Page

1．添加一个新的Master Page，并切换到设计视图。
2．在工具箱中AJAX Extensions标签下双击ScriptManager控件添加到页面中，确保ScriptManager控件添加在ContentPlaceHolder控件之外。
3．在ContentPlaceHolder控件添加文本“Master Page”。
4．在工具箱的HTML标签下，拖动Horizontal Rule（横线）到文本之后，页面如下：

5．创建一个Content Page，选择它的Master Page为我们刚才创建的页面。
在解决方案管理器中点击右键，并选择Add New Item菜单命令，在Add New Item对话框中选择Select master page复选矿，并单击OK按钮。
6．在Content页面中的Content控件中输入Content Page，并添加一个UpdatePanel控件。

7．在UpdatePanel控件中添加Calendar控件。

8．保存并按Ctrl + F5运行。
9．单击Calendar控件中的上月和下月按钮，页面并没有整页刷新。
二．通过Master Page刷新UpdatePanel

在该例子中我们将在Master Page中添加一些控件，它们将引发一个异步提交，同时在Content页面中刷新UpdatePanel。
1．在Master Page中切换到设计视图。
2．添加一些文本和两个按钮到页面中，设置一个按钮的ID属性和Text属性分别为DecrementButton和“-”，设置另一个按钮的ID属性和Text属性分别为IncrementButton和“+”。

3．选择+按钮，在属性窗口的Click事件框中输入MasterButton_Click，对-按钮再重复做一次。

4．在控件之外双击页面添加Page_Load事件处理。
5．在Page_Load事件处理中添加如下代码，注册两个按钮为异步提交按钮。

protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
}

复制代码

6．添加如下代码创建一个MasterButton_Click事件处理。

protected void MasterButton_Click(object sender, EventArgs e)
{
switch (((Control)sender).ID)
{
case "IncrementButton":
this.Offset = this.Offset + 1;
break;
case "DecrementButton":
this.Offset = this.Offset - 1;
break;
}
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
cal.SelectedDate = newDateTime;
}

复制代码

7．在Master Page中创建一个公有的属性Offset，来显示所选择的日期和当天之差。

public Int32 Offset
{
get
{ return (Int32)(ViewState["Offset"] ?? 0); }
set
{ ViewState["Offset"] = value; }
}

复制代码

8．在Content Page中，切换到设计视图并双击Calendar控件添加一个SelectionChanged事件处理，当用户选择日期时设置Offset属性。
9．添加如下代码到SelectionChanged事件处理中。

protected void Calendar1_SelectionChanged(object sender,EventArgs e)
{
DateTime selectedDate = Calendar1.SelectedDate;
Master.Offset =
((TimeSpan)Calendar1.SelectedDate.Subtract(
DateTime.Today)).Days;
}

复制代码

10．在Content Page页面的Page_Load事件中添加如下代码。

protected void Page_Load(object sender, EventArgs e)
{
DateTime newDateTime =
DateTime.Today.Add(new
TimeSpan(Master.Offset, 0, 0, 0));
Calendar1.SelectedDate = newDateTime;
}

复制代码

11．添加@ MasterType标记到页面中，以便可以作为强类型属性引用Master Page页面的Offset属性。
<%@ MasterType VirtualPath="MasterPage.master" %>
12．在Content Page中切换到设计视图，并选择UpdatePanel控件。
13．在属性窗口中设置UpdateMode为Conditional。

14．保存并按Ctrl + F5运行。
15．在Calendar控件中单击上一月和下一月按钮，可以看到整页刷新。
16．选择一个日期并单击Master Page中的按钮，可以看到仍然没有整页刷新。

无处不在 · 发表于 2010-5-13 11:48

ASP.NET AJAX入门系列（10）：Timer控件简单使用

本文主要通过一个简单示例，让Web页面在一定的时间间隔内局部刷新，来学习一下ASP.NET AJAX中的服务端Timer控件的简单使用。

主要内容
Timer控件的简单使用

1．添加新页面并切换到设计视图。
2．如果页面没有包含ScriptManager控件，在工具箱的AJAX Extensions标签下双击ScriptManager控件添加到页面中。

3．单击ScriptManager控件并双击UpdatePanel控件添加到页面中。

4．在UpdatePanel控件内单击并双击Timer控件添加到UpdatePanel中。Timer控件可以作为UpdatePanel的触发器不管是否在UpdatePanel中。

5．设置Interval属性为10000。Interval属性的单位是毫秒，所以我们设置为10000，相当于10秒钟刷新一次。
6．在UpdatePanel控件中添加一个Label控件。

7．设置Label控件的Text属性为“Panel not refreshed yet ”。确保Label控件添加在了UpdatePanel控件里面。
8．在UpdatePanel之外再添加一个Label控件。确保第二个Label控件在UpdatePanel的外面。

9．双击Timer控件添加Tick事件处理，在事件处理中设置Label1的Text属性为当前时间。．在Page_Load事件中添加代码设置Label2的Text属性为页面创建时间，如下代码所示：．切换到代码视图，确保代码如下所示：．保存并按Ctrl + F5运行

protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
}

复制代码

10

protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = "Page created at: " +
DateTime.Now.ToLongTimeString();
}

复制代码

11

protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = "Page created at: " +
DateTime.Now.ToLongTimeString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
}

复制代码

12

13．等待10秒钟后可以看到Panel刷新，里面的Label文字改变为刷新的时间而外面的Label没有改变。

无处不在 · 发表于 2010-5-13 12:20

ASP.NET AJAX入门系列（11）：在多个UpdatePanle中使用Timer

本文将使用Timer控件更新两个UpdatePanel控件，Timer控件将放在UpdatePanel控件的外面，并将它配置为UpdatePanel的触发器，翻译自官方文档。

主要内容
在多个UpdatePanel中使用Timer控件

1．添加一个新页面并切换到设计视图。
2．如果页面没有包含ScriptManager控件，在工具箱中的AJAX Extensions标签下双击ScriptManager控件添加到页面中。

3．双击Timer控件添加到Web页面中。Timer控件可以作为UpdatePanel的触发器不管它是否在UpdatePanel中。

4．双击UpdatePanel控件添加一个Panel到页面中，并设置它的UpdateMode属性值为Conditional。

5．再次双击UpdatePanel控件添加第二个Panel到页面中，并设置它的UpdateMode属性值为Conditional。

6．在UpdatePanel1中单击，并在工具箱中Standard标签下双击Label控件添加到UpdatePanel1中。
7．设置Label控件的Text属性值为“UpdatePanel1 not refreshed yet”。

8．添加Label控件到UpdatePanel2。
9．设置第二个Label控件的Text属性值为“UpdatePanel2 not refreshed yet”。

10．设置Interval属性为10000。Interval属性的单位是毫秒，所以我们设置为10000，相当于10秒钟刷新一次。
11．双击Timer控件添加Tick事件处理，在事件处理中设置Label1和Label2的Text属性值，代码如下。．在UpdatePanel1和UpdatePanel2中添加Timer控件作为AsyncPostBackTrigger，代码如下：

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Timer1_Tick(object sender, EventArgs e)

{

      Label1.Text = "UpdatePanel1 refreshed at: " +

      DateTime.Now.ToLongTimeString();

      Label2.Text = "UpdatePanel2 refreshed at: " +

      DateTime.Now.ToLongTimeString();

}

}12

<Triggers>

  <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>全部完成后ASPX页面代码如下：
．保存并按Ctrl + F5运行。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

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

      <div>

         <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">

         </asp:Timer>

      </div>

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

         <Triggers>

            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

         </Triggers>

         <ContentTemplate>

            <asp

abel ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp

abel>

         </ContentTemplate>

      </asp:UpdatePanel>

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

         <Triggers>

            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

         </Triggers>

         <ContentTemplate>

            <asp

abel ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp

abel>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>
13

14．等待10秒钟后两个UpdatePanel都刷新后，Label中的文本都变成了当前时间。

有烟没火 · 发表于 2011-7-25 10:52

看,刚说你眼神不好,你还就来劲了不是.

走就走吧 · 发表于 2011-8-4 12:18

谢谢楼主，好久没看到这么好的贴了

曾经的小孩 · 发表于 2011-8-16 10:44

支持一下吧

帐号		自动登录	找回密码
密码			成为会员