Question

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

<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>

以下是onsubmit处理程序的表单：

$(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返回验证错误。是的，但它只适用于菜单中的第一个popUp链接。第二个和所有其他人在POST之后立即从控制器获取GET方法，并且没有验证可以看到。

Answer 1

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

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

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

Magnific多重弹出奇怪的行为

1 个答案: