不显眼的 AJAX，上传文件和模态不起作用 - 提交时模态没有关闭

问题描述

我正在处理 ASP.NET Core 项目，并且在模态中我有一个表单，我需要在其中上传文件。我也使用不显眼的 AJAX 来提交表单。起初我无法上传文件，所以我找到了这个解决方案：

Upload is null after adding jquery.unobtrusive-ajax.js reference

我在表单中添加了 data-ext="true"。我的表单处于模态，当我单击按钮时显示模态：

<form asp-area="@Areas.ObserverArea" asp-controller="@WebControllers.BrandController" asp-action="@ObserverActions.SaveBrand" enctype="multipart/form-data" method="POST" data-ext="true" data-ajax-begin="ajaxValidation" data-ajax-method="POST" data-ajax-mode="replace-with" data-ajax-update="#brandList" id="submit-form">

并且正在上传文件，创建品牌等，后端的一切正常，但是即使我单击关闭按钮，模态也不会关闭，因此为了“删除”模态，我需要刷新页面。我还有其他一些地方，不显眼的 AJAX 和模态都可以正常工作 - 只有我上传文件时才会发生这种情况。

编辑 1：

这是模态的全部代码：

<div class="modal" id="addBrand">
<form asp-area="@Areas.ObserverArea" asp-controller="@WebControllers.BrandController" asp-action="@ObserverActions.SaveBrand" enctype="multipart/form-data" method="POST" data-ajax="true" data-ajax-begin="ajaxValidation" data-ajax-method="POST" data-ajax-mode="replace-with" data-ajax-update="#brandList" id="submit-form">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title float-left">Add New Brand</h4>
                <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close" onclick="$('#addBrand').hide()">
                    <span aria-hidden="true" class="float-right">×</span>
                </button>

            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="BrandName">Brand Name</label>
                    <input required class="form-control" placeholder="Enter Brand Name" name="BrandName" type="text">
                </div>
                <div class="form-group">
                    <label for="KPBrandId">Kinesis Brand Id</label>
                    <input required class="form-control" placeholder="Enter Kinesis Brand Id" name="KinesisBrandId" type="text">
                </div>
                <div class="form-group">
                    <label for="file">Brand logo</label>
                    <input type="file" name="file">
                    <input type="hidden" name="test" value="33test" />
                </div>
            </div>
            <div class="modal-footer">
                @Html.HiddenFor(x => x.CategoryId)
                <button type="button" class="btn btn-default btn-flat pull-right btn-margin-5" onclick="$('#addBrand').hide()" data-dismiss="modal">Close</button>
                <button type="submit" id="saveButton" class="btn btn-primary btn-flat pull-right">Save</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</form>

编辑 2： 这是不引人注目的ajax的代码，在我根据我分享的帖子修改之后。现在在模态中我没有 data-ext="true"，但我也用它进行了测试。我忘记提及的一件事 - 我正在使用的不显眼的 ajax 库包含在我下载的 Admin LTE 模板中。

(function ($) {
    var data_click = "unobtrusiveAjaxClick",data_target = "unobtrusiveAjaxClickTarget",data_validation = "unobtrusiveValidation";

    function getFunction(code,argNames) {
        var fn = window,parts = (code || "").split(".");
        while (fn && parts.length) {
            fn = fn[parts.shift()];
        }
        if (typeof (fn) === "function") {
            return fn;
        }
        argNames.push(code);
        return Function.constructor.apply(null,argNames);
    }

    function isMethodProxySafe(method) {
        return method === "GET" || method === "POST";
    }

    function asyncOnBeforeSend(xhr,method) {
        if (!isMethodProxySafe(method)) {
            xhr.setRequestHeader("X-HTTP-Method-Override",method);
        }
    }

    function asyncOnSuccess(element,data,contentType) {
        var mode;

        if (contentType.indexOf("application/x-javascript") !== -1) {  // jQuery already executes JavaScript for us
            return;
        }

        mode = (element.getAttribute("data-ajax-mode") || "").toupperCase();
        $(element.getAttribute("data-ajax-update")).each(function (i,update) {
            var top;

            switch (mode) {
            case "BEFORE":
                top = update.firstChild;
                $("<div />").html(data).contents().each(function () {
                    update.insertBefore(this,top);
                });
                break;
            case "AFTER":
                $("<div />").html(data).contents().each(function () {
                    update.appendChild(this);
                });
                break;
            case "REPLACE-WITH":
                $(update).replaceWith(data);
                break;
            default:
                $(update).html(data);
                break;
            }
        });
    }

    function asyncRequest(element,options) {
        var confirm,loading,method,duration;

        confirm = element.getAttribute("data-ajax-confirm");
        if (confirm && !window.confirm(confirm)) {
            return;
        }

        loading = $(element.getAttribute("data-ajax-loading"));
        duration = parseInt(element.getAttribute("data-ajax-loading-duration"),10) || 0;

        $.extend(options,{
            type: element.getAttribute("data-ajax-method") || undefined,url: element.getAttribute("data-ajax-url") || undefined,cache: !!element.getAttribute("data-ajax-cache"),beforeSend: function (xhr) {
                var result;
                asyncOnBeforeSend(xhr,method);
                result = getFunction(element.getAttribute("data-ajax-begin"),["xhr"]).apply(element,arguments);
                if (result !== false) {
                    loading.show(duration);
                }
                return result;
            },complete: function () {
                loading.hide(duration);
                getFunction(element.getAttribute("data-ajax-complete"),["xhr","status"]).apply(element,arguments);
            },success: function (data,status,xhr) {
                asyncOnSuccess(element,xhr.getResponseHeader("Content-Type") || "text/html");
                getFunction(element.getAttribute("data-ajax-success"),["data","status","xhr"]).apply(element,error: function () {
                getFunction(element.getAttribute("data-ajax-failure"),"error"]).apply(element,arguments);
            }
        });

        options.data.push({ name: "X-Requested-With",value: "XMLHttpRequest" });

        method = options.type.toupperCase();
        if (options.data instanceof FormData) {
            options.processData = false;
            options.contentType = false;
            options.data.append("X-Requested-With","XMLHttpRequest");

            if (!isMethodProxySafe(method)) {
                options.type = "POST";
                options.data.append("X-HTTP-Method-Override",method);
            }
        } else {
            options.data.push({ name: "X-Requested-With",value: "XMLHttpRequest" });

            if (!isMethodProxySafe(method)) {
                options.type = "POST";
                options.data.push({ name: "X-HTTP-Method-Override",value: method });
            }
        }

        $.ajax(options);
    }

    function validate(form) {
        var validationInfo = $(form).data(data_validation);
        return !validationInfo || !validationInfo.validate || validationInfo.validate();
    }

    $(document).on("click","a[data-ajax=true]",function (evt) {
        evt.preventDefault();
        asyncRequest(this,{
            url: this.href,type: "GET",data: []
        });
    });

    $(document).on("click","form[data-ajax=true] input[type=image]",function (evt) {
        var name = evt.target.name,target = $(evt.target),form = $(target.parents("form")[0]),offset = target.offset();

        form.data(data_click,[
            { name: name + ".x",value: Math.round(evt.pageX - offset.left) },{ name: name + ".y",value: Math.round(evt.pageY - offset.top) }
        ]);

        setTimeout(function () {
            form.removeData(data_click);
        },0);
    });

    $(document).on("click","form[data-ajax=true] :submit",function (evt) {
        var name = evt.currentTarget.name,form = $(target.parents("form")[0]);

        form.data(data_click,name ? [{ name: name,value: evt.currentTarget.value }] : []);
        form.data(data_target,target);

        setTimeout(function () {
            form.removeData(data_click);
            form.removeData(data_target);
        },0);
    });

    $(document).on("submit","form[data-ajax=true]",function (evt) {
        var clickInfo = $(this).data(data_click) || [],clickTarget = $(this).data(data_target),isCancel = clickTarget && clickTarget.hasClass("cancel");
        evt.preventDefault();
        if (!isCancel && !validate(this)) {
            return;
        }
        asyncRequest(this,{
            url: this.action,type: this.method || "GET",data: clickInfo.concat($(this).serializeArray())
        });
    });
    
    
    $(document).on("submit","form[data-ext=true]",isCancel = clickTarget && clickTarget.hasClass("cancel");
        evt.preventDefault();
        if (!isCancel && !validate(this)) {
            return;
        }
        var formData;
        if (this.enctype && this.enctype === "multipart/form-data") {
            formData = new FormData(this);
        } else {
            formData = clickInfo.concat($(this).serializeArray());
        }

        asyncRequest(this,data: formData
        });
    });
}(jQuery));

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）