Asp.net mvc 4 放大多次弹出的奇怪行为
我有一个菜单,其中有几个链接到带有表单的弹出窗口。它看起来像:Asp.net mvc 4 放大多次弹出的奇怪行为,asp.net-mvc-4,magnific-popup,Asp.net Mvc 4,Magnific Popup,我有一个菜单,其中有几个链接到带有表单的弹出窗口。它看起来像: <ul> <li><a href="/hr/applications/edit/15">Редактировать анкету</a></li> <li><a href="/Hr/PlaceUserInJobPopup?applicationId=15" class="magnific-form" type="inline">Тру
<ul>
<li><a href="/hr/applications/edit/15">Редактировать анкету</a></li>
<li><a href="/Hr/PlaceUserInJobPopup?applicationId=15" class="magnific-form" type="inline">Трудоустроить</a></li>
<li><a href="/Hr/RefuseUserApplicationPopup?applicationId=15" class="magnific-form">Отказать</a></li>
<li><a href="/Hr/RenunciateUserApplicationPopup?applicationId=15" class="magnific-form">Отказался сам</a></li>
</ul>
$(document).ready(function () {
$('.magnific-form').magnificPopup({
type: 'ajax',
closeOnContentClick: false,
closeBtnInside: true,
callbacks: {
settings: null,
parseAjax: function (mfpResponse) {
console.log('Ajax content loaded:', mfpResponse);
},
ajaxContentAdded: function () {
console.log(this.content);
}
}
});
)};
以及内部带有不引人注目的验证的表单(它们看起来都很相似,没有什么特别之处):
因此,如果ModelState.IsValid==false,则submit按钮单击必须通过AJAX返回表单本身和验证错误。是的,但它只适用于菜单中的第一个弹出链接。第二个方法和所有其他方法在POST之后立即从控制器获取get方法,并且没有要查看的验证。最后,我将refreshPopUpContent方法更改为:
function refreshPopUpContent(response) {
var container = $('.popUp-content');
container.html(response);
}
这将用来自控制器的视图替换弹出窗口的内容,并且验证消息可见
$(document).delegate('form', 'submit', function (event) {
var $form = $(this);
var id = $form.attr('id');
var _data = $form.serialize();
var _type = $form.attr('method');
var _url = $form.attr('action');
if (id == 'magnific-form') {
event.preventDefault();
$.ajax({
data: _data,
type: _type,
url: _url,
success: function (response) {
refreshPopUpContent(response);
}
});
}
});
function refreshPopUpContent(response) {
var magnificPopup = $.magnificPopup.instance;
magnificPopup.items[0].type = "inline";
magnificPopup.items[0].src = response;
magnificPopup.updateItemHTML();
}
function refreshPopUpContent(response) {
var container = $('.popUp-content');
container.html(response);
}