AJAX.NET的UpdatePanel全面應用(3) (用戶端)

http://blog.csdn.net/ccp5780199/archive/2007/08/31/1767677.aspx

AJAX.NET的UpdatePanel全面應用(3) (用戶端)

前面兩篇主要都是服務端方面的,今天這個都是用戶端的,一樣還是看WebCast上的視頻

l PageRequestManager類 （以下簡稱為PRM）

getInstance靜態方法

–獲得全域唯一的PageRequestManager執行個體

isInAsyncPostBack屬性

–是否正處在一個非同步更新過程中

abortPostBack方法

–取消當前的非同步更新

–不會產生異常

l 用戶端生命週期

Sys.Application與PageRequestManager共同形成

Sys._Application的事件

–init事件

基於瀏覽器window.onload事件

只在頁面第一次初始化時觸發

所有指令碼已經載入完畢

所有組件還沒有開始建立

用於建立各種組件

–為組件建立相互參考關聯性的時期

–將在之後的課程中進行詳細介紹

–load事件

–參數類型：Sys.ApplicationLoadEventArgs

components屬性：獲得這次載入階段中所有建立的對象。

isPartialLoad屬性：是否為非同步呼叫導致頁面載入。和IsPostBack差不多

–unload事件僅用於通知

“捷徑”方法

–pageLoad方法

–pageUnload方法

PageRequestManager的事件

–非同步重新整理時觸發

–initializeRequest

–beginRequest

–pageLoading

–pageLoaded

–endRequest

進入頁面

離開頁面

PRM–pageLoaded事件

pageUnload方法

App–init事件

App–unload事件(頁面載入完後)

App–load事件

pageLoad方法

PRM–initializeRequest事件

PRM–beginRequest事件

服務端處理，錯誤逾時取消直接PRM–endRequest事件

PRM –pageLoading事件

PRM–pageLoaded事件

App–load事件

pageLoad方法

PRM–endRequest事件

PRM–initializeRequest事件

參數類型：InitializeRequestEventArgs

–request屬性：用於獲得WebRequest對象（用於請求的資訊）

–postBackElement：觸發非同步重新整理的DOM元素

常用操作：

–讀取請求資訊

–取消此次非同步更新

非同步重新整理層級

<div>

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

</asp:ScriptManager>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" DynamicLayout=false>

<ProgressTemplate>

<span style="color:Red">loading.....</span>

</ProgressTemplate>

</asp:UpdateProgress>

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

<ContentTemplate>

<%= DateTime.Now %>><br />

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Button ID="btnPrecedence" runat="server" Text="優先" OnClick="btnPrecedence_Click" />

<asp:Button ID="Button2" runat="server" Text="普通" OnClick="btnPrecedence_Click" />

</ContentTemplate>

</asp:UpdatePanel>

<script language=javascript type="text/javascript">

var lastPostBackButtonID = null;

var btnPrecedenceID = "<%= this.btnPrecedence.ClientID %>";

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(

function(sender,e){

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

//是否處在一個非同步更新過程中

if(prm.get_isInAsyncPostBack()) {

//如果發起非同步重新整理的DOM元素的ID等於優先控制項的ID

if(lastPostBackButtonID == btnPrecedenceID){

e.set_cancel(true);

//如果發起非同步重新整理的DOM元素的ID等於優先控制項的ID

if(e.get_postBackElement().id == btnPrecedenceID){

showMessage("不可重複發起優先的重新整理");

}

else{

showMessage("請等待優先的重新整理結束");

}

return;

}

else if(e.get_postBackElement().id == btnPrecedenceID){

showMessage("發起優先的重新整理,普通的重新整理將被取消");

}

else{

showMessage("重新發起普通的重新整理,前一次提交將被取消");

}

}

lastPostBackButtonID = e.get_postBackElement().id;

}

);

var timeoutSeed = null;

function showMessage(message,timeout){

$get("message").innerHTML = message;

if(timeoutSeed){

window.clearTimeout(timeoutSeed);

}

timeoutSeed = window.setTimeout(

function(){ $get("message").innerHTML = ""; },

timeout || 2500);

}

</script>

</div>

<div id="message" style="color:Red" ;></div>

protected void btnPrecedence_Click(object sender, EventArgs e)

{

Thread.Sleep(3000);

Button btn = sender as Button;

this.Label1.Text = String.Format("您點擊了 {0} 按鈕 ", btn.Text);

}

PRM –beginRequest事件

參數類型：BeginRequestEventArgs

–request屬性：用於獲得WebRequest對象（用於請求的資訊）

–postBackElement：觸發非同步重新整理的DOM元素

常用操作：

–讀取請求資訊

–改變請求方式（替換Executor）

–顯示更新提示

強制顯示UpdateProgress

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

</asp:ScriptManager>

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

<ContentTemplate>

<%= DateTime.Now %>

<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button2" />

</Triggers>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter=0 DynamicLayout=false AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate>

<span style="color:Red">Loading....</span>

</ProgressTemplate>

</asp:UpdateProgress>

<hr />

<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button1_Click" />

<script language=javascript type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(

function(sender,e){

if(e.get_postBackElement().id != "<%= this.Button2.ClientID %>") {

return;

}

var updateProgress = $get("<%= this.UpdateProgress1.ClientID %>")

var dynamicLayout = <%= this.UpdateProgress1.DynamicLayout.ToString().ToLower() %>

if(dynamicLayout){

updateProgress.style.display = "block";

}

else {

updateProgress.style.visibility = "visible";

}

}

);

</script>

PRM–pageLoading事件

參數類型：PageLoadingEventArgs

–dataItems屬性：獲得伺服器端註冊的資料項目

–panelsDeleting屬性：獲得即將刪除的UpdatePanel

–panelsUpdating屬性：獲得即將更新的UpdatePanel

常用操作

–提示更新的UpdatePanel

–（能夠）獲得伺服器端註冊的資料項目

提示更新的UpdatePanel

<script language="javascript" type="text/javascript">

function highlightPanels(panels, clear)

{

for (var i = 0; i < panels.length; i++)

{

var panel = panels[i];

panel.style.border = clear ? "solid 0px white" : "solid 2px red";

panel.style.backgroundColor = clear ? "white" : "#d6dde8";

}

}

Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(

function(sender, e)

{

var panelsUpdating = Array.clone(e.get_panelsUpdating());

highlightPanels(panelsUpdating);

window.setTimeout(

function(){ highlightPanels(panelsUpdating, true); },

2000);

});

</script>

PRM–pageLoaded事件

參數類型：PageLoadedEventArgs

–dataItems屬性：獲得伺服器端註冊的資料項目

–panelsCreated屬性：獲得建立的UpdatePanel,用於嵌套UpdatePanel

–panelsUpdated屬性：獲得已經更新的UpdatePanel

常用操作：

–（能夠）獲得伺服器端註冊的資料項目

–（能夠）執行伺服器端註冊的指令碼

局部內容添加

public class Comment

{

public string Content;

public DateTime Time;

}

<strong>Comment:</strong> <br /><br />

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

</asp:ScriptManager>

<div id="commentContainer">

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

<ContentTemplate>

<asp:Repeater ID="Repeater1" runat="server">

<ItemTemplate>

<%# (Container.DataItem as Comment).Content %><br />

<i><%# (Container.DataItem as Comment).Time %></i>

<hr />

</ItemTemplate>

</asp:Repeater>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="Button1" />

</Triggers>

</asp:UpdatePanel>

</div>

<br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Add Comment" OnClick="Button1_Click" />

<script language=javascript type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(

function(sender,e){

var upID = "<%= this.UpdatePanel1.ClientID %>";

var refreshedPanels = e.get_panelsUpdated();

for(var i=0; i < refreshedPanels.length; i++) {

if(refreshedPanels[i].id == upID){

refreshedPanels[i].id = upID + Math.floor(9999 * Math.random());

var div = document.createElement("div");

div.id = upID;

$get("commentContainer").appendChild(div);

return;

}

}

}

);

</script>

主要還是在於每次發送的資料不會遞增

PRM–endRequest事件

參數類型：EndRequestEventArgs

–dataItems屬性：獲得伺服器端註冊的資料項目

–error屬性：獲得非同步重新整理時獲得的錯誤

–errorHandled屬性：表明錯誤是否已被處理了

–response屬性：獲得這次請求獲得的結果對象

•常用操作：

–處理非同步重新整理結果（異常、逾時、取消, etc.）

–獲得請求結果中額外的資訊

–（能夠）獲得伺服器端註冊的資料項目

處理非同步重新整理結果

protected void Page_Load(object sender, EventArgs e)

{

ScriptManager.GetCurrent(this).AsyncPostBackTimeout = 3;

}

protected void btnError_Click(object sender, EventArgs e)

{

int two = 2;

int i = 3 / (two - 2);

}

protected void btnTimeout_Click(object sender, EventArgs e)

{

Thread.Sleep(5000);

}

protected void btnDataItem_Click(object sender, EventArgs e)

{

ScriptManager.GetCurrent(this).RegisterDataItem(this.UpdatePanel1, DateTime.Now.ToString());

}

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

<ContentTemplate>

<%= DateTime.Now %><br />

<asp:Button ID="btnError" runat="server" Text="Error" OnClick="btnError_Click" />

<asp:Button ID="btnTimeout" runat="server" Text="Timeout" OnClick="btnTimeout_Click" />

<input type="button" value="Abort" onclick="Sys.WebForms.PageRequestManager.getInstance().abortPostBack();" />

<asp:Button ID="btnDataItem" runat="server" Text="Register DataItem" OnClick="btnDataItem_Click" />

</ContentTemplate>

</asp:UpdatePanel>

<script language="javascript" type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(

function(sender, e)

{

if (e.get_error())

{

e.set_errorHandled(true);

if (e.get_response().get_timedOut())

{

showMessage("您的請求已逾時。");

}

else if (e.get_response().get_statusCode() != 200)

{

showMessage("遇到未知錯誤。");

}

else

{

showMessage(e.get_error().message);

}

}

else if (e.get_response().get_aborted())

{

showMessage("您的請求已被取消。");

}

else

{

var upId = "<%= this.UpdatePanel1.ClientID %>";

var item = e.get_dataItems()[upId];

showMessage("您註冊了：" + item);

}

});

</script>