Кнопка не работает после частичного рендеринга вида - PullRequest
Новая
       12

Кнопка не работает после частичного рендеринга вида

0 голосов
/ 06 июля 2018

Внимание! Этот вопрос не для людей с проблемами с сердцем.

Объяснение проблемы: Когда страница загружена, я нажимаю кнопку, чтобы удалить элемент списка, работает нормально. После этого перезагружается частичное представление (вызов ajax), но та же кнопка удаления больше не работает. Таким образом, кнопка работает до частичной перезагрузки вида, но не после нее.

Поскольку я хочу сделать древовидное представление своих предметов, я использую Bootstrap Treeview library . Оригинального Bootstrap Treeview недостаточно для моих нужд, поэтому я добавил кнопки в правой части каждого элемента в виде дерева, как показано на следующем рисунке ...

Treeview

Не думаю, что проблема может быть в этом коде, но вот как я добился дополнительных кнопок на каждом элементе: 

Tree.prototype.template = {
    list: '<ul class="list-group"></ul>',
    item: '<li class="list-group-item"></li>',
    indent: '<span class="indent"></span>',
    icon: '<span class="icon"></span>',
    link: '<a href="#" style="color:inherit;"></a>',

    buttonAdd: '<button class="btn btn-default btn-flat theme-button"><i class="fa fa-plus"></i></button>',
    buttonRemove: '<button class="btn btn-default btn-flat theme-button"><i class="fa fa-trash"></i></button>',
    buttonGroup: '<div class="btn-group pull-right"></div>',

    badge: '<span class="badge"></span>'
};

 treeItem
      .append($(_this.template.buttonGroup)
            .append($(_this.template.buttonAdd).attr('ng-click', "showAddChildModal('" + node.Guid + "', '" + node.projectGuid + "')"))
             .append($(_this.template.buttonRemove).attr('ng-click', "deleteCriteria('" + node.Guid + "', '" + node.projectGuid + "')"))
       );

Во второй части кода вы видите, что я динамически добавил событие ng-click, которое вызывает функцию deleteCriteria, расположенную в моем угловом файле.

Угловая функция 

$scope.deleteCriteria = function (guid, projectGuid) {
        $.ajax({
                type: 'POST',
                url: '/Project/DeleteCriteria',
                data: {
                    guid: guid,
                    projectGuid: projectGuid
                },
                cache: false,
                success: function (data) {
                    if (data === true) {
                        $.ajax({
                            type: 'GET',
                            url: '/Project/UpdateCriteriaTreeViewPartial',
                            data: {
                                guid: projectGuid
                            },
                            cache: false,
                            success: function (data) {

                                if (data !== null) {
                                    $("#criteria-tree-view-container").html($compile(data)($scope));

                                } else {
                                    ///
                                }
                            },
                            error: function (xhr, status, error) {
                                ///
                            }
                        });
                    } else {
                        ///
                    }
                },
                error: function (xhr, status, error) {
                    ///
                }
            });
    });

В этом коде мы видим первый ajax-вызов, который вызывает действие контроллера для удаления объекта (работает нормально). Если объект удален (Ajax возвращает true), второй вызов ajax обращается к действию контроллера, чтобы получить частичное представление с новыми данными (без удаленного элемента списка).

Это частичный код вида: 

@model string

@Styles.Render("~/Content/BootstrapTreeview")
@Scripts.Render("~/bundles/BootstrapTreeview")


<div class="col-lg-12">
    <div class="row" style="margin-bottom: 20px;">
        <h4>Kriteriji</h4>
    </div>
    <div id="tree" style="width: 100%;">

    </div>
</div>

<script type="text/javascript">
    DrawCriteriaTreeView(@Html.Raw(Json.Encode(Model)));
</script>

Элемент div с идентификатором "tree" - это место, где bootstrap-treeview помещает представление дерева. Строковая модель - это данные json, полученные с сервера (с элементами списка), которые я кодирую и передаю следующей функции javascript в конце частичного представления: 

function DrawCriteriaTreeView(json) {
    var jsonParsed = JSON.parse(json);

    $('#tree').treeview({
        data: jsonParsed,
        backColor: '#323C48',
        color: "white",
        onhoverColor: "#303A46",
        showTags: false,
        selectedBackColor: "#303B46",
        enableLinks: false
    });
}

Как видите, эта функция анализирует полученный json и вызывает функцию treeview для создания дерева с новыми данными.

Решение очень сложное, поэтому я постараюсь объяснить это просто

Загрузка страницы -> встроенный скрипт (в конце) вызывает функцию DrawCriteriaTreeView с json, полученным через модель -> эта функция затем анализирует json и вызывает функцию treeview в библиотеке BootstrapTreeview -> она создает вид дерева с помощью кнопки «удалить элемент» - > отображает страницу

Затем я нажимаю кнопку удаления элемента (это работает первый раз) -> Angular call (сервер вызывается через ajax) и элемент обновляется в базе данных -> второй вызов ajax вызывает контроллер, чтобы получить частичное представление с новыми данными -> визуализирует частичное представление -> функция DrawCriteriaTreeView, вызываемая с новыми данными -> вызывается функция генератора древовидной структуры -> визуализация дерева

Затем, когда я нажимаю кнопку Удалить элемент, ничего не происходит. Кроме того, я не получаю никаких ошибок в консоли.

Я сравнил как страницу предварительного добавления элемента, так и страницу после удаления элемента, нет никаких отличий, кроме удаленного элемента, как и должно быть.

...