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

Цель практического занятия: Целью данного занятия является рассмотрение возможности использования языка 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>

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

Теперь в мастере страниц подключим известную JavaScript-библиотеку jquery (скачать последнюю версию библиотеки и почитать документацию можно по адресу: http://jquery.com/):

<script type="text/javascript" src="JS/jquery-1_2_6_min.js"></script>

Перейдем на главную страницу. Воспользовавшись библиотекой jquery, анимируем основной текст страницы, так чтобы он медленно всплывал, и сделаем так, чтобы надпись "Новинки!" мигала. Для этого добавим в PlaceHolderScripts следующий код:

<asp:Content ID="ContentScript" ContentPlaceHolderID="PlaceHolderScripts" runat="server">

    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('#MainText').toggle(1000);
            $('#News').toggleClass('h3').toggle(1000, function() {
                animateText();
            });

        });

        function animateText() {
            $('#News').toggleClass('h3').toggle(1000, function() {
                animateText();
            });
        }
    </script>. 
</asp:Content>

Здесь определены две функции. Первая, анонимная функция, сработает в тот момент, когда страница будет сформирована браузером. Так как изначально основному тексту присвоен CSS-класс text-init, который содержит правило display:none, то при загрузке страницы этот текст не отобразится. $('#MainText') найдет элемент с идентификатором MainText, а метод toggle(1000) изменит видимость этого элемента (в данном случае – покажет его), причем процесс отображения текста будет анимирован и займет 1 секунду.

Для элемента с идентификатором News, будет поочередно "включаться" и "выключаться" применение стиля h3, а функция toogle будет скрывать и показывать надпись, создавая эффект мигания. Здесь используется перегрузка функции toggle, которая отработав в течение секунды, вызовет функцию animateText. Эта функция, в свою очередь, снова изменит видимость надписи и вызовет себя.

Результат добавления визуальных эффектов представлен на рис. 15.1.

увеличить изображение
Рис. 15.1. Главная страница сайта с "всплывающим" текстом

Теперь перейдем к рассмотрению возможностей технологии AJAX. Основная задача, которую она решает, заключается в асинхронном обмене данными с сервером. Это значит, что действия пользователя не приводят к перезагрузке страницы. На самом деле данные отправляются и получаются с сервера JavaScript -объектом XMLHttpRequest, который поддерживается всеми современными браузерами. При это в технологии AJAX ASP.NET, обращение XMLHttpRequest к серверу называется асинхронным "постбэком" (AsyncPostBack) и так же, как и в случае обычного "постбэка", приводит к восстановлению всей страницы на сервере. Это обеспечивается тем, что содержимое ViewState передается на сервер и при асинхронных запросах.

Так как данные при использовании AJAX передаются независимо от страницы, возникает задача обработки полученного от сервера ответа и отображения его на странице. В общем случае, она решается также применением языка JavaScript. Разработчик пишет клиентский код, который разбирает полученные данные и на его основе генерирует нужный для отображения HTML. В ASP.NET AJAX предоставляется намного более простой способ решения этой проблемы, который заключается в использовании серверного компонента UpdatePanel.

15.2.2. Работа с UpdatePanel

При первом рассмотрении UpdatePanel сходен в работе с обычным Panel. В результате рендеренга страницы этот компонент также заменяется на HTML-элемент div и служит для группировки и разметки страницы. Особенность же этого компонента заключается в том, что любой запрос, совершенный элементом, расположенным внутри UpdatePanel является асинхронным и приводит только к перерисовке его содержимого. Остальная страница не изменяется. Даже если при постбэке пользователь изменит структуру или набор компонент вне UpdatePanel, то на этапе Render жизненного цикла страницы, эти изменения не будут учтены, произойдет генерация HTML-разметки только для содержимого компонента и эта разметка будет отправлена клиенту. Клиентская часть ASP.NET AJAX обработает полученный код и изменить разметку внутри div' а, соответствующего UpdatePanel.

Таким образом, расположив на странице несколько UpdatePanel' ов (а их можно расположить любое количество, вкладывая, например, один в другой) можно реализовать интерфейс, который никогда не будет перерисовывать страницу и в то же время предоставлять все функциональные возможности сайта.

Иногда бывает не достаточно обновлять только содержимое того UpdatePanel' а, который вызвал постбэк. Нужно заставить обновиться и другие UpdatePanel' ы на странице. Это можно сделать двумя способами:

• В разметке ASP или в code-behind UpdatePanel указать триггеры ( Triggers ), которые будут приводить к перерисовке содержимого этой панели. В качестве параметров указываются идентификаторы серверных компонент, находящихся вне UpdatePanel, которые должны привести к обновлению его содержимого.
• В code-behind'e можно вызвать метод UpdatePanel.Update(), что приведет к тому, что его содержимое будет ренедрится на сервере и отправляться клиенту.

Все это значит, что для внедрения AJAX в наш Интернет-магазин достаточно поместить все необходимые компоненты в UpdatePanel' ы и при необходимости указать триггеры:

<asp:UpdatePanel ID="UpdatePanelComments" 
       runat="server" UpdateMode="Conditional">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="AddReview"  /> 
  </Triggers>
  <ContentTemplate>
    <asp:DataList ID="ReviewList" runat="server" Width="100%" 
        CellPadding="0" CellSpacing="0">
      <ItemTemplate>
        <asp:Label ID="Label1" style='font-weight:bold' 
	      Text='<%# DataBinder.Eval(Container.DataItem, "ReviewerName") %>'
              runat="server" />
        <span class="Normal">говорит... </span>
        <asp:Image ID="Image1" runat="server" 
	      ImageUrl='<%# "~/images/ReviewRating" + DataBinder.Eval(Container.DataItem, "Rating") +".gif" %>' />
        <br>
        <asp:Label ID="Label2" CssClass="Normal" 
             Text='<%# DataBinder.Eval(Container.DataItem, "Comments") %>'
             runat="server" />
      </ItemTemplate>
      <SeparatorTemplate>
        <br>
      </SeparatorTemplate>
    </asp:DataList>
  </ContentTemplate>
</asp:UpdatePanel>
…
<asp:UpdatePanel ID="UpdatePanelNewCommentProperties" runat="server" 
     UpdateMode="Conditional">
  <Triggers><asp:AsyncPostBackTrigger ControlID="AddReview"  /> 
  </Triggers>
  <ContentTemplate>
    …
  </ContentTemplate>
</asp:UpdatePanel>

…
<asp:UpdatePanel ID="UpdatePanelCommentButton" runat="server">
  <ContentTemplate>
    <br>
    <span class="NormalBold">Комментарий</span>
    <br>
    <asp:TextBox ID="Comment" TextMode="multiline" 
        MaxLength="3850" Rows="7" Width="100%"
        runat="server" />
    <asp:RequiredFieldValidator ControlToValidate="Comment" 
        Display="Dynamic" Font-Names="verdana" Font-Size="9pt" 
        ErrorMessage="Поле 'Комментарий' должно быть заполнено." runat="server"
        ID="RequiredFieldValidator3"></asp:RequiredFieldValidator>
    <br>
    <br>
    <asp:Button ID="AddReview" runat="server" 
        OnClick="OnClick" Text="Добавить свой комментарий" />
    <br>
  </ContentTemplate>
</asp:UpdatePanel>

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