如何解决不显眼的 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 举报,一经查实,本站将立刻删除。