如何在UpdatePanel的异步回发之后推迟在客户端更新 [英] How to defer the update at the client side after async postback in updatepanel
本文介绍了如何在UpdatePanel的异步回发之后推迟在客户端更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个使用旧系统的UpdatePanel asp.net的
的
的UpdatePanel 的内部更新
灿我莫名其妙地推迟此更新的客户端？这可能吗？
所以它会像，当已启动回传，我设置一个javascript DateTime对象在客户端
一旦回发完成和数据从服务器返回，更新之前的客户端界面，我检查了多少毫秒已通过我的延迟客户端，直到某一毫秒更新已通过
这可能吗？
asp.net 4.5的C＃
让我澄清更好
我想在页面的每个更新是完全500毫秒的AJAX回发请求开始后，
然而，服务器延迟是未知的，在每一个位置的变化
让说，对于人1服务器延迟122毫秒
有关人士2服务器延迟是234
有关人士3中，服务器延迟是444
所以我将不得不推迟在客户端的页面更新
有关的人1：378毫秒
有关的人2：266毫秒
有关的人3：56毫秒
我检查，我发现有一个函数：
Sys.WebForms.PageRequestManager pageLoading事件
所以，如果我能以某种方式重写函数，该函数调用来更新页面，我可以实现
（我仍然不知道什么函数调用来完成在客户端更新操作的）
让我们假设内
Sys.WebForms.PageRequestManager pageLoading事件
updateTheChanges 函数调用
所以，如果我可以覆盖此 updateTheChanges 功能和延迟我叫它可以达到我想要的。
我需要的正是这样的事情，这将覆盖在UpdatePanel的更新功能。这样我就可以调用这个函数的延迟
TY
这里是网络资源文件
- 脚本资源1： HTTP：/ /pastebin.com/0rSCMn3g
- 脚本资源2： http://pastebin.com/GvqwpPv8
在
脚本资源3
函数WebForm_PostBackOptions（的eventTarget，eventArgument，验证的ValidationGroup，actionUrl，trackFocus，clientSubmit）{
this.eventTarget =的eventTarget;
this.eventArgument = eventArgument;
this.validation =验证;
this.validationGroup =的ValidationGroup;
this.actionUrl = actionUrl;
this.trackFocus = trackFocus;
this.clientSubmit = clientSubmit;
}
功能WebForm_DoPostBackWithOptions（选项）{
变种为ValidationResult = TRUE;
如果（options.validation）{
如果（typeof运算（Page_ClientValidate）=='功能'）{
为ValidationResult = Page_ClientValidate（options.validationGroup）;
}
}
如果（为ValidationResult）{
如果（（typeof运算（options.actionUrl）=未定义）及！&放大器;！（options.actionUrl =空） &放大器;及（options.actionUrl.length大于0））{
theForm.action = options.actionUrl;
}
如果（options.trackFocus）{
VAR lastFocus = theForm.elements [__ LASTFOCUS];
如果（（typeof运算（lastFocus）=未定义）及！&安培;！（lastFocus = NULL））{
如果（typeof运算（document.activeElement）==未定义）{
lastFocus.value = options.eventTarget;
}其他{
变种活跃= document.activeElement;
如果（（typeof运算（活性）=未定义）及！&放大器;！（活性=空））！{
如果（（typeof运算（active.id）=未定义）及及（active.id！= NULL）及及（active.id.length大于0））{
lastFocus.value = active.id;
}否则如果（typeof运算（active.name）=未定义！）{
lastFocus.value = active.name;
}
}
}
}
}
}
如果（options.clientSubmit）{
__doPostBack（options.eventTarget ，options.eventArgument）;
}
}
变种__pendingCallbacks =新的Array（）;
变种__synchronousCallBackIndex = -1;
功能WebForm_DoCallback（的eventTarget，eventArgument，eventCallback，背景，errorCallback，useAsync）{
VAR POSTDATA = __theFormPostData +
__CALLBACKID =+ WebForm_EncodeCallback（的eventTarget）+
&放大器; __ CALLBACKPARAM =+ WebForm_EncodeCallback（eventArgument）;
如果（theForm [__ EVENTVALIDATION]）{
POSTDATA + =&放大器; __ EVENTVALIDATION =+ WebForm_EncodeCallback（theForm [__ EVENTVALIDATION]值。）;
}
变种xmlRequest，E;
尝试{
xmlRequest =新的XMLHttpRequest（）;
}赶上（E）{
尝试{
xmlRequest =新的ActiveXObject（Microsoft.XMLHTTP）;
}赶上（E）{}
}
VAR setRequestHeaderMethodExists = TRUE;
尝试{
setRequestHeaderMethodExists =（xmlRequest&安培;&安培; xmlRequest.setRequestHeader）;
}赶上（E）{}
变种回调=新的对象（）;
callback.eventCallback = eventCallback;
callback.context =背景;
callback.errorCallback = errorCallback;
callback.async = useAsync;
VAR callbackIndex = WebForm_FillFirstAvailableSlot（__ pendingCallbacks，回调）;
如果（useAsync！）{
如果（__synchronousCallBackIndex！= -1）{
__pendingCallbacks [__ synchronousCallBackIndex] = NULL;
}
__synchronousCallBackIndex = callbackIndex;
}
如果（setRequestHeaderMethodExists）{
xmlRequest.onreadystatechange = WebForm_CallbackComplete;
callback.xmlRequest = xmlRequest;
//例如HTTP：
变种行动= theForm.action || document.location.pathname，
fragmentIndex = action.indexOf（'＃'）;
如果（fragmentIndex == -1！）{
=行动action.substr（0，fragmentIndex）;
}
如果（__ nonMSDOMBrowser！）{
VAR queryIndex = action.indexOf（？）;
如果（queryIndex == -1！）{
VAR路径= action.substr（0，queryIndex）;
如果（path.indexOf（％）=== -1）{
行动=是encodeURI（路径）+ action.substr（queryIndex）;
}
}否则如果（action.indexOf（％）=== -1）{
行动=是encodeURI（动作）;
}
}
xmlRequest.open（POST，行动，真正的）;
xmlRequest.setRequestHeader（内容类型，应用程序/ x-WWW窗体-urlencoded;字符集= UTF-8）;
xmlRequest.send（POSTDATA）;
的回报;
}
callback.xmlRequest =新的对象（）;
VAR callbackFrameID =__CALLBACKFRAME+ callbackIndex;
VAR xmlRequestFrame = document.frames [callbackFrameID]
如果（xmlRequestFrame！）{
xmlRequestFrame = document.createElement方法（IFRAME）;
xmlRequestFrame.width =1;
xmlRequestFrame.height =1;
xmlRequestFrame.frameBorder =0;
xmlRequestFrame.id = callbackFrameID;
xmlRequestFrame.name = callbackFrameID;
xmlRequestFrame.style.position =绝对;
xmlRequestFrame.style.top =-100px
xmlRequestFrame.style.left =-100px;
尝试{
如果（callBackFrameUrl）{
xmlRequestFrame.src = callBackFrameUrl;
}
}赶上（E）{}
document.body.appendChild（xmlRequestFrame）;
}
VAR间隔= window.setInterval（函数（）{
xmlRequestFrame = document.frames [callbackFrameID];
如果（xmlRequestFrame&安培;&安培; xmlRequestFrame.document）{
window.clearInterval（间隔）;
xmlRequestFrame.document.write（）;
xmlRequestFrame.document.close（）;
xmlRequestFrame.document.write（'< HTML和GT ;<身体GT;<形式方法=邮报><输入类型=隐藏的名字=__ CALLBACKLOADSCRIPTVALUE =T>< /表>< /身体GT;< / HTML> '）;
xmlRequestFrame.document.close（）;
xmlRequestFrame.document.forms [0] .action = theForm.action;
变种数= __theFormPostCollection.length;
变种元;
为（VAR I = 0; I<计数;我++）{
元素= __theFormPostCollection [I];
如果（元素）{
变种的FieldElement = xmlRequestFrame。使用document.createElement（INPUT）;
fieldElement.type =隐藏;
fieldElement.name = element.name;
fieldElement.value = element.value;
xmlRequestFrame.document.forms [0] .appendChild（的FieldElement）;
}
}
VAR callbackIdFieldElement = xmlRequestFrame.document.createElement（INPUT）;
callbackIdFieldElement.type =隐藏;
callbackIdFieldElement.name =__CALLBACKID;
callbackIdFieldElement.value =的eventTarget;
xmlRequestFrame.document.forms [0] .appendChild（callbackIdFieldElement）;
VAR callbackParamFieldElement = xmlRequestFrame.document.createElement（INPUT）;
callbackParamFieldElement.type =隐藏;
callbackParamFieldElement.name =__CALLBACKPARAM;
callbackParamFieldElement.value = eventArgument;
xmlRequestFrame.document.forms [0] .appendChild（callbackParamFieldElement）;
如果（theForm [__ EVENTVALIDATION]）{
VAR callbackValidationFieldElement = xmlRequestFrame.document.createElement（INPUT）;
callbackValidationFieldElement.type =隐藏;
callbackValidationFieldElement.name =__EVENTVALIDATION;
callbackValidationFieldElement.value = theForm [__ EVENTVALIDATION]值。
xmlRequestFrame.document.forms [0] .appendChild（callbackValidationFieldElement）;
}
VAR callbackIndexFieldElement = xmlRequestFrame.document.createElement（INPUT）;
callbackIndexFieldElement.type =隐藏;
callbackIndexFieldElement.name =__CALLBACKINDEX;
callbackIndexFieldElement.value = callbackIndex;
xmlRequestFrame.document.forms [0] .appendChild（callbackIndexFieldElement）;
xmlRequestFrame.document.forms [0] .submit（）;
}
}，10）;
}
功能WebForm_CallbackComplete（）{
为（VAR I = 0; I< __pendingCallbacks.length;我++）{
callbackObject = __pendingCallbacks [I]
如果（callbackObject&放大器;&放大器; callbackObject.xmlRequest&放大器;及（callbackObject.xmlRequest.readyState == 4））{
如果{
__synchronousCallBackIndex（__ pendingCallbacks [I] .async！） = -1;
}
__pendingCallbacks [我] = NULL;
VAR callbackFrameID =__CALLBACKFRAME+我;
变种xmlRequestFrame =的document.getElementById（callbackFrameID）;
如果（xmlRequestFrame）{
xmlRequestFrame.parentNode.removeChild（xmlRequestFrame）;
}
WebForm_ExecuteCallback（callbackObject）;
}
}
}
功能WebForm_ExecuteCallback（callbackObject）{
VAR响应= callbackObject.xmlRequest.responseText; ！如果
（response.charAt（0）==S）{
如果（（typeof运算（callbackObject.eventCallback）=未定义）及和放大器;！（callbackObject.eventCallback = NULL） ）{
callbackObject.eventCallback（response.substring（1），callbackObject.context）;
}
}否则如果（response.charAt（0）==E）{
如果（（typeof运算（callbackObject.errorCallback）=未定义）及！及（ ！callbackObject.errorCallback =空））{
callbackObject.errorCallback（response.substring（1），callbackObject.context）;
}
}其他{
VAR separatorIndex = response.indexOf（|）;
如果（！separatorIndex = -1）{
VAR validationFieldLength = parseInt函数（response.substring（0，separatorIndex））;
如果{
变种validationField = response.substring（separatorIndex + 1，separatorIndex + validationFieldLength + 1）（isNaN（validationFieldLength）！）;
如果（validationField =！）{
VAR validationFieldElement = theForm [__ EVENTVALIDATION];
如果（validationFieldElement！）{
validationFieldElement = document.createElement方法（INPUT）;
validationFieldElement.type =隐藏;
validationFieldElement.name =__EVENTVALIDATION;
theForm.appendChild（validationFieldElement）;
}
validationFieldElement.value = validationField;
}
如果（（typeof运算（callbackObject.eventCallback）=未定义）及！&安培;！（callbackObject.eventCallback = NULL））{
callbackObject.eventCallback（response.substring（ separatorIndex + validationFieldLength +1），callbackObject.context）;
}
}
}
}
}
功能WebForm_FillFirstAvailableSlot（数组元素）{
变种I;
为（i = 0; I< array.length，我++）{
如果突破（数组[I]！）;
}
数组[我] =元素;
回报我;
}
VAR __nonMSDOMBrowser =（window.navigator.appName.toLowerCase（）的indexOf（'探险'）== -1）;
VAR __theFormPostData =;
变种__theFormPostCollection =新的Array（）;
VAR __callbackTextTypes = / ^（文|密码|隐藏|搜索|电话|网址|邮件|号|范围|色|日期时间|日期|本月|本周|时间|日期时间本地）$ / I;
功能WebForm_InitCallback（）{
VAR formElements = theForm.elements，
计数= formElements.length，
元素;
为（VAR I = 0; I<计数;我++）{
元素= formElements [I]
变种的tagName = element.tagName.toLowerCase（）;
如果（的tagName ==输入）{
变种类型= element.type;
如果（（__callbackTextTypes.test（类型）||（（类型==复选框||类型==无线电）及与放大器; element.checked））及及（element.id！ =__EVENTVALIDATION））{
WebForm_InitCallbackAddField（element.name，element.value）;
}
}否则如果（的tagName ==选择）{
VAR selectCount = element.options.length;
为（VAR J = 0; J< selectCount; J ++）{
VAR selectChild = element.options [J]。
如果（selectChild.selected ==真）{
WebForm_InitCallbackAddField（element.name，element.value）;
}
}
}否则如果（的tagName ==文本区域）{
WebForm_InitCallbackAddField（element.name，element.value）;
}
}
}
功能WebForm_InitCallbackAddField（名称，值）{
变种nameValue =新的对象（）;
nameValue.name =名称;
nameValue.value =价值;
__theFormPostCollection [__ theFormPostCollection.length] = nameValue;
__theFormPostData + = WebForm_EncodeCallback（名）+=+ WebForm_EncodeCallback（值）+&放大器;;
}
功能WebForm_EncodeCallback（参数）{
如果（encodeURIComponent）{
返回encodeURIComponent（参数）;
}其他{
返回逃生（参数）;
}
}
变种__disabledControlArray =新的Array（）;
功能WebForm_ReEnableControls（）{
如果（typeof运算（__ enabledControlArray）==未定义）{
返回FALSE;
}
变种disabledIndex = 0;
为（VAR I = 0; I< __enabledControlArray.length;我++）{
变种℃;
如果（__nonMSDOMBrowser）{
C =的document.getElementById（__ enabledControlArray [I]）;
}其他{
C =的document.all [__ enabledControlArray [I]];
}
如果（（typeof运算（C）=未定义）及！&安培;！（C = NULL）及及（c.disabled ==真））{
c.disabled = FALSE;
__disabledControlArray [disabledIndex ++] = C;
}
}
的setTimeout（WebForm_ReDisableControls（），0）;
返回真;
}
功能WebForm_ReDisableControls（）{
为（VAR I = 0; I< __disabledControlArray.length;我++）{
__disabledControlArray [I] .disabled =真正;
}
}
功能WebForm_SimulateClick（元素，事件）{
变种clickEvent;
如果（元素）{
如果（element.click）{
element.click（）;
}其他{
clickEvent = document.createEvent（MouseEvents）;
clickEvent.initMouseEvent（点击，真实的，真实的，窗口，0，0，0，0，0，假的，假的，假的，假的，0，NULL）;
如果{
返回真（element.dispatchEvent（clickEvent）！）;
}
}
event.cancelBubble = TRUE;
如果（event.stopPropagation）{
event.stopPropagation（）;
}
返回FALSE;
}
返回真;
}
功能WebForm_FireDefaultButton（事件目标）{
如果（event.keyCode == 13）{
变种SRC = event.srcElement || event.target;
如果（SRC和放大器;&安培;
（（src.tagName.toLowerCase（）==输入）及和放大器;
（src.type.toLowerCase（）==提交|| src.type.toLowerCase（）==键））||
（（src.tagName.toLowerCase（）==一个）及与放大器;
（src.href ！= NULL）及及（src.href =））||
（src.tagName.toLowerCase（）==文本域））{
返回真！;
}
变种defaultButton;
如果（__nonMSDOMBrowser）{
defaultButton =的document.getElementById（目标）;
}其他{
defaultButton =的document.all [对象]。
}
如果（defaultButton）{
返回WebForm_SimulateClick（defaultButton，事件）;
}
}
返回真;
}
功能WebForm_GetScrollX（）{
如果（__nonMSDOMBrowser）{
返回window.pageXOffset;
}其他{
如果（document.documentElement中和放大器;&安培; document.documentElement.scrollLeft）{
返回document.documentElement.scrollLeft;
}否则，如果（document.body的）{
返回document.body.scrollLeft;
}
}
返回0;
}
功能WebForm_GetScrollY（）{
如果（__nonMSDOMBrowser）{
返回window.pageYOffset;
}其他{
如果（document.documentElement中和放大器;&安培; document.documentElement.scrollTop）{
返回document.documentElement.scrollTop;
}否则，如果（document.body的）{
返回的document.body.scrollTop;
}
}
返回0;
}
功能WebForm_SaveScrollPositionSubmit（）{
如果（__nonMSDOMBrowser）{
theForm.elements ['__ SCROLLPOSITIONY'] =价值window.pageYOffset。
theForm.elements ['__ SCROLLPOSITIONX'] =价值window.pageXOffset。
}其他{
theForm .__ SCROLLPOSITIONX.value = WebForm_GetScrollX（）;
theForm .__ SCROLLPOSITIONY.value = WebForm_GetScrollY（）;
}
如果（（typeof运算（this.oldSubmit）=未定义）及！&放大器;！（this.oldSubmit =空））{
返回this.oldSubmit（）;
}
返回真;
}
功能WebForm_SaveScrollPositionOnSubmit（）{
theForm .__ SCROLLPOSITIONX.value = WebForm_GetScrollX（）;
theForm .__ SCROLLPOSITIONY.value = WebForm_GetScrollY（）;
如果（（typeof运算（this.oldOnSubmit）=未定义）及！&放大器;！（this.oldOnSubmit =空））{
返回this.oldOnSubmit（）;
}
返回真;
}
功能WebForm_RestoreScrollPosition（）{
如果（__nonMSDOMBrowser）{
window.scrollTo（theForm.elements ['__ SCROLLPOSITIONX']。值，theForm.elements [ __SCROLLPOSITIONY']值）。
}其他{
window.scrollTo（theForm .__ SCROLLPOSITIONX.value，theForm .__ SCROLLPOSITIONY.value）;
}
如果（（typeof运算（theForm.oldOnLoad）=未定义）及！&放大器;！（theForm.oldOnLoad =空））{
返回theForm.oldOnLoad（）;
}
返回真;
}
功能WebForm_TextBoxKeyHandler（事件）{
如果（event.keyCode == 13）{
变种目标;
如果（__nonMSDOMBrowser）{
TARGET = event.target;
}其他{
TARGET = event.srcElement;
}
如果（（typeof运算（目标）=未定义）及！及（TARGET = NULL）！）{
如果（typeof运算（target.onchange）=不确定！ ）{
target.onchange（）;
event.cancelBubble = TRUE;
如果（event.stopPropagation）event.stopPropagation（）;
返回FALSE;
}
}
}
返回真;
}
功能WebForm_TrimString（值）{
返回value.replace（/ ^ \s + | \s + $ / g时，''）
}
功能WebForm_AppendToClassName（元素的className）{
变种currentClassName =''+ WebForm_TrimString（element.className）+'';
的className = WebForm_TrimString（的className）;
变种指数= currentClassName.indexOf（'+的className +''）;
如果（指数=== -1）{
element.className =（element.className ===''）？产品类别：element.className +''+的className;
}
}
功能WebForm_RemoveClassName（元素的className）{
变种currentClassName =''+ WebForm_TrimString（element.className）+'';
的className = WebForm_TrimString（的className）;
变种指数= currentClassName.indexOf（'+的className +''）;
如果（索引> = 0）{
element.className = WebForm_TrimString（currentClassName.substring（0，指数）+''+
currentClassName.substring（索引+ className.length + 1 ，currentClassName.length））;
}
}
功能WebForm_GetElementById（elementId）{
如果（的document.getElementById）{
返回的document.getElementById（elementId）;
}否则，如果（的document.all）{
返回的document.all [elementId]
}，否则返回NULL;
}
功能WebForm_GetElementByTagName（元素，标签名）{
VAR元素= WebForm_GetElementsByTagName（元素，标签名）;
如果（元素和放大器;&安培; elements.length大于0）{
返回元素[0];
}，否则返回NULL;
}
功能WebForm_GetElementsByTagName（元素，标签名）{
如果（元素和放大器;&安培;标签名）{
如果（element.getElementsByTagName）{
返回element.getElementsByTagName（标签名）;
}
如果（element.all&安培;&安培; element.all.tags）{
返回element.all.tags（标签名）;
}
}
返回NULL;
}
功能WebForm_GetElementDir（元素）{
如果（元素）{
如果（element.dir）{
返回element.dir;
}
返回WebForm_GetElementDir（element.parentNode）;
}
返回升;
}
功能WebForm_GetElementPosition（元素）{
VAR的结果=新的对象（）;
result.x = 0;
result.y = 0;
result.width = 0;
result.height = 0;
如果（element.offsetParent）{
result.x = element.offsetLeft;
result.y = element.offsetTop;
VAR父= element.offsetParent;
，而（父）{
result.x + = parent.offsetLeft;
result.y + = parent.offsetTop;
VAR parentTagName = parent.tagName.toLowerCase（）;
如果（parentTagName =表和安培;！&安培;！
parentTagName =身体和放大器;&安培;！
parentTagName =HTML&放大器;&安培;
parentTagName！ =格&放大器;&安培;
parent.clientTop&放大器;&安培;
parent.clientLeft）{
result.x + = parent.clientLeft;
result.y + = parent.clientTop;
}
父= parent.offsetParent;
}
}否则如果（element.left&安培;&安培; element.top）{
result.x = element.left;
result.y = element.top;
}其他{
如果（element.x）{
result.x = element.x;
}
如果（element.y）{
result.y = element.y;
}
}
如果（element.offsetWidth&安培;&安培; element.offsetHeight）{
result.width = element.offsetWidth;
result.height = element.offsetHeight;
}否则如果（element.style&安培;&安培; element.style.pixelWidth和放大器;&安培; element.style.pixelHeight）{
result.width = element.style.pixelWidth;
result.height = element.style.pixelHeight;
}
返回结果;
}
功能WebForm_GetParentByTagName（元素，标签名）{
VAR父= element.parentNode;
VAR upperTagName = tagName.toUpperCase（）;
而（父&放大器;及（parent.tagName.toUpperCase（）= upperTagName）！）{
父= parent.parentNode？ parent.parentNode：parent.parentElement;
}
回报父母;
}
功能WebForm_SetElementHeight（元素，高度）{
如果（元素和放大器;&安培; element.style）{
element.style.height =身高+ PX
}
}
功能WebForm_SetElementWidth（元素宽度）{
如果（元素和放大器;&安培; element.style）{
element.style。宽度=宽度+PX
}
}
功能WebForm_SetElementX（元素，X）{
如果（元素和放大器;&安培; element.style）{
element.style。左= X +像素;
}
}
功能WebForm_SetElementY（元素，Y）{
如果（元素和放大器;&安培; element.style）{
element.style。顶部= Y +PX
}
}
解决方案
下面是延缓UpdatePanel的刷新无严寒用户界面的方式：
- 在
pageLoading事件处理程序，保存ID和面板的前面的HTML进行更新 - 在
页面加载事件处理程序，保存面板的新的HTML，而是由旧 - 延迟过期后替换它，请在更新面板新的HTML
下面是客户端代码：
<脚本类型=文/ JavaScript的> ;
变种录入= 0;
VAR updatedPanelArray = [];
功能setUpdateTime（）{
录入=新的日期（Date.now（）+ 500）;
}
功能pageLoading（发件人，发送）{
updatedPanelArray.length = 0;
VAR板= e.get_panelsUpdating（）;
为（VAR I = 0; I< panels.length;我++）{
VAR PNL =板[I]
updatedPanelArray.push（{ID：pnl.id，oldHTML：pnl.innerHTML}）;
}
}
功能页面加载（发件人，发送）{
如果（e.get_isPartialLoad（））{
为（VAR I = 0; I< updatedPanelArray.length;我++）{
VAR updatedPanel = updatedPanelArray [I]
变种PNL =的document.getElementById（updatedPanel.id）;
updatedPanel.newHTML = pnl.innerHTML;
pnl.innerHTML = updatedPanel.oldHTML;
的setTimeout（refreshUpdatePanel，录入 - Date.now（））;
}
}
}
功能refreshUpdatePanel（）{
为（VAR I = 0; I< updatedPanelArray.length;我++）{
VAR updatedPanel = updatedPanelArray [I]
变种PNL =的document.getElementById（updatedPanel.id）;
pnl.innerHTML = updatedPanel.newHTML;
}
}
Sys.WebForms.PageRequestManager.getInstance（）add_pageLoading（pageLoading）。
< / SCRIPT>
更新时间触发异步回发之前设置：
< ASP：的UpdatePanel =服务器的UpdateMode =条件>
<&的ContentTemplate GT;
< ASP：标签ID =lblUpdatePanel1=服务器/>
< ASP：按钮的ID =btnUpdatePanel=服务器的OnClientClick =setUpdateTime（）;的OnClick =btnUpdatePanel_Click/>
< /&的ContentTemplate GT;
< / ASP：的UpdatePanel>
它可以在代码隐藏（建议下面的事件处理进行测试：延时设置为5000 MS中的Javascript代码，使其明显）：
保护无效btnUpdatePanel_Click（对象发件人，EventArgs五）
{
lblUpdatePanel1.Text = DateTime.Now.ToString（）;
}
I have an old system which uses UpdatePanels of asp.net
After the postback is completed, we know that the inside of UpdatePanel is updated
Can i delay this update somehow on the client side ? is that possible?
So it will be like, when the postback is started, i set a javascript datetime object on the client side
Once the postback is completed, and the data is returned from the server, before updating the client side interface, i check how many miliseconds has passed and I delay the update of the client side until certain miliseconds has passed
is this possible?
asp.net 4.5 c#
let me clarify better
i want each update of the page to be exactly 500 miliseconds after the ajax postback request started
however the server delay is unknown and changes for the every location
let say that for person 1 the server delay is 122 ms
for person 2 the server delay is 234
for person 3 the server delay is 444
so i would be have to delay the page update at the client side
for the person 1 : 378 ms
for the person 2 : 266 ms
for the person 3 : 56 ms
i have checked and i found that there is a function :
Sys.WebForms.PageRequestManager pageLoading Event
so if i can somehow override the function that this function calls to update the page i can achieve
(i still dont know what function it calls to complete the update operation on the client side)
lets assume that inside
Sys.WebForms.PageRequestManager pageLoading Event
updateTheChanges function is called
so if i can override this updateTheChanges function and call it with a delay i can achieve what i want
I need exactly something like this which will overwrite the update function of the updatepanel. So i can call this function with a delay
ASP.Net Webforms w/ AJAX Slow Rendering
ty
here the web resource files
- script resource 1 : http://pastebin.com/0rSCMn3g
- script resource 2 : http://pastebin.com/GvqwpPv8
script resource 3 below
function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {
this.eventTarget = eventTarget;
this.eventArgument = eventArgument;
this.validation = validation;
this.validationGroup = validationGroup;
this.actionUrl = actionUrl;
this.trackFocus = trackFocus;
this.clientSubmit = clientSubmit;
}
function WebForm_DoPostBackWithOptions(options) {
var validationResult = true;
if (options.validation) {
if (typeof(Page_ClientValidate) == 'function') {
validationResult = Page_ClientValidate(options.validationGroup);
}
}
if (validationResult) {
if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {
theForm.action = options.actionUrl;
}
if (options.trackFocus) {
var lastFocus = theForm.elements["__LASTFOCUS"];
if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {
if (typeof(document.activeElement) == "undefined") {
lastFocus.value = options.eventTarget;
} else {
var active = document.activeElement;
if ((typeof(active) != "undefined") && (active != null)) {
if ((typeof(active.id) != "undefined") && (active.id != null) && (active.id.length > 0)) {
lastFocus.value = active.id;
} else if (typeof(active.name) != "undefined") {
lastFocus.value = active.name;
}
}
}
}
}
}
if (options.clientSubmit) {
__doPostBack(options.eventTarget, options.eventArgument);
}
}
var __pendingCallbacks = new Array();
var __synchronousCallBackIndex = -1;
function WebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync) {
var postData = __theFormPostData +
"__CALLBACKID=" + WebForm_EncodeCallback(eventTarget) +
"&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
if (theForm["__EVENTVALIDATION"]) {
postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
}
var xmlRequest, e;
try {
xmlRequest = new XMLHttpRequest();
} catch (e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
var setRequestHeaderMethodExists = true;
try {
setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
} catch (e) {}
var callback = new Object();
callback.eventCallback = eventCallback;
callback.context = context;
callback.errorCallback = errorCallback;
callback.async = useAsync;
var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
if (!useAsync) {
if (__synchronousCallBackIndex != -1) {
__pendingCallbacks[__synchronousCallBackIndex] = null;
}
__synchronousCallBackIndex = callbackIndex;
}
if (setRequestHeaderMethodExists) {
xmlRequest.onreadystatechange = WebForm_CallbackComplete;
callback.xmlRequest = xmlRequest;
// e.g. http:
var action = theForm.action || document.location.pathname,
fragmentIndex = action.indexOf('#');
if (fragmentIndex !== -1) {
action = action.substr(0, fragmentIndex);
}
if (!__nonMSDOMBrowser) {
var queryIndex = action.indexOf('?');
if (queryIndex !== -1) {
var path = action.substr(0, queryIndex);
if (path.indexOf("%") === -1) {
action = encodeURI(path) + action.substr(queryIndex);
}
} else if (action.indexOf("%") === -1) {
action = encodeURI(action);
}
}
xmlRequest.open("POST", action, true);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
xmlRequest.send(postData);
return;
}
callback.xmlRequest = new Object();
var callbackFrameID = "__CALLBACKFRAME" + callbackIndex;
var xmlRequestFrame = document.frames[callbackFrameID];
if (!xmlRequestFrame) {
xmlRequestFrame = document.createElement("IFRAME");
xmlRequestFrame.width = "1";
xmlRequestFrame.height = "1";
xmlRequestFrame.frameBorder = "0";
xmlRequestFrame.id = callbackFrameID;
xmlRequestFrame.name = callbackFrameID;
xmlRequestFrame.style.position = "absolute";
xmlRequestFrame.style.top = "-100px"
xmlRequestFrame.style.left = "-100px";
try {
if (callBackFrameUrl) {
xmlRequestFrame.src = callBackFrameUrl;
}
} catch (e) {}
document.body.appendChild(xmlRequestFrame);
}
var interval = window.setInterval(function() {
xmlRequestFrame = document.frames[callbackFrameID];
if (xmlRequestFrame && xmlRequestFrame.document) {
window.clearInterval(interval);
xmlRequestFrame.document.write("");
xmlRequestFrame.document.close();
xmlRequestFrame.document.write('<html><body><form method="post"><input type="hidden" name="__CALLBACKLOADSCRIPT" value="t"></form></body></html>');
xmlRequestFrame.document.close();
xmlRequestFrame.document.forms[0].action = theForm.action;
var count = __theFormPostCollection.length;
var element;
for (var i = 0; i < count; i++) {
element = __theFormPostCollection[i];
if (element) {
var fieldElement = xmlRequestFrame.document.createElement("INPUT");
fieldElement.type = "hidden";
fieldElement.name = element.name;
fieldElement.value = element.value;
xmlRequestFrame.document.forms[0].appendChild(fieldElement);
}
}
var callbackIdFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackIdFieldElement.type = "hidden";
callbackIdFieldElement.name = "__CALLBACKID";
callbackIdFieldElement.value = eventTarget;
xmlRequestFrame.document.forms[0].appendChild(callbackIdFieldElement);
var callbackParamFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackParamFieldElement.type = "hidden";
callbackParamFieldElement.name = "__CALLBACKPARAM";
callbackParamFieldElement.value = eventArgument;
xmlRequestFrame.document.forms[0].appendChild(callbackParamFieldElement);
if (theForm["__EVENTVALIDATION"]) {
var callbackValidationFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackValidationFieldElement.type = "hidden";
callbackValidationFieldElement.name = "__EVENTVALIDATION";
callbackValidationFieldElement.value = theForm["__EVENTVALIDATION"].value;
xmlRequestFrame.document.forms[0].appendChild(callbackValidationFieldElement);
}
var callbackIndexFieldElement = xmlRequestFrame.document.createElement("INPUT");
callbackIndexFieldElement.type = "hidden";
callbackIndexFieldElement.name = "__CALLBACKINDEX";
callbackIndexFieldElement.value = callbackIndex;
xmlRequestFrame.document.forms[0].appendChild(callbackIndexFieldElement);
xmlRequestFrame.document.forms[0].submit();
}
}, 10);
}
function WebForm_CallbackComplete() {
for (var i = 0; i < __pendingCallbacks.length; i++) {
callbackObject = __pendingCallbacks[i];
if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
if (!__pendingCallbacks[i].async) {
__synchronousCallBackIndex = -1;
}
__pendingCallbacks[i] = null;
var callbackFrameID = "__CALLBACKFRAME" + i;
var xmlRequestFrame = document.getElementById(callbackFrameID);
if (xmlRequestFrame) {
xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
}
WebForm_ExecuteCallback(callbackObject);
}
}
}
function WebForm_ExecuteCallback(callbackObject) {
var response = callbackObject.xmlRequest.responseText;
if (response.charAt(0) == "s") {
if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {
callbackObject.eventCallback(response.substring(1), callbackObject.context);
}
} else if (response.charAt(0) == "e") {
if ((typeof(callbackObject.errorCallback) != "undefined") && (callbackObject.errorCallback != null)) {
callbackObject.errorCallback(response.substring(1), callbackObject.context);
}
} else {
var separatorIndex = response.indexOf("|");
if (separatorIndex != -1) {
var validationFieldLength = parseInt(response.substring(0, separatorIndex));
if (!isNaN(validationFieldLength)) {
var validationField = response.substring(separatorIndex + 1, separatorIndex + validationFieldLength + 1);
if (validationField != "") {
var validationFieldElement = theForm["__EVENTVALIDATION"];
if (!validationFieldElement) {
validationFieldElement = document.createElement("INPUT");
validationFieldElement.type = "hidden";
validationFieldElement.name = "__EVENTVALIDATION";
theForm.appendChild(validationFieldElement);
}
validationFieldElement.value = validationField;
}
if ((typeof(callbackObject.eventCallback) != "undefined") && (callbackObject.eventCallback != null)) {
callbackObject.eventCallback(response.substring(separatorIndex + validationFieldLength + 1), callbackObject.context);
}
}
}
}
}
function WebForm_FillFirstAvailableSlot(array, element) {
var i;
for (i = 0; i < array.length; i++) {
if (!array[i]) break;
}
array[i] = element;
return i;
}
var __nonMSDOMBrowser = (window.navigator.appName.toLowerCase().indexOf('explorer') == -1);
var __theFormPostData = "";
var __theFormPostCollection = new Array();
var __callbackTextTypes = /^(text|password|hidden|search|tel|url|email|number|range|color|datetime|date|month|week|time|datetime-local)$/i;
function WebForm_InitCallback() {
var formElements = theForm.elements,
count = formElements.length,
element;
for (var i = 0; i < count; i++) {
element = formElements[i];
var tagName = element.tagName.toLowerCase();
if (tagName == "input") {
var type = element.type;
if ((__callbackTextTypes.test(type) || ((type == "checkbox" || type == "radio") && element.checked)) && (element.id != "__EVENTVALIDATION")) {
WebForm_InitCallbackAddField(element.name, element.value);
}
} else if (tagName == "select") {
var selectCount = element.options.length;
for (var j = 0; j < selectCount; j++) {
var selectChild = element.options[j];
if (selectChild.selected == true) {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
} else if (tagName == "textarea") {
WebForm_InitCallbackAddField(element.name, element.value);
}
}
}
function WebForm_InitCallbackAddField(name, value) {
var nameValue = new Object();
nameValue.name = name;
nameValue.value = value;
__theFormPostCollection[__theFormPostCollection.length] = nameValue;
__theFormPostData += WebForm_EncodeCallback(name) + "=" + WebForm_EncodeCallback(value) + "&";
}
function WebForm_EncodeCallback(parameter) {
if (encodeURIComponent) {
return encodeURIComponent(parameter);
} else {
return escape(parameter);
}
}
var __disabledControlArray = new Array();
function WebForm_ReEnableControls() {
if (typeof(__enabledControlArray) == 'undefined') {
return false;
}
var disabledIndex = 0;
for (var i = 0; i < __enabledControlArray.length; i++) {
var c;
if (__nonMSDOMBrowser) {
c = document.getElementById(__enabledControlArray[i]);
} else {
c = document.all[__enabledControlArray[i]];
}
if ((typeof(c) != "undefined") && (c != null) && (c.disabled == true)) {
c.disabled = false;
__disabledControlArray[disabledIndex++] = c;
}
}
setTimeout("WebForm_ReDisableControls()", 0);
return true;
}
function WebForm_ReDisableControls() {
for (var i = 0; i < __disabledControlArray.length; i++) {
__disabledControlArray[i].disabled = true;
}
}
function WebForm_SimulateClick(element, event) {
var clickEvent;
if (element) {
if (element.click) {
element.click();
} else {
clickEvent = document.createEvent("MouseEvents");
clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
if (!element.dispatchEvent(clickEvent)) {
return true;
}
}
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
return false;
}
return true;
}
function WebForm_FireDefaultButton(event, target) {
if (event.keyCode == 13) {
var src = event.srcElement || event.target;
if (src &&
((src.tagName.toLowerCase() == "input") &&
(src.type.toLowerCase() == "submit" || src.type.toLowerCase() == "button")) ||
((src.tagName.toLowerCase() == "a") &&
(src.href != null) && (src.href != "")) ||
(src.tagName.toLowerCase() == "textarea")) {
return true;
}
var defaultButton;
if (__nonMSDOMBrowser) {
defaultButton = document.getElementById(target);
} else {
defaultButton = document.all[target];
}
if (defaultButton) {
return WebForm_SimulateClick(defaultButton, event);
}
}
return true;
}
function WebForm_GetScrollX() {
if (__nonMSDOMBrowser) {
return window.pageXOffset;
} else {
if (document.documentElement && document.documentElement.scrollLeft) {
return document.documentElement.scrollLeft;
} else if (document.body) {
return document.body.scrollLeft;
}
}
return 0;
}
function WebForm_GetScrollY() {
if (__nonMSDOMBrowser) {
return window.pageYOffset;
} else {
if (document.documentElement && document.documentElement.scrollTop) {
return document.documentElement.scrollTop;
} else if (document.body) {
return document.body.scrollTop;
}
}
return 0;
}
function WebForm_SaveScrollPositionSubmit() {
if (__nonMSDOMBrowser) {
theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;
theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;
} else {
theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
}
if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {
return this.oldSubmit();
}
return true;
}
function WebForm_SaveScrollPositionOnSubmit() {
theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
if ((typeof(this.oldOnSubmit) != "undefined") && (this.oldOnSubmit != null)) {
return this.oldOnSubmit();
}
return true;
}
function WebForm_RestoreScrollPosition() {
if (__nonMSDOMBrowser) {
window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
} else {
window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
}
if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
return theForm.oldOnLoad();
}
return true;
}
function WebForm_TextBoxKeyHandler(event) {
if (event.keyCode == 13) {
var target;
if (__nonMSDOMBrowser) {
target = event.target;
} else {
target = event.srcElement;
}
if ((typeof(target) != "undefined") && (target != null)) {
if (typeof(target.onchange) != "undefined") {
target.onchange();
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false;
}
}
}
return true;
}
function WebForm_TrimString(value) {
return value.replace(/^\s+|\s+$/g, '')
}
function WebForm_AppendToClassName(element, className) {
var currentClassName = ' ' + WebForm_TrimString(element.className) + ' ';
className = WebForm_TrimString(className);
var index = currentClassName.indexOf(' ' + className + ' ');
if (index === -1) {
element.className = (element.className === '') ? className : element.className + ' ' + className;
}
}
function WebForm_RemoveClassName(element, className) {
var currentClassName = ' ' + WebForm_TrimString(element.className) + ' ';
className = WebForm_TrimString(className);
var index = currentClassName.indexOf(' ' + className + ' ');
if (index >= 0) {
element.className = WebForm_TrimString(currentClassName.substring(0, index) + ' ' +
currentClassName.substring(index + className.length + 1, currentClassName.length));
}
}
function WebForm_GetElementById(elementId) {
if (document.getElementById) {
return document.getElementById(elementId);
} else if (document.all) {
return document.all[elementId];
} else return null;
}
function WebForm_GetElementByTagName(element, tagName) {
var elements = WebForm_GetElementsByTagName(element, tagName);
if (elements && elements.length > 0) {
return elements[0];
} else return null;
}
function WebForm_GetElementsByTagName(element, tagName) {
if (element && tagName) {
if (element.getElementsByTagName) {
return element.getElementsByTagName(tagName);
}
if (element.all && element.all.tags) {
return element.all.tags(tagName);
}
}
return null;
}
function WebForm_GetElementDir(element) {
if (element) {
if (element.dir) {
return element.dir;
}
return WebForm_GetElementDir(element.parentNode);
}
return "ltr";
}
function WebForm_GetElementPosition(element) {
var result = new Object();
result.x = 0;
result.y = 0;
result.width = 0;
result.height = 0;
if (element.offsetParent) {
result.x = element.offsetLeft;
result.y = element.offsetTop;
var parent = element.offsetParent;
while (parent) {
result.x += parent.offsetLeft;
result.y += parent.offsetTop;
var parentTagName = parent.tagName.toLowerCase();
if (parentTagName != "table" &&
parentTagName != "body" &&
parentTagName != "html" &&
parentTagName != "div" &&
parent.clientTop &&
parent.clientLeft) {
result.x += parent.clientLeft;
result.y += parent.clientTop;
}
parent = parent.offsetParent;
}
} else if (element.left && element.top) {
result.x = element.left;
result.y = element.top;
} else {
if (element.x) {
result.x = element.x;
}
if (element.y) {
result.y = element.y;
}
}
if (element.offsetWidth && element.offsetHeight) {
result.width = element.offsetWidth;
result.height = element.offsetHeight;
} else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
result.width = element.style.pixelWidth;
result.height = element.style.pixelHeight;
}
return result;
}
function WebForm_GetParentByTagName(element, tagName) {
var parent = element.parentNode;
var upperTagName = tagName.toUpperCase();
while (parent && (parent.tagName.toUpperCase() != upperTagName)) {
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}
function WebForm_SetElementHeight(element, height) {
if (element && element.style) {
element.style.height = height + "px";
}
}
function WebForm_SetElementWidth(element, width) {
if (element && element.style) {
element.style.width = width + "px";
}
}
function WebForm_SetElementX(element, x) {
if (element && element.style) {
element.style.left = x + "px";
}
}
function WebForm_SetElementY(element, y) {
if (element && element.style) {
element.style.top = y + "px";
}
}
解决方案
Here is a way to delay the UpdatePanel refresh without freezing the user interface:
- In the
pageLoadingevent handler, save the ID and the previous HTML of the panels to be updated - In the
pageLoadevent handler, save the new HTML of the panels but replace it by the old one - After the delay expires, set the new HTML in the updated panels
Here is the client code:
<script type="text/javascript">
var updateTime = 0;
var updatedPanelArray = [];
function setUpdateTime() {
updateTime = new Date(Date.now() + 500);
}
function pageLoading(sender, e) {
updatedPanelArray.length = 0;
var panels = e.get_panelsUpdating();
for (var i = 0; i < panels.length; i++) {
var pnl = panels[i];
updatedPanelArray.push({ id: pnl.id, oldHTML: pnl.innerHTML });
}
}
function pageLoad(sender, e) {
if (e.get_isPartialLoad()) {
for (var i = 0; i < updatedPanelArray.length; i++) {
var updatedPanel = updatedPanelArray[i];
var pnl = document.getElementById(updatedPanel.id);
updatedPanel.newHTML = pnl.innerHTML;
pnl.innerHTML = updatedPanel.oldHTML;
setTimeout(refreshUpdatePanel, updateTime - Date.now());
}
}
}
function refreshUpdatePanel() {
for (var i = 0; i < updatedPanelArray.length; i++) {
var updatedPanel = updatedPanelArray[i];
var pnl = document.getElementById(updatedPanel.id);
pnl.innerHTML = updatedPanel.newHTML;
}
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoading);
</script>
The update time is set before triggering the asynchronous postback:
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblUpdatePanel1" runat="server" />
<asp:Button ID="btnUpdatePanel" runat="server" OnClientClick="setUpdateTime();" OnClick="btnUpdatePanel_Click" />
</ContentTemplate>
</asp:UpdatePanel>
It can be tested with the following event handler in code-behind (suggestion: set the delay to 5000 ms in the Javascript code to make it obvious):
protected void btnUpdatePanel_Click(object sender, EventArgs e)
{
lblUpdatePanel1.Text = DateTime.Now.ToString();
}
这篇关于如何在UpdatePanel的异步回发之后推迟在客户端更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
