Пошаговое руководство. Создание приложения для работы с данными с поддержкой Ajax

Visual Studio 2010

В данном пошаговом руководстве описываются способы создания веб-приложения с поддержкой Ajax, которое может работать как список задач. Оно помогает создать базовый пользовательский интерфейс для создания, управления и удаления списков, а также элементов в этих списках. Все вставки, обновления, удаления, сортировка и разбиение по страницам выполняются в элементе управления UpdatePanel, который поддерживает Microsoft Ajax.

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

В данном пошаговом руководстве представлены следующие задачи:

  • Создание базы данных SQL и добавление данных.

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

  • Добавление файла Классы LINQ – SQL.

  • Использование элемента управления ListView для отображения, изменения и удаления данных.

  • Использование элемента управления LinqDataSource для подключения к базе данных с помощью встроенного языка запросов (LINQ). Дополнительные сведения см. в разделе LINQ.

  • Использование элемента управления UpdatePanel для добавления функциональных возможностей Ajax к странице.

Для выполнения данного пошагового руководства требуется следующее:

  • Microsoft Visual Studio или Visual Web Developer 2010, экспресс-выпуск. Сведения о загрузке см. на веб-сайте Visual Studio Development Center.

  • Экспресс-выпуск SQL Server, установленный на компьютере. Если SQL Server установлен, можно использовать его, однако необходимо внести незначительные изменения в некоторые процедуры.

В этой части пошагового руководства описывается создание веб-узла и добавление в него страницы. В следующем разделе выполните подключение к базе данных. Если веб-узел уже был создан (например, по шагам, описанным в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Studio), можно использовать его в данном пошаговом руководстве. В противном случае создайте новый веб-сайт, выполнив следующие действия.

В данном пошаговом руководстве используется проект веб-сайта. Вместо этого можно использовать проект веб-приложения. Сведения о различиях между этими типами веб-проектов см. в разделе Сравнение проектов веб-приложений с проектами веб-сайтов.

Создание нового веб-сайта на базе файловой системы

  1. В Visual Web Developer в меню Файл выберите Создать веб-узел.

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

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

  3. В поле Расположение выберите Файловая система и введите имя папки, где нужно хранить страницы веб-узла.

  4. В списке Язык выберите Visual Basic или Visual C# и нажмите кнопку ОК.

    ПримечаниеПримечание

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

    Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Теперь, когда имеется веб-узел, следующим шагом будет создание базы данных и добавление ссылки на базу данных в Обозревателе серверов. (В Visual Web Developer 2008, экспресс-выпуск Обозреватель серверов называется Обозреватель баз данных.) При добавлении базы данных к обозревателю серверов можно использовать Visual Studio для добавления таблиц, хранимых процедур, представлений и т. д. Также можно просматривать табличные данные или создавать собственные запросы вручную или в графическом виде с помощью окна Построитель запросов.

Добавление базы данных в проект

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

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

  2. Выберите База данных SQL, назовите базу данных "Tasks.mdf" и нажмите кнопку ОК.

  3. Когда последует запрос приложения Visual Studio, нужно ли базу данных сохранить в папке, выберите Да.

Добавление схемы и образца данных к базе данных

Для создания схемы новой таблицы, хранящей элементы задач, можно использовать возможности изменения и проектирования базы данных.

Создание схемы и образца данных для базы данных

  1. В Обозревателе решений откройте папку App_Data и дважды щелкните файл Tasks.mdf.

    В Обозревателе серверов (или Обозревателе баз данных) откроется иерархия дерева базы данных задач.

  2. Щелкните правой кнопкой папку Таблицы и выберите команду Добавить новую таблицу.

  3. В редакторе таблицы базы данных создайте следующие столбцы в таблице:

    Имя столбца

    Тип данных

    Свойства

    taskId

    int

    Allow Nulls: No

    taskName

    nvarchar(50)

    Allow Nulls: No

    dateCreated

    datetime

    Allow Nulls: No

    isComplete

    bit

    Allow Nulls: No

  4. Щелкните правой кнопкой строку, содержащую taskid, и затем щелкните Задать первичный ключ.

  5. Не сбрасывая выделения со строки taskid на вкладке Свойства столбца откройте раздел Спецификация идентификатора и задайте для Является идентифицирующим значение Да.

  6. Сохраните таблицу и задайте ей имя TasksList.

  7. Щелкните правой кнопкой таблицу в области Обозреватель серверов и выберите Показать таблицу данных.

    Откроется окно, в котором можно просматривать и добавлять данные.

  8. Добавьте четыре или пять записей в таблицу и затем закройте конструктор базы данных.

    Не требуется указывать значение для taskid, так как он является идентифицирующим столбцом, значение в котором назначается автоматически. В поле isComplete необходимо указать False или True.

В этом разделе используйте элемент управления LinqDataSource для создания классов, представляющих сущности баз данных. Создаваемый элемент управления и классы являются уровнем доступа к данным, который будет использоваться в этом пошаговом руководстве.

Элемент управления LinqDataSource предоставляет веб-разработчикам встроенные в язык запросы (LINQ) посредством архитектуры источников данных ASP.NET. Элемент управления LinqDataSource создает код для выбора, вставки, обновления и удаления объектов в базе данных. В LINQ применяются принципы объектно-ориентированного программирования к реляционным данным. LINQ предоставляет унифицированную модель программирования для создания запросов и обновления данных из различных типов источников, а также расширяет возможности обработки данных непосредственно в языках C# и Visual Basic. Дополнительные сведения о LINQ см. в разделе LINQ.

Сопоставление баз данных задач объекту контекста данных SQL

Чтобы начать создание уровня доступа к данным, добавьте к проекту типизированный набор данных.

Создание класса для таблицы TasksList

  1. Если веб-узел еще не содержит папку App_Code, в Обозревателе решений щелкните правой кнопкой имя веб-узла, нажмите кнопку Добавить папку ASP.NET и затем нажмите App_Code.

  2. Щелкните правой кнопкой мыши папку App_Code и выберите команду Добавить новый элемент.

  3. В разделе Установленные шаблоны Visual Studio выберите Классы LINQ-SQL, измените имя файла на "Tasks.dbml" и затем щелкните Добавить.

    Откроется Реляционный конструктор объектов.

  4. В Обозревателе серверов перетащите таблицу TasksList в окно Реляционный конструктор объектов.

  5. Сохраните файл Tasks.dbml.

    При сохранении файла Visual Studio создает два файла в папке App_Code в группе "Tasks.dbml". Первым файлом является Tasks.dbml.layout. Вторым файлом является Tasks.designer.cs или Tasks.designer.vb, в зависимости от языка, выбранного при создании файла Tasks.dbml.

  6. Откройте файл Tasks.designer.cs или Tasks.designer.vb в Обозревателе решений.

    Обратите внимание, что код содержит классы с именами TasksDataContext и TasksList. Класс TasksDataContext представляет базу данных, а класс TasksList представляет таблицу этой базы данных. Конструктор без параметров для класса TasksDataContext считывает строку подключения из файла Web.config.

  7. Откройте файл Web.config.

    Обратите внимание, что в элемент connectionStrings добавлена строка подключения к базе данных Tasks.mdf.

  8. Закройте файл класса, окно Реляционный конструктор объектов и файл Web.config.

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

Создание и настройка элемента управления LinqDataSource

  1. Откройте страницу Default.aspx или перейдите к ней.

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

  3. Перетащите на страницу элемент управления LinqDataSource.

    Для свойства ID можно оставить значение LinqDataSource1.

  4. В области смарт-тега Задачи LinqDataSource нажмите кнопку Настройка источника данных.

    ПримечаниеПримечание

    Если панель смарт-тега не отображается, щелкните правой кнопкой элемент управления LinqDataSourceи выберите команду Показать смарт-тег.

  5. В списке Выберите контекстный объект выберите TasksDataContext и затем щелкните Далее.

  6. В списке Таблица выберите TasksLists(Table<TasksList>) и затем щелкните Готово.

  7. В меню Задачи LinqDataSource выберите Включить Delete, Включить Insert и Включить Update.

    Обратите внимание, что не требовалось задавать какие-либо команды базы данных для выбора данных.

  8. Сохраните страницу.

В этом разделе добавьте элементы управления на страницу, которая использует файл "Классы LINQ – SQL", сопоставивший таблицу базы данных классам. Также используйте элемент управления LinqDataSource для создания базового приложения данных.

Добавьте элемент управления ListView для отображения данных из базы данных SQL Server. Затем добавьте элемент управления DropDownList для фильтрации данных, отображаемых в элементе управления ListView. Позже в пошаговом руководстве элементы управления буду помещены в элемент управления UpdatePanel для добавления совместимости асинхронной обратной связи.

Отображение данных с помощью элемента управления ListView

Элемент управления ListView может использоваться для отображения данных в любой повторяющейся структуре, как и элементы управления DataList и Repeater. Однако в отличие от этих элементов управления, ListView поддерживает операции изменения, вставки и удаления, а также сортировку и разбиение по страницам.

Можно добавить элемент управления ListView, который отображает все задачи. Затем добавьте раскрывающийся список, позволяющий фильтровать данные. Элемент управления ListView форматирует представление данных и отображает кнопки, которые можно использовать для изменения и обновления содержимого или для вставки нового содержимого.

Добавление элемента управления ListView к панели

  1. Откройте или перейдите к странице, на которой был добавлен элемент управления LinqDataSource.

  2. Перетащите с вкладки ДанныеПанели инструментов элемент управления ListView на страницу.

  3. В меню Задачи ListView в списке Выбор источника данных выберите LinqDataSource1.

    Это привяжет объект ListView к элементу управления LinqDataSource, сконфигурированному ранее в этом пошаговом руководстве.

  4. В области смарт-тега Задачи ListView выберите Настройка ListView.

  5. В диалоговом окне Настройка ListView выберите Разрешить изменение, Разрешить вставку, Разрешить удаление и Разрешить разбиение по страницам.

  6. Нажмите кнопку ОК.

  7. Сохраните страницу.

Добавление элемента управления фильтрации данных

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

Можно ввести код в элементе управления ListView для автоматического генерирования предложения "Where" для отображения только тех записей, которые соответствуют выбору в элементе управления DropDownList.

Добавление элемента управления для фильтрации данных

  1. Откройте или перейдите к странице Default.aspx и перейдите в режим Источник.

  2. В элементе управления form и над элементом управления ListView добавьте следующую разметку:

    <span id="filter">
      Current List Filter: 
      <asp:DropDownList ID="DropDownList1" 
        AutoPostBack="true" 
        runat="server">
      <asp:ListItem Text="Active" Value="False" />
      <asp:ListItem Text="Completed" Value="True" />
      </asp:DropDownList>
    </span>
    <hr id="separator" />
    
  3. В элементе управления LinqDataSource установите для свойства AutoGenerateWhereClause значение true, как показано в следующем примере:

    <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
      ContextTypeName="TasksDataContext" 
      TableName="TasksLists" 
      EnableDelete="True" 
      EnableInsert="True" 
      EnableUpdate="True" 
      AutoGenerateWhereClause="true" >
    
  4. Добавьте следующую разметку для параметров "Where" между тегами открытия и закрытия элемента управления LinqDataSource.

    <WhereParameters>
      <asp:ControlParameter 
        Name="isComplete" 
        ControlID="DropDownList1" 
        Type="Boolean" />
    </WhereParameters>
    
  5. Сохраните страницу.

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

Тестирование страницы

  1. Нажмите сочетание клавиш CTRL+F5, чтобы отобразить страницу в обозревателе.

  2. Выберите Завершено из раскрывающегося списка.

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

В этом разделе добавьте элемент управления ScriptManager на страницу, чтобы включить возможности Ajax компонента ASP.NET. Затем добавьте элемент управления UpdatePanel на страницу, которая позволяет выполнять задачи в элементе управления ListView без обратной передачи целой страницы.

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

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

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

  1. Откройте или перейдите к странице Default.aspx и перейдите в режим Источник.

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

Размещение элемента управления ListView в элементе управления UpdatePanel

В этом примере разместите объект ListView внутри элемента управления UpdatePanel. Изменения в элементе управления ListView не требуют полной обратной передачи.

Размещение элемента управления ListView внутри элемента управления UpdatePanel

  1. На странице Default.aspx добавьте следующую разметку после открывающего тега <form>:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    
  2. Добавьте следующий код после закрывающего тега </form>:

    </ContentTemplate>
    </asp:UpdatePanel>
    

    Этот код размещает элемент управления UpdatePanel вокруг элемента управления ListView и DropDownList.

  3. Сохраните страницу.

Теперь можно еще раз протестировать страницу.

Тестирование страницы

  • Нажмите сочетание клавиш CTRL+F5, чтобы просмотреть страницу в обозревателе.

    Обратите внимание, что при выборе Активно или Завершено в фильтре списков обратной передачи полной страницы не происходит, и объект ListView отображает обновленный список данных без эффекта мерцания.

В данном пошаговом руководстве показано, как добавить объект ListView к странице с элементом управления LinqDataSource, чтобы добавлять, изменять и удалять задачи из базы данных. Затем были добавлены функциональные возможности Ajax с помощью элемента управления UpdatePanel.

Дополнительные сведения о том, как работать с базами данных, можно найти в пошаговых руководствах Пошаговое руководство. Привязка данных к пользовательским бизнес-объектам и Пошаговое руководство: создание основных веб-страниц и страниц подробностей в Visual Studio.

Показ: