Поделиться через

Примеры приложений AJAX

  • Статья

Обновлен: Ноябрь 2007

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

В данном руководстве будет построено приложение, отображающее страницы с данными о сотрудниках из образца базы данных AdventureWorks. Приложение использует элемент управления UpdatePanel для обновления меняющейся части страницы без мигания страницы, которое происходит при обратной передаче. Это называется частичным обновлением страницы. В примере приложения также используется элемент управления UpdateProgress для отображения сообщения о состоянии во время частичного обновления страницы.

Обязательные компоненты

Для реализации процедур в собственной среде разработки потребуются:

  • Microsoft Visual Studio 2005 или Microsoft Visual Web Developer, экспресс-выпуск.

  • Веб-узел ASP.NET с поддержкой AJAX.

  • Образец базы данных AdventureWorks. Можно загрузить и установить базу данных AdventureWorks из Центра загрузки Майкрософт. (Выполните поиск "Установка образцов кода и образцов баз данных SQL Server 2005 (Декабрь 2006")).

Создание веб-узла ASP.NET

Веб-узлы, созданные в ASP.NET по умолчанию, включают поддержку функциональных возможностей AJAX.

Создание веб-узла ASP.NET с поддержкой AJAX

  1. Запустите Visual Studio.

  2. В меню Файл выберите пункт Создать веб-узел.

    Откроется диалоговое окно Создать веб-узел.

  3. В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

  4. Введите расположение и язык и нажмите кнопку ОК.

Добавление элемента управления UpdatePanel на веб-страницу ASP.NET

После создания веб-узла ASP.NET создается веб-страница ASP.NET, которая включает элемент управления UpdatePanel. Перед добавлением элемента управления UpdatePanel необходимо добавить элемент управления ScriptManager. Элемент управления UpdatePanel использует элемент ScriptManager для управления частичным обновлением страницы.

Создание новой веб-страницы ASP.NET

  1. В обозревателе решений щелкните правой кнопкой мыши имя веб-узла и выберите Добавление нового элемента.

    Откроется диалоговое окно Добавление нового элемента.

  2. В меню Установленные шаблоны Visual Studio выберите Веб-форма.

  3. Назовите страницу Employees.aspx и снимите флажок Поместить код в отдельном файле.

  4. Выберите требуемый язык.

  5. Нажмите кнопку Добавить.

  6. Перейдите в представление конструирования.

  7. На вкладке AJAX-расширения панели элементов дважды щелкните элемент управления ScriptManager, чтобы добавить его на страницу.

    Урок UpdatePanel

  8. Перетащите элемент управления UpdatePanel с панели элементов в элемент ScriptManager.

    Урок UpdatePanel

Добавление содержимого в элемент управления UpdatePanel

Элемент управления UpdatePanel выполняет частичные обновления страницы и определяет содержимое, которое обновляется независимо от остальной страницы. В этой части руководства описывается добавление элемента управления с привязкой к данным, который отображает сведения из базы данных AdventureWorks.

Чтобы добавить содержимое в элемент управления UpdatePanel, выполните следующие действия:

  1. Из вкладки Данные панели элементов перетащите элемент управления GridView в изменяемую область элемента управления UpdatePanel.

  2. В меню Задачи GridView выберите Автоформат.

  3. В панели Автоформат в области Выбор схемы выберите Цветная и нажмите кнопку ОК.

  4. В меню Задачи GridView в списке Выбор источника данных выберите пункт <Новый источник данных>.

    Отобразится мастер настройки источника данных.

  5. В поле Источник данных для приложения выберите База данных и затем нажмите кнопку ОК.

  6. В мастере Настройки источника данных на этапе Выбора подключения к базе данных выберите подключение к базе данных AdventureWorks и затем нажмите Далее.

  7. На этапе Настройка инструкции Select выберите Указать пользовательские инструкции SQL или хранимую процедуру и затем нажмите кнопку Далее.

  8. На вкладке SELECT этапа Определения пользовательской инструкции или хранимой процедуры введите следующую инструкцию SQL:

    SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName

  9. Нажмите кнопку Далее.

  10. Нажмите кнопку Готово.

  11. В меню Задачи GridView установите флажок Включить разбиение по страницам.

  12. Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

    Обратите внимание, что при выборе различных страниц данных нет мигания страницы. Это происходит из-за того, что страница не выполняет обратную передачу и не обновляет всю страницу.

Добавление элемента управления UpdateProgress на страницу

Элемент управления UpdateProgress отображает сообщение о состоянии, когда запрашивается новое содержимое для элемента управления UpdatePanel.

Чтобы добавить элемент управления UpdateProgress на страницу, выполните следующие действия.

  1. Из вкладки Расширения AJAX панели элементов перетащите элемент управления UpdateProgress на страницу в элемент управления UpdatePanel.

  2. Выберите элемент управления UpdateProgress и в окне "Свойства" задайте свойству AssociatedUpdatePanelID значение UpdatePanel1.

    Это связывает элемент управления UpdateProgress с добавленным ранее элементом UpdatePanel.

  3. В области редактирования элемента управления UpdateProgress введите текст Получение данных о сотрудниках ... .

  4. Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

    Если во время выполнения SQL-запроса и получения данных есть задержка, элемент управления UpdateProgress отображает сообщение, введенное в элемент управления UpdateProgress.

Добавление задержки в пример приложения

Если приложение быстро обновляет все страницы данных, содержимое элемента управления UpdateProgress можно не увидеть. Элемент управления UpdateProgress поддерживает свойство DisplayAfter, позволяющее задать задержку перед отображением элемента управления. Это помогает предотвратить мигание элемента управления, если обратная передача происходит очень быстро. По умолчанию задержка равна 500 миллисекундам (0,5 секунды), что означает, что элемент управления UpdateProgress не будет отображаться, если обновление занимает меньше половины секунды.

В среде разработки можно добавить искусственную задержку в приложение, чтобы обеспечить должное функционирование элемента управления UpdateProgress. Этот этап является необязательным, он предназначен для проверки приложения.

Чтобы добавить задержку в пример приложения, выполните следующие действия.

  1. В элементе управления UpdatePanel выберите элемент управления GridView.

  2. В окне "Свойства" нажмите кнопку События.

  3. Дважды щелкните событие PageIndexChanged, чтобы создать обработчик событий.

  4. Добавьте следующий код к обработчику PageIndexChanged, который искусственно создает трехсекундную задержку:

    'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

    //Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
    Bb398890.alert_note(ru-ru,VS.90).gifПримечание.

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

  5. Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

    Из-за трехсекундной задержки при перемещении на новую страницу пользователь может видеть элемент управления UpdateProgress.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

См. также

Задачи

Знакомство с элементом управления UpdatePanel

Знакомство с элементом управления UpdateProgress

Основные понятия

Общие сведения о ASP.NET AJAX

Добавление клиентских возможностей и возможностей AJAX

Общие сведения об элементе управления UpdatePanel

Общие сведения об элементе управления UpdateProgress