巨大的多重弹出奇怪行为答案

【问题标题】：Magnific multiple popup strange behavior巨大的多重弹出奇怪行为
【发布时间】：2014-07-25 08:25:30
【问题描述】：

我有一个菜单，其中有几个指向带有表单的弹出窗口的链接。它看起来像：

<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);
            }
        }
    });
)};

以及内部带有不显眼验证的表单（它们看起来都相似，没什么特别的）：

<div class="popUp-content">
<form method="post" id="magnific-form" action="/Hr/RefuseUserApplicationPopup">        <div class="section-header">
            <div class="title">
                <h3 class="semibold black">
                    Отказать кандидату Высоцкая-Яблонович Анна Прохоровна
                    в должности Кассир
                </h3>
            </div>
        </div>
        <div class="form-block">
            <img src="http://localhost:56804/content/images/thumbs/0000033_140.jpeg" title="Высоцкая-Яблонович Анна Прохоровна" alt="Высоцкая-Яблонович Анна Прохоровна" class="over-hidden round border-green-14">
            <div class="form-block-field">
                <label title="" for="Comment">Причина</label>
                <textarea rows="2" name="Comment" id="Comment" data-val-required="Введите комментарий" data-val="true" cols="20"></textarea>
                <span data-valmsg-replace="true" data-valmsg-for="Comment" class="field-validation-valid"></span>
            </div>
        </div>
        <input type="submit" value="Отказать" class="btn marg-top-20" name="save">
</form>
</div>

这里是表单提交处理程序：

$(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();

}

因此，如果 ModelState.IsValid == false，则提交按钮单击必须通过 AJAX 返回表单本身和验证错误。是的，但它仅适用于菜单中的第一个弹出链接。第二个和所有其他在 POST 之后立即从控制器获取 GET 方法，并且没有验证可查看。

【问题讨论】：

标签： asp.net-mvc-4 magnific-popup

【解决方案1】：

最后，我将 refreshPopUpContent 方法更改为：

function refreshPopUpContent(response) {
    var container = $('.popUp-content');
    container.html(response);
}

这会将弹出的内容替换为来自控制器的视图，并且验证消息是可见的。

【讨论】：