Модальная многостанционная загрузка в MVC 5 - PullRequest
Новая
       20

Модальная многостанционная загрузка в MVC 5

0 голосов
/ 16 января 2019

У меня есть кнопка btnAdd, которая будет загружать частичный вид в режим начальной загрузки следующим образом: 

$('#btnAdd').click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function (data) {
        $('#addContainer').html(data);

        $.getScript("/Scripts/jquery.unobtrusive-ajax.min.js");
        $.getScript("/Scripts/jquery.validate-vsdoc.js");
        $.getScript("/Scripts/jquery.validate.js");
        $.getScript("/Scripts/jquery.validate.min.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.min.js");

        $('#addModal').modal('show');
    });
});

и частичное представление загружается так: 

@using (Ajax.BeginForm("Create", "MasterBanks", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp", OnSuccess = "CreateSuccess" }))
{
    @Html.AntiForgeryToken()
    ....
}

и CreateSuccess, которые обрабатывают форму успеха: 

function CreateSuccess(data) {
    if (data !== "success") {
        $('#addContainer').html(data);
        return;
    }
    $('#addModal').modal('hide');
    $('#addContainer').html("");

    var grid = new MvcGrid(document.querySelector('#data-table'));
    grid.reload();
}

Проблема в том, что когда я нажимаю кнопку, каждый раз, когда я открываю модальное окно, независимо от того, успешен он или нет, или просто открываю модальное окно и снова закрываюсь, не отправляя форму. В следующий раз, когда я отправлю форму, данные будут опубликованы несколько раз, как и то, сколько я открываю модальное.

Если я удалю $.getScript, проблема не возникнет. 

$.getScript("/Scripts/jquery.unobtrusive-ajax.min.js");
$.getScript("/Scripts/jquery.validate-vsdoc.js");
$.getScript("/Scripts/jquery.validate.js");
$.getScript("/Scripts/jquery.validate.min.js");
$.getScript("/Scripts/jquery.validate.unobtrusive.js");
$.getScript("/Scripts/jquery.validate.unobtrusive.min.js");

Почему я использую это $.getScript? Потому что удаленная проверка работает только после загрузки формы. Почему я не загружаю его при частичном просмотре? Я получил предупреждение XMLHttpRequest Deprecated при загрузке его в частичном представлении, и после просмотра некоторых статей это решение работает для этого предупреждения, но создало другую проблему.

Я пытался добавить какой-нибудь сценарий, когда нажимал btnAdd перед привязкой данных: $('#addContainer').html(""); ИЛИ $('#addContainer').empty(); или $('#addModal').data('modal',null); и некоторые другие, но ни один из них не работает.

Я пробовал с unbind() также, но не работает, он по-прежнему возвращает несколько отправки. Похоже, что javascipt не выгружен, когда модальное окно закрыто, как если бы я поместил скрипт в частичное представление.

Ответы [ 2 ]

0 голосов
/ 19 января 2019

После некоторых исследований я обнаружил, что unobtrusive может быть повторно проанализирован после загрузки формы AJAX: 

$('#btnAdd').click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function (data) {
        $('#addContainer').html(data);
        $('#addModal').modal('show');

        $('form').each(function() {
            var $el = $(this);
            $el.data('validator', null);
            $.validator.unobtrusive.parse($el);
        })
    });
});
0 голосов
/ 17 января 2019

Ну, по какой-то причине нажатие кнопки повторяется при открытии модального. Вы также загружаете какой-то скрипт в частичном представлении?

То, что вы можете попробовать, это открепить событие click, когда оно запускает что-то вроде 

$('#btnAdd').unbind().click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function (data) {
        $('#addContainer').html(data);

        $.getScript("/Scripts/jquery.unobtrusive-ajax.min.js");
        $.getScript("/Scripts/jquery.validate-vsdoc.js");
        $.getScript("/Scripts/jquery.validate.js");
        $.getScript("/Scripts/jquery.validate.min.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.js");
        $.getScript("/Scripts/jquery.validate.unobtrusive.min.js");

        $('#addModal').modal('show');
    });
});

Кроме того, вы также можете игнорировать предупреждающее сообщение «XMLHttpRequest Deprecated» если ваш код работает

...