当组件位于不同选项卡中时，AsyncFileUpload 在 AjaxControlToolkit 中存在逻辑错误，因此未显示

Question

我正在使用 AjaxControlToolkit 的 11 月版本，并且发现了一个逻辑错误，但我试图在周六之前找到解决此问题的最佳方法，以便该程序可以在 IE 上运行。

该问题仅在IE上有错误，在Firefox3.5上有效。

我的选项卡上有一个 AsyncFileUpload 组件，当该函数运行时，该组件似乎不可见，因此偏移宽度为零。

问题出在文件 AsyncFileUpload.pre.js 的函数 _app_onload 中，以及这一行： this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";

我不想从源代码编译它，但这可能最终是我的最佳选择，这样我就可以修复错误。

但是，这可能是我的解决办法： this._innerTB.style.width = ((this._inputFile.offsetWidth == 0) ? 200 : this._inputFile.offsetWidth) - 107) + "px";

但是，我不知道如果有更好的解决方案。

我可以在我的 javascript 类中编写一个新的原型函数，然后修复逻辑错误，这比重新编译要好。如果我在代码中修复它，那么每当我进行更新时，我都需要不断替换该行，直到它在代码库中得到修复。

但是，我试图弄清楚是否有一种方法可以让元素知道它刚刚变得可见，因为任何时候你需要知道元素的实际宽度，那么在它显示之前你无法真正设置它。我想不出一种方法来知道这一点，所以我倾向于做的是在第一次选择选项卡时修复选项卡上的元素，但是，对于通用库来说，这不是一个可能的解决方案。

主要问题的位置

因此，在发送有关此问题的错误报告之前，我很好奇是否有更好的方法来做到这一点，而不是在页面加载时完成它，并假设最小宽度可能是错误的。 <-- 问题位于此处

我正在使用以下代码来创建元素：

                   <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
                        OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" 
                        OnClientUploadComplete="UploadComplete" 
                        CompleteBackColor="Lime" UploaderStyle="Modern" Width="400px"
                        ErrorBackColor="Red" ThrobberID="Throbber"  
                        onuploadedcomplete="AsyncFileUpload1_UploadedComplete" 
                        UploadingBackColor="#66CCFF" />

如果它有任何区别，我使用它是因为 ToolkitScriptManager 似乎引入了其他错误，但这可能是我的错误：

<ajax:AjaxScriptManager ID="scriptmanager1" runat="server" EnablePartialRendering="true" ></ajax:AjaxScriptManager>

我不确定是否LoadScriptsBeforeUI 会很有用，但我相信我希望在实际加载脚本之前完成 UI。

我发现有趣的是，当 dom 树完成时，我设置的宽度实际上并未设置。

Answer 1

尝试将此属性添加到您的脚本管理器

LoadScriptsBeforeUI="true"

我已经下载了源代码并修复了代码行，但它仍然无法正常工作，
然后我将此属性添加到脚本管理器中，它有效！

如果您想更改源代码，请查看此页面以了解详细信息
http://ajaxcontroltoolkit.codeplex.com/SourceControl/网络/Forks/keyoke/AyncFileUploadFix/changeset/changes/30da4b8d1c6d

Answer 2

这是对我有用的解决方案：

1. Apply CssClass on ajaxToolkit:AsyncFileUpload like "imageUploaderField"

2. 编写Css .imageUploaderField input{width:100%!important;}

源码：http://ajaxcontroltoolkit.codeplex.com/workitem/27429

Answer 3

这不是理想的解决方案，但它确实有效，希望有人能有更好的解决方案，因为这是我无法提交来修复错误的东西。我将其添加到我的 javascript 文件中，但它是一个 hack，不是一个好的解决方案。由于我注释掉了这一行，我不得不替换第二个函数。

$(document).ready(function() {
    Sys.Extended.UI.AsyncFileUpload.prototype._app_onload = function(sender, e) {
        this.setThrobber(false);
        if (this._inputFile != null) {
            if (this._onchange$delegate == null) {
                this._onchange$delegate = Function.createDelegate(this, this._onchange);
                $addHandlers(this._inputFile, {
                    change: this._onchange$delegate
                });
            }
            if (Sys.Browser.agent == Sys.Browser.Firefox) {
                this._inputFile.size = 0;
                var width = this._inputFile.offsetWidth;
                this._inputFile.style.width = "";
                while (this._inputFile.offsetWidth < width) {
                    this._inputFile.size++;
                }
            }
            if (this._innerTB != null) {
                this._inputFile.blur();
                var inputFile = this._inputFile;
                setTimeout(function() { inputFile.blur(); }, 0);
                this._innerTB.style.width = ((this._inputFile.offsetWidth == 0 ? 200 : this._inputFile.offsetWidth) - 107) + "px";
                this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
                if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
                    this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
                    $addHandlers(this._inputFile, {
                        mouseup: this._onmouseup$delegate
                    });
                }
            }
        }
    };

    Sys.UI.DomEvent.prototype._removeHandler = function (elements, eventName, handler) {
        Sys._queryAll(elements, function(element) {
            var browserHandler = null;
//            if ((typeof (element._events) !== 'object') || !element._events) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
            var cache = element._events[eventName];
            if (!(cache instanceof Array)) throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
            for (var i = 0, l = cache.length; i < l; i++) {
                if (cache[i].handler === handler) {
                    browserHandler = cache[i].browserHandler;
                    break;
                }
            }
            if (typeof (browserHandler) !== 'function') throw Error.invalidOperation(Sys.Res.eventHandlerInvalid);
            if (element.removeEventListener) {
                element.removeEventListener(eventName, browserHandler, false);
            }
            else if (element.detachEvent) {
                element.detachEvent('on' + eventName, browserHandler);
            }
            cache.splice(i, 1);
        });
    }

Answer 4

我的解决方案...可能不是最好的，但有效。

 _app_onload: function(sender, e) {
    this.setThrobber(false);
    if (this._inputFile != null) {
        if (this._onchange$delegate == null) {
            this._onchange$delegate = Function.createDelegate(this, this._onchange);
            $addHandlers(this._inputFile, {
                change: this._onchange$delegate
            });
        }
        if (Sys.Browser.agent == Sys.Browser.Firefox) {
            this._inputFile.size = 0;
            var width = this._inputFile.offsetWidth;
            this._inputFile.style.width = "";
            while (this._inputFile.offsetWidth < width) {
                this._inputFile.size++;
            }
        }
        if (this._innerTB != null) {
            this._inputFile.blur();
            var inputFile = this._inputFile;
            setTimeout(function() { inputFile.blur(); }, 0);
            if ((this._inputFile.offsetWidth - 107) >= 1) {
                this._innerTB.style.width = (this._inputFile.offsetWidth - 107) + "px";
                this._inputFile.parentNode.style.width = this._inputFile.offsetWidth + "px";
            }
            if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
                this._onmouseup$delegate = Function.createDelegate(this, this._onmouseup);
                $addHandlers(this._inputFile, {
                    mouseup: this._onmouseup$delegate
                });
            }
        }
    }
},

已在 http://ajaxcontroltoolkit.codeplex.com/SourceControl/network/Forks 分叉/keyoke/AyncFileUploadFix