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"; } } 4 Answers
Answers 1
If you don't mind the user interface being frozen while waiting, you can delay the refresh by keeping the pageLoad event handler busy until the delay expires:
<script type="text/javascript"> var updateTime = 0; function setUpdateTime() { updateTime = new Date(Date.now() + 500); } function pageLoad(sender, e) { if (e.get_isPartialLoad()) { while (Date.now() < updateTime) { // Loop until the delay expires } } } </script> You can initialize the update time before triggering the asynchronous postback:
<asp:UpdatePanel runat="server" UpdateMode="Conditional"> <ContentTemplate> ... <asp:Button ID="btn1" runat="server" OnClientClick="setUpdateTime();" ... /> </ContentTemplate> </asp:UpdatePanel> Answers 2
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:Button ID="btn1" runat="server" OnClientClick="setUpdateTime();" ... /> </ContentTemplate> </asp:UpdatePanel> Answers 3
You could delay the server side, so all the delays would be more or less equals for everyone.
If this is not an option, you could have a hidden field inside the update panel (or somewhere else). The function that handles the update (in the server side) would calculate the time it took execute, and before finishing, would update this hidden field. Now back in the client side, check the value of this field and calculate the difference between this value and yours 500ms. You could use datetimes or milliseconds.
It's not the prettiest solution but imho, this is not a frequent problem that people want to handle (in fact, I dont think that you should delay a faster response to the slowest one)
Answers 4
Use UpdatePanel.UpdateMode Property to gets or sets a value that indicates when an UpdatePanel control's content is updated. For more details visit this link.
0 comments:
Post a Comment