Визуальный фидбэк в ASP.NET AJAX с помощью элемента управления UpdateProgress - Более реальный пример использования элемента управления UpdateProgress

Более реальный пример использования элемента управления UpdateProgress

Файлы в приложении включают более интересный реальный демо-код, который использует технологию Ajax для отображения мастер/детального отчета. Страница состоит из двух элементов UpdatePanel: один перечисляет категории из базы данных Northwind, в то время как второй перечисляет товары, которые принадлежат категории, выбранной в первом списке. (Мы обсудили использование нескольких элементов UpdatePanel на странице в статье "Используем UpdatePanel".) На странице также присутствует элемент управления UpdateProgress , который использует анимированное GIF изображение в сообщении о загрузке.

Демо-код использует каскадные таблицы стилей для отображения сообщения о загрузке <div> , которое располагается по всей ширине страницы. Оно также использует CSS фильтр для отображения сообщения о загрузке на полупрозрачном фоне. Следующие скриншоты демонстрируют страницу в действии. Первый скриншот показывает страницу после того, как категория напитков была выбрана (Beverages category). Товары, соответствующие данной категории, были выведены в правой части. Второй скриншот демонстрирует страницу после того, как новая категория была выбрана.  Как только товары из этой категории возвращены , сообщение о загрузке "LOADING PRODUCTS FOR SELECTED CATEGORY" отображается наряду с анимированным GIF изображением. Чтобы опробовать данный код в действии (либо изменить), загрузите его по ссылке, указанной в конце данной статьи.