亂馬客

問題
之前有在MSDN論談上問Asp.NET 2.0 Callback在Server端有辦法讀到其他欄位的Current的值嗎?
因為筆者在之前在asp.net 1.1中的程式有用了大量的Callback，移植到了asp.net 2.0時，就發現了這個問題!造成筆者很大的困擾，因為原本在1.1中用的好好的，到了2.0就有這問題，導致很多方式都改成了用Postback的方式，不過，因為實在有太多東西還是要用Callback，所以再研究下去，最後終於發現了問題所在!
請看以下圖1~3。


 

解決方式
看到了圖3，就發現2.0的Callback讀到的值都是Server Render到Client的值，當Client去改變Textbox的值而不postback時，這時callback到Server端讀到的就還會是舊的值。
 解法1，
 就是把那些要在Server端讀取的Textbox設定AutoPostback="true"，這樣當我按下「比較A&B」的Button就可以讀到正確的txtA的值了。 不過，這樣好像粉瞎哦!

想了一下，當我按下「比較A&B」的Button時，它到底做了那些事呢?


看了上圖(圖4)後發現它是Call WebForm_DoCallback這個function，所以就再看這個function裡面在做什麼?
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; xmlRequest.open("POST", theForm.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)) { WebForm_ExecuteCallback(callbackObject); if (!__pendingCallbacks[i].async) { __synchronousCallBackIndex = -1; } __pendingCallbacks[i] = null; var callbackFrameID = "__CALLBACKFRAME" + i; var xmlRequestFrame = document.getElementById(callbackFrameID); if (xmlRequestFrame) { xmlRequestFrame.parentNode.removeChild(xmlRequestFrame); } } } } 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(); function WebForm_InitCallback() { var count = theForm.elements.length; var element; for (var i = 0; i < count; i++) { element = theForm.elements[i]; var tagName = element.tagName.toLowerCase(); if (tagName == "input") { var type = element.type; if ((type == "text" || type == "hidden" || type == "password" || ((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_FireDefaultButton(event, target) { if (event.keyCode == 13) { var src = event.srcElement || event.target; if (!src || (src.tagName.toLowerCase() != "textarea")) { var defaultButton; if (__nonMSDOMBrowser) { defaultButton = document.getElementById(target); } else { defaultButton = document.all[target]; } if (defaultButton && typeof(defaultButton.click) != "undefined") { defaultButton.click(); event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); return false; } } } 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"; } }


裡面__theFormPostData這個變數是那裡指定的呢? 再往下看下去，原來是在WebForm_InitCallbackAddField function中有用到 ，那誰用到WebForm_InitCallbackAddField這個function呢? 是在WebForm_InitCallback function之中。
看了WebForm_InitCallback這個function的內容後，發現它是在組Client各input的值，然後放在__theFormPostData中，然後給WebForm_DoCallback去callback到Server，那又是誰來Call它的呢?
找了一下，檢視原始檔就發現以下的Code,
<script type="text/javascript"> //<![CDATA[ WebForm_InitCallback();//]]> </script>



謎題解開了，原來是頁面一Render出來就Run了，難怪取不到後來User改的值。
解法2,
新增一個JS File(如範例CustCallback.js)，然後覆寫WebForm_DoCallback這個Function，然後在最前面清掉__theFormPostData的值，再呼叫WebForm_InitCallback這個function， 然後把這個JS File(CustCallback.js)加入到頁面之中，如範例CustCallBack.aspx。這樣就可以在每次Callback時，在Server端取到了畫面上最新的值了!

//先把舊的Function存起來! var __oldWebForm_DoCallback = WebForm_DoCallback; //覆寫MS的Callback Function以解決在Server端無法取得其他input的現值 WebForm_DoCallback = function newWebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync) { // add __theFormPostData = ""; WebForm_InitCallback(); // add __oldWebForm_DoCallback(eventTarget, eventArgument, eventCallback, context, errorCallback, useAsync); }



 

附件測試程式(Default.aspx是使用原生的Callback, CustCallBack.aspx是有引用客制化過的Js)， 

CallBack.rar


 

Hi, 

亂馬客Blog已移到了 「亂馬客​ : Re:從零開始的軟體開發生活」

請大家繼續支持 ^_^