Как Bootstrap может быть повторно инициализирован для элементов формы, в частности элементов флажков, после обратной передачи .net? - PullRequest
Новая
       7

Как Bootstrap может быть повторно инициализирован для элементов формы, в частности элементов флажков, после обратной передачи .net?

0 голосов
/ 28 марта 2019

У меня есть экран в веб-приложении, управляемом .net, где отображается сетка. Bootstrap 3.3 используется для отображения / макета. В сетку мы включаем элементы-флажки для выбора строк сетки. Когда экран загружен, Bootstrap правильно включает его элемент и скрывает фактический элемент ввода флажка, и все работает как положено. Однако, если сетка сортируется с помощью обратной передачи после щелчка по заголовку столбца, все элементы флажка исчезают. Экран должен быть перезагружен, чтобы вернуть их.

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

1 Ответ

0 голосов
/ 29 марта 2019

Вот как мы решили это: мы не смогли найти способ переинициализировать Bootstrap после асинхронной обратной передачи .NET.Мы могли бы, однако, изменить стиль изменений, которые BS сделала при загрузке страницы, используя двойное решение:

1.) Использовать пользовательские стили для соответствующих элементов, используя javascript при загрузке документа, чтобы свести на нет всеBootstrap моды на элементы.Вот код: 

function fixBootstrapCheckboxesInFullGrid() {
        $(".full-grid * input[type=checkbox]").css({ 'display': 'inline-block', 'opacity': '1' });
        $(".full-grid * input[type=checkbox] + label").remove();
    }

    /* Adjust checkbox elements on page load (fires after Bootstrap is loaded) */
    $(document).ready(function () {
        fixBootstrapCheckboxesInFullGrid();
    });

Этот блок переопределяет изменения Bootstraps (поэтому он должен существовать после включения библиотеки Bootstrap).Мы используем логику JS для непосредственного воздействия на элементы, чтобы избежать проблем с упорядочением.Эта логика стиля специфична для класса .full-grid на затрагиваемом экране, но может быть сделана более или менее специфичной для конкретных элементов, если это необходимо.Кроме того, он специально обернут в функцию, чтобы разместить вторую часть ниже.

2.) Отслеживание обратной передачи: добавьте функциональность javascript до и после обратной передачи в объект обработчика страницы.Это означает, что каждый раз, когда происходит асинхронная обратная передача, функции предварительной и последующей обратной передачи запускаются в соответствующее время.Вот логика (также размещенная в нижней части экрана) с примечаниями: 

/* 
ASYNCHRONOUS POSTBACK TRACKING
we use the Application.add_init() to add the beginRequest and endRequest event handlers. 
To add or remove handlers for events raised by the PageRequestManager classes, use the 
add_eventname and remove_eventname methods of those classes.

Note: The pre- and post-postback handler logic came from https://www.dotnetcurry.com/ShowArticle.aspx?ID=256
*/

/* Put any pre-postback operations here */
function beforeAsyncPostBack() {
    //var curtime = new Date();
    //alert('Time before PostBack:   ' + curtime);
}

/* Put any post-postback operations here */
function afterAsyncPostBack() {
    //var curtime = new Date();
    //alert('Time after PostBack:    ' + curtime);
    fixBootstrapCheckboxesInFullGrid()
}

/* Add init function to the PageRequestManager object, which registers the pre- and post-postback handlers. */
Sys.Application.add_init(appl_init);

function appl_init() {
    var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    pgRegMgr.add_beginRequest(BeginHandler);
    pgRegMgr.add_endRequest(EndHandler);
}

/* These fire before/after any postback initialized from this screen */
function BeginHandler() {
    beforeAsyncPostBack();
}

function EndHandler() {
    afterAsyncPostBack();
}

Итак, теперь, когда срабатывает обратная передача, мы можем делать что-то на стороне клиента непосредственно перед выполнением обратной передачи и сразу после,В этом случае мы просто повторно применяем наши модификации стиля, чтобы обеспечить сохранение элементов флажка в состоянии, которое мы можем видеть и взаимодействовать, несмотря на навязчивость Bootstraps (в данном случае, во всяком случае).

...