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元素
常用操作：
–读取请求信息
–取消此次异步更新
异步刷新级别
<scriptmanager id="ScriptManager1" runat="server" scriptmode="Debug"><p></p></scriptmanager>
<updateprogress id="UpdateProgress1" runat="server" displayafter="0" dynamiclayout="false"><p><progresstemplate><p><span style="color:Red">loading.....</span> </p><p></p></progresstemplate></p> <p></p></updateprogress>
<updatepanel id="UpdatePanel1" runat="server"><p><contenttemplate><p>><br></p> <p><label id="Label1" runat="server" text="Label"></label> </p> <p><button id="btnPrecedence" runat="server" text="优先" onclick="btnPrecedence_Click"></button> </p> <p><button id="Button2" runat="server" text="普通" onclick="btnPrecedence_Click"></button> </p> <p></p></contenttemplate></p> <p></p></updatepanel>
var lastPostBackButtonID = null;
var btnPrecedenceID = "";
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);
}
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
<scriptmanager id="ScriptManager1" runat="server"><p></p></scriptmanager>
<updatepanel id="UpdatePanel1" runat="server"><p><contenttemplate><p> </p> <p><button id="Button1" runat="server" text="Button1" onclick="Button1_Click"></button> </p> <p></p></contenttemplate></p> <p><triggers><p><asyncpostbacktrigger controlid="Button2"></asyncpostbacktrigger></p> <p></p></triggers></p> <p></p></updatepanel>
<updateprogress id="UpdateProgress1" runat="server" displayafter="0" dynamiclayout="false" associatedupdatepanelid="UpdatePanel1"><p><progresstemplate><p><span style="color:Red">Loading....</span> </p><p></p></progresstemplate></p> <p></p></updateprogress>
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender,e){
if(e.get_postBackElement().id != "") {
return;
}
var updateProgress = $get("")
var dynamicLayout =
if(dynamicLayout){
updateProgress.style.display = "block";
}
else {
updateProgress.style.visibility = "visible";
}
}
);
PRM–pageLoading事件
参数类型：PageLoadingEventArgs
–dataItems属性：获得服务器端注册的数据项
–panelsDeleting属性：获得即将删除的UpdatePanel
–panelsUpdating属性：获得即将更新的UpdatePanel
常用操作
–提示更新的UpdatePanel
–（能够）获得服务器端注册的数据项
提示更新的UpdatePanel
function highlightPanels(panels, clear)
{
for (var i = 0; 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);
});
PRM–pageLoaded事件
参数类型：PageLoadedEventArgs
–dataItems属性：获得服务器端注册的数据项
–panelsCreated属性：获得新建的UpdatePanel,用于嵌套UpdatePanel
–panelsUpdated属性：获得已经更新的UpdatePanel
常用操作：
–（能够）获得服务器端注册的数据项
–（能够）执行服务器端注册的脚本
局部内容添加
public class Comment
{
public string Content;
public DateTime Time;
}
Comment:
<scriptmanager id="ScriptManager1" runat="server"><p></p></scriptmanager>
<updatepanel id="UpdatePanel1" runat="server"><p><contenttemplate><p><repeater id="Repeater1" runat="server"><p><itemtemplate><p><br></p> <p><i></i> </p> <p></p> <hr> <p></p></itemtemplate></p> <p></p></repeater></p> <p></p></contenttemplate></p> <p><triggers><p><asyncpostbacktrigger controlid="Button1"></asyncpostbacktrigger></p> <p></p></triggers></p> <p></p></updatepanel>
<textbox id="TextBox1" runat="server"></textbox>
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
function(sender,e){
var upID = "";
var refreshedPanels = e.get_panelsUpdated();
for(var i=0; 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;
}
}
}
);
主要还是在于每次发送的数据不会递增
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());
}
<updatepanel id="UpdatePanel1" runat="server"><p><contenttemplate><p><br></p> <p><button id="btnError" runat="server" text="Error" onclick="btnError_Click"></button> </p> <p><button id="btnTimeout" runat="server" text="Timeout" onclick="btnTimeout_Click"></button> </p> <p><input type="button" value="Abort" onclick="Sys.WebForms.PageRequestManager.getInstance().abortPostBack();"></p> <p><button id="btnDataItem" runat="server" text="Register DataItem" onclick="btnDataItem_Click"></button> </p> <p></p></contenttemplate></p> <p></p></updatepanel>
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 = "";
var item = e.get_dataItems()[upId];
showMessage("您注册了：" + item);
}
});