为什么 DotNetNuke 意外地替换了我的 DOM 元素

Question

我正在开发一个 9.13 DotNetNuke 自定义模块，并且在我的设置页面之一上有一个自定义输入字段，用于将文件上传到我的 API 控制器，但每当我尝试向服务器发出任何 ajax 请求时，DNN 都会自动替换我的文件输入字段样式，因此它创建了一个带有

dnnInputFileWrapper

类的跨度，并且它覆盖了我原来的输入字段。此外，它还删除了事件处理程序。这是我的 DOM 在 ajax 请求之前的样子：

<div class="btn btn-primary btn-file" tabindex="500">
   <i class="bi-folder2-open"></i>
   <span class="hidden-xs">Browse …</span>
   <input id="my-input" type="file" multiple="">
</div>

之后：

<div class="btn btn-primary btn-file" tabindex="500">
   <i class="bi-folder2-open"></i>  
   <span class="hidden-xs">Browse …</span>
   <span class="dnnInputFileWrapper dnnSecondaryAction">Choose File
      <input id="my-input" type="file" multiple="">
   </span>
</div>

UI 看起来像这样：

我尝试覆盖默认的 DotNetNuke CSS 类，它工作得很好，直到我遇到删除事件处理程序的问题

Answer 1

我找到了答案。如果您遇到问题，您应该将“normalFileUpload”类添加到您的输入字段 type="file"。

在期待 DotNetNuke dnn.jquery.js 文件之后，我找到了处理包装功能的函数和允许我们避免这种行为的代码行，它看起来像这样：

(function ($) {
    $.fn.dnnFileInput = function (options) {
        var opts = $.extend({}, $.fn.dnnFileInput.defaultOptions, options);

        return this.each(function () {
            var $ctrl = $(this);
            if ($ctrl.hasClass('normalFileUpload')) return;

            if (this.wrapper)
                return;

            //ignore decoration for elements in rad control.
            if ($ctrl.parents().hasClass("RadUpload"))
                return;

            // if this.wrapper is undefined, then we check if parent node is a wrapper
            if (this.parentNode && this.parentNode.tagName.toLowerCase() == 'span' && $ctrl.parent().hasClass('dnnInputFileWrapper')) {
                return;
            }

            this.wrapper = $("<span class='dnnInputFileWrapper " + opts.buttonClass + "'></span>");
            var text = $ctrl.data('text');
            text = text || 'Choose File';
            this.wrapper.text(text);
            $ctrl.wrap(this.wrapper);
            $ctrl.data("wrapper", $ctrl.parent());

            if (opts.showSelectedFileNameAsButtonText) {
                $ctrl.change(function () {
                    var val = $(this).val();
                    if (val != '') {
                        var lastIdx = val.lastIndexOf('\\') + 1;
                        val = val.substring(lastIdx, val.length);
                    } else {
                        val = text;
                    }
                    $(this).data("wrapper").get(0).childNodes[0].nodeValue = val;
                });
            }
        });
    };

    $.fn.dnnFileInput.defaultOptions = {
        buttonClass: 'dnnSecondaryAction',
        showSelectedFileNameAsButtonText: true
    };})(jQuery);

至少它可以与 DNN 版本 9.13 配合使用