15. Практическое занятие: Добавление динамических компонент в Интернет-магазин

Данное практическое занятие освещает вопросы использования JavaScript-библиотек и AJAX для создания визуальных эффектов в веб-приложении, а также отладку и профилирование JavaSсript с помощью инструментов разработчика в IE8.

Содержание

15.1. Введение

15.2. Применение AJAX

15.2.1. Подключение клиентских сценариев

15.2.2. Работа с UpdatePanel

15.3. Работа с веб-службами в ASP.NET AJAX

15.3.1. Создание веб-службы

15.3.2. Вызов веб-службы из клиенсткого сценария

15.4. Отладка JavaScript

15.5. Профилирование JavaScript

15.6. Ключевые термины

15.7. Краткие итоги

Цель практического занятия: Целью данного занятия является рассмотрение возможности использования языка JavaScript и технологии AJAX для создания визуальных эффектов, а также доступа к данным и их отображения в Интернет-магазине.

Файлы к практическому занятию Вы можете скачать здесь.

15.1. Введение

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

Серверные функции ASP.NET могут быть дополнены функциональностью клиентских сценариев в веб-страницах ASP.NET. Клиентский сценарий можно использовать для предоставления пользователям более функционального и интерактивного интерфейса. Также с помощью клиентского сценария можно осуществлять асинхронные вызовы к веб-серверу во время выполнения страницы в веб-обозревателе.

ASP.NET предусматривает два подхода к использованию клиентских возможностей. Первый подход – это использование AJAX-функций платформы ASP.NET. Технология AJAX в ASP.NET включает библиотеку функций клиентских сценариев, привнося многие из преимуществ объектно-ориентированного программирования и моделей ASP.NET в клиентские сценарии. AJAX в ASP.NET также обеспечивает серверную поддержку, что включает серверные веб-элементы управления, автоматически отрисовывающие необходимый для функциональности AJAX клиентский сценарий.

Второй подход – создание клиентского сценария и самостоятельная интеграция его в веб-страницы ASP.NET. Этим подходом удобно пользоваться, если фрагменты клиентского сценария очень невелики или если требуется интегрировать существующий клиентский сценарий в приложение. Данный подход используется многими серверными веб-элементами управления ASP.NET (например, проверяющими элементами управления) для создания клиентской функциональности.

15.2. Применение ajax

Прежде всего, рассмотрим применение технологии AJAX. Для этого в мастер страниц в самое начало содержимого формы (тег form) необходимо добавить следующий код:

<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>

Этот объект будет отвечать за работу JavaScript, в частности за подключение нового скриптового кода, который будет скачиваться при асинхронных запросах.

Также добавим еще один ContentPlaceHolder, который будем использовать как контейнер для JavaScript функций на различных страницах.

<asp:ContentPlaceHolder ID="PlaceHolderScripts" runat="server">

</asp:ContentPlaceHolder>