ASP.NET AJAX入門系列（轉）

轉自http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_QuickStarts.html

ASP.NET AJAX入門系列

ASP.NET AJAX入門系列將會寫關於ASP.NET AJAX一些控件的使用方法以及基礎知識，其中部分文章爲原創，也有一些文章是直接翻譯自官方文檔，本部分內容會不斷更新。

導讀：作爲本系列文章的開篇，簡單介紹一下ASP.NET AJAX的概況及各個組成部分。

導讀：ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中，它用來處理頁面上的所有組件以及頁面局部更新，生成相關的客戶端代理腳本以便能夠在JavaScript中訪問Web Service，所有需要支持ASP.NET AJAX的ASP.NET頁面上有且只能有一個ScriptManager控件。在ScriptManager控件中我們可以指定需要的腳本庫，或者指定通過JS來調用的Web Service，以及調用AuthenticationService和ProfileService，還有頁面錯誤處理等。

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

導讀：在ASP.NET AJAX中，由於一個ASPX頁面上只能有一個ScriptManager控件，所以在有母版頁的情況下，如果需要在Master-Page和Content-Page中需要引入不同的腳本時，這就需要在Content-page中使用ScriptManagerProxy，而不是ScriptManager，ScriptManager 和 ScriptManagerProxy 是兩個非常相似的控件。

ASP.NET AJAX入門系列（4）：使用UpdatePanel控件（一）

導讀：UpdatePanel可以用來創建豐富的局部更新Web應用程序，它是ASP.NET 2.0 AJAX Extensions中很重要的一個控件，其強大之處在於不用編寫任何客戶端腳本，只要在一個頁面上添加幾個UpdatePanel控件和一個ScriptManager控件就可以自動實現局部更新。通過本文來學習一下UpdatePanel簡單的使用方法（第一篇）。

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

ASP.NET AJAX入門系列（6）：UpdateProgress控件簡單介紹

導讀：在ASP.NET AJAX Beta2中，UpdateProgress控件已經從“增值”CTP中移到了ASP.NET AJAX核心中，本文簡單介紹一些它的基本用法，翻譯自官方文檔。

ASP.NET AJAX入門系列（7）：使用客戶端腳本對UpdateProgress編程

導讀：在本篇文章中，我們將通過編寫JavaScript來使用客戶端行爲擴展UpdateProgress控件，客戶端代碼將使用ASP.NET AJAX Library中的PageRequestManager，在UpdateProgress控件中，將添加一個Button，來允許用戶取消異步更新，並且使用客戶端腳本來顯示或者隱藏進度信息，翻譯自官方文檔。

ASP.NET AJAX入門系列（8）：自定義異常處理

導讀：在UpdatePanel控件異步更新時，如果有錯誤發生，默認情況下會彈出一個Alert對話框顯示出錯誤信息，這對用戶來說是不友好的，本文看一下如何在服務端和客戶端腳本中自定義異常處理，翻譯自官方文檔。

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

導讀：本文簡單介紹一下在母版頁中使用UpdatePanel控件，翻譯自官方文檔。

ASP.NET AJAX入門系列（10）：Timer控件簡單使用

導讀：本文主要通過一個簡單示例，讓Web頁面在一定的時間間隔內局部刷新，來學習一下ASP.NET AJAX中的服務端Timer控件的簡單使用。

ASP.NET AJAX入門系列（11）：在多個UpdatePanle中使用Timer控件

導讀：本文將使用Timer控件更新兩個UpdatePanel控件，Timer控件將放在UpdatePanel控件的外面，並將它配置爲UpdatePanel的觸發器，翻譯自官方文檔

---------------------------------------------------------------------------------------------------------------------------------------------------

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

經常關注我的Blog的朋友可能注意到了，在我Blog的左邊系列文章中，已經移除了對Atlas學習手記系列文章的推薦，因爲隨着ASP.NET AJAX 1.0 Beta版的發佈，它們已經不再適用，爲了不繼續誤導廣大朋友，所以不再作爲推薦系列文章，如果有需要參考的朋友，可以直接到隨筆分類中查看。

ASP.NET AJAX Beta改動如此之大，鑑於又沒有很好的中文參考資料，所以決定最近開始寫作ASP.NET AJAX入門系列，這個系列我會把ASP.NET AJAX當作一個全新的東西去對待，不再考慮以前的Atlas，把自己對ASP.NET AJAX的研究與大家分享，便於初學的朋友少走一些彎路。對Atlas熟悉的朋友可以推薦看Dflying Chen的《擁抱變化——從Atlas到ASP.NET AJAX系列》，以及老趙的《深入Atlas系列》。由於個人的能力和掌握的程度有限，難免出現錯誤和遺漏的地方，還請大家多多理解和指正。

OK，讓我們從這裏開始！

一．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中的每一項具體的功能。

下篇預告：ASP.NET AJAX入門系列（2）：使用ScriptManager

---------------------------------------------------------------------------------------------------------------------------------------------------

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

一．控件概述

使用<asp:ScriptManager/>來定義一個ScriptManager，簡單的ScriptManager定義形式：

<asp:ScriptManager ID="ScriptManager1"

runat="server">

<asp:ScriptReference/>

</Scripts>

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

void DropDownSelection_Change(Object sender, EventArgs e)

{

Calendar1.DayStyle.BackColor =

System.Drawing.Color.FromName(ColorList.SelectedItem.Value);

}

</script>

<title>ScriptManager Example</title>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1"

runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1"

runat="server">

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

<system.web>

</system.web>

或者頁面中的Debug指令設爲true的時候會使用Debug版本，其他的情況都會使用Release版本。

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

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

2．Inherit：應該是通過程序設置ScriptMode的時候，等同於Auto？（不太瞭解）

3．Debug：客戶端腳本使用Debug版本，除非retail屬性設爲true。

4．Release：客戶端腳本使用Release版本，除非retail屬性設爲false。

四．錯誤處理

在頁面回傳時如果發生了異常AsyncPostBackError事件將被觸發，錯誤信息的處理依賴於AllowCustomErrors屬性、AsyncPostBackErrorMessage屬性和Web.config中的<customErrors>配置區。下面看一個簡單的錯誤處理例子，在AsyncPostBackError事件中捕獲到異常信息並設置AsyncPostBackErrorMessage屬性。

<%@ Page Language="C#" %>

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>

<title>PageRequestManager endRequestEventArgs Example</title>

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>

<div>

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

OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">

</asp:ScriptManager>

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

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

<br />

<input id="OKButton" type="button" value="OK"

runat="server" onclick="ClearErrorState()" />

</div>

</form>

</body>

</html>

運行後時界面：

發生異常信息：

五．Services屬性

Services用來管理對WebService的調用，通過<asp:ServiceReference>標籤可以在Services中註冊一個WebService，在運行時ScriptManager將爲每一個ServiceReference對象生成一個客戶端代理，<asp:ServiceReference>標籤一個很重要的屬性是Path，用來指定WebService的路徑，如下所示：

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

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

<title>Untitled Page</title>

</head>

function OnbuttonGo_click()

{

requestSimpleService = WebServiceSample.EchoString(

document.getElementById('inputName').value, //params

OnRequestComplete //Complete event

);

return false;

}

function OnRequestComplete(result)

{

alert(result);

}

</script>

<body>

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

<asp:ServiceReference Path="WebServiceSample.asmx"/>

</Services>

</asp:ScriptManager>

<div>

</form>

</body>

</html>

運行後效果如下：

當然了也可以在運行時動態的在Services中加入ServiceReference，下面看一個運行時動態加入ServiceReference的例子：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

void Page_Load(object sender, EventArgs e)

{

ServiceReference sr = new ServiceReference();

sr.Path = "WebServiceSample.asmx";

ScriptManager1.Services.Add(sr);

}

</script>

<title>Untitled Page</title>

</head>

function OnbuttonGo_click()

{

requestSimpleService = WebServiceSample.EchoString(

document.getElementById('inputName').value, //params

OnRequestComplete //Complete event

);

return false;

}

function OnRequestComplete(result)

{

alert(result);

}

</script>

<body>

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

</asp:ScriptManager>

<div>

</form>

</body>

</html>

可以看到運行後和在ScriptManager中直接加入的效果是一樣的。

六．Scripts屬性

關於Scripts屬性到後面具體再說吧，最主要的屬性有Path指定腳本的路徑，ScriptMode指定客戶端腳本的模式，它會覆蓋ScriptManager中的ScriptMode屬性，還有一個屬性是IgnoreScriptPath，指定是否忽略掉ScriptManager中的ScriptPath屬性。

關於ScriptManager控件就學習到這裏了，至於AuthenticationService屬性和ProfileService屬性都很簡單。

示例代碼下載：http://www.cnblogs.com/Files/Terrylee/ASPNETAJAXScriptManagerDemo.rar

--------------------------------------------------------------------------------------------------------------------------------------------------

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

<asp:ServiceReference Path="CalculWebService.asmx" />

</Services>

</asp:ScriptManagerProxy>

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

二．簡單示例

下面看一個簡單的使用ScriptManagerProxy的例子。

1．首先我們準備兩個WebService，在Master-Page中我們輸入一個字符串，而在Content-Page中我們求兩個數的和。

SimpleWebService.asmx

[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．添加一個Master-Page，在它上面添加一個ScriptManager控件，並引入WebService SimpleWebService.asmx，並添加相應的HTML元素：

<div>

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

<asp:ServiceReference Path="SimpleWebService.asmx" />

</Services>

</asp:ScriptManager>

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

</asp:contentplaceholder>

 <h3>請輸入名稱：</h3>

</div>

編寫相應的JS代碼：

function OnbuttonGo_click()

{

requestSimpleService = SimpleWebService.EchoString(

document.getElementById('inputName').value, //params

OnRequestComplete //Complete event

);

return false;

}

function OnRequestComplete(result)

{

alert(result);

}

</script>

3．添加一個Content-Page，在它上面添加一個ScriptManagerProxy控件，並引入WebService CalculWebService.asmx，並添加相應的HTML元素：

<div>

<asp:ScriptManagerProxy id="ScriptManagerProxy1" runat="server">

<asp:ServiceReference Path="CalculWebService.asmx" />

</Services>

</asp:ScriptManagerProxy>

<h3>請輸入兩個數：</h3> <input id="inputA" type="text" style="width: 110px" /> + 

</div>

編寫相應的JS代碼：

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

-------------------------------------------------------------------------------------------------------------------------------------------------

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控件概述

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

<!--

-->

</ContentTemplate>

<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的例子。

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

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

事件代碼：

void DropDownSelection_Change(Object sender, EventArgs e)

{

Calendar1.DayStyle.BackColor =

System.Drawing.Color.FromName(ColorList.SelectedItem.Value);

}

</script>

四．ContentTemplateContainer屬性

如果要使用編程的手法去設置UpdatePanel中的內容，需要創建一個UpdatePanel，並且添加控件到ContentTemplateContainer，而不能直接添加控件到ContentTemplate，如果想直接設置ContentTemplate，則需要編寫一個自定義的Template，並去實現位於System.Web.UI命名空間下的接口ITemplate。看一個簡單的來自於官方網站的例子：

<%@ Page Language="C#" %>

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>

<title>UpdatePanel Added Programmatically Example</title>

</head>

<body>

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

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>

<title>UpdatePanel Trigger Sample</title>

</head>

<body>

<div>

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

</asp:ScriptManager>

</div>

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

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

<asp:AsyncPostBackTrigger ControlID="Button1"/>

<asp:PostBackTrigger ControlID="Button2" />

</Triggers>

</asp:UpdatePanel>

</form>

</body>

</html>

（未完待續）
示例代碼下載：http://www.cnblogs.com/Files/Terrylee/ASPNETAJAXUpdatePanelDemo1

----------------------------------------------------------------------------------------------------------------------------------------------------

ASP.NET AJAX入門系列（5）：使用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" %>

void Button1_Click(object sender, EventArgs e)

{

this.Label2.Text = DateTime.Now.ToString();

}

</script>

<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

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

<div>

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

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

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>

<title>Refreshing an UpdatePanel Programmatically</title>

</head>

<body>

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

<div>

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

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

<title>UpdatePanelUpdateMode Example</title>

div.NestedPanel

{

position: relative;

margin: 2% 5% 2% 5%;

}

</style>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager"

runat="server" />

<asp:UpdatePanel ID="OuterPanel"

UpdateMode="Conditional"

runat="server">

<div>

<legend>Outer Panel </legend>

<br />

<asp:Button ID="OPButton1"

Text="Outer Panel Button"

runat="server" />

<br />

Last updated on

<%= DateTime.Now.ToString() %>

<br />

<asp:UpdatePanel ID="NestedPanel1"

UpdateMode="Conditional"

runat="server">

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

<title>Enter New Employees</title>

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>

<div>

 </div>

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

<table>

<tr>

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

<tr>

<td><asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstNameTextBox"

Text="First Name" ForeColor="White" /></td>

</tr>

<tr>

<td><asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastNameTextBox"

Text="Last Name" ForeColor="White" /></td>

</tr>

<tr>

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

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

<asp:GridView ID="EmployeesGridView" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"

BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">

<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />

<asp:BoundField DataField="LastName" HeaderText="Last Name" />

<asp:BoundField DataField="FirstName" HeaderText="First Name" />

</Columns>

</asp:GridView>

<asp:Label runat="server" ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

</table>

</form>

</body>

</html>

運行後效果如下：

示例代碼下載：http://www.cnblogs.com/Files/Terrylee/ASPNETAJAXUpdatePanelDemo2.rar

---------------------------------------------------------------------------------------------------------------------------------------------------

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秒鐘的延遲並顯示當前時間。

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．保存並按Ctrl + F5運行。

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

--------------------------------------------------------------------------------------------------------------------------------------------------

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方法來停止異步更新。

<!--

var prm = Sys.WebForms.PageRequestManager.getInstance();

function CancelAsyncPostBack() {

if (prm.get_isInAsyncPostBack()) {

prm.abortPostBack();

}

// -->

</script>

9．設置HtmlButton的click特性爲CancelAsyncPostBack。

10．添加如下的樣式塊到<head>元素之間。

#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>腳本塊中添加如下代碼：

<!--

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按鈕，如下所示：

[翻譯自官方文檔]

-------------------------------------------------------------------------------------

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>

<br />

</div>

3．在HEAD元素中添加如下樣式標記。

#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>代碼塊。

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對話框，如下圖所示：

[翻譯自官方文檔]

------------------------------------------------------------------------------------------------------------------------------------------------------

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中的按鈕，可以看到仍然沒有整頁刷新。

[翻譯自官方文檔]

---------------------------------------------------------------------------------------------------------------------------------------------------

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屬性爲當前時間。

protected void Timer1_Tick(object sender, EventArgs e)

{

Label1.Text = "Panel refreshed at: " +

DateTime.Now.ToLongTimeString();

}

10．在Page_Load事件中添加代碼設置Label2的Text屬性爲頁面創建時間，如下代碼所示：

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．保存並按Ctrl + F5運行

13．等待10秒鐘後可以看到Panel刷新，裏面的Label文字改變爲刷新的時間而外面的Label沒有改變。

[翻譯自官方文檔]

----------------------------------------------------------------------------------------------------------------------------------------------------

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屬性值，代碼如下。

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．在UpdatePanel1和UpdatePanel2中添加Timer控件作爲AsyncPostBackTrigger，代碼如下：

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

</Triggers>

全部完成後ASPX頁面代碼如下：

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

<title>Untitled Page</title>

</head>

<body>

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

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

</Triggers>

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

</ContentTemplate>

</asp:UpdatePanel>

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

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

</Triggers>

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

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

13．保存並按Ctrl + F5運行。

14．等待10秒鐘後兩個UpdatePanel都刷新後，Label中的文本都變成了當前時間。

[翻譯自官方文檔]

ASP.NET AJAX入門系列（轉）

轉自http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_QuickStarts.html

ASP.NET AJAX入門系列

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

ASP.NET AJAX入門系列（2）：使用ScriptManager控件

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

ASP.NET AJAX入門系列（4）：使用UpdatePanel控件（一）

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

ASP.NET AJAX入門系列（6）：UpdateProgress控件簡單介紹

ASP.NET AJAX入門系列（7）：使用客戶端腳本對UpdateProgress編程

ASP.NET AJAX入門系列（8）：自定義異常處理

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

ASP.NET AJAX入門系列（10）：Timer控件簡單使用

ASP.NET AJAX入門系列（11）：在多個UpdatePanle中使用Timer控件

杭州的 IT 崩盤了麼？

開源高性能結構化日誌模塊NanoLog

Python 潮流週刊#55：分享 9 個高質量的技術類信息源！

Azure Virtual Network (22) 多訂閱使用Azure DNS解析問題 Windows Azure Platform 系列文章目錄

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

使用javascript使iframe自適應高度

風聲日期時間選擇器的一些小小的使用心得

一個項目的web.config中身份認證，不同目錄需要不同的身份認證問題的解決方案

ASP.NET AJAX入門系列（轉）

把ArrayList綁到DataGrid。。。

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

ASP.NET AJAX入門系列 （轉）

轉自http://www.cnblogs.com/Terrylee/archive/2006/11/12/ASPNET_AJAX_QuickStarts.html

ASP.NET AJAX入門系列（轉）