Пошаговое руководство. Изменение данных с помощью серверного веб-элемента управления ListView

Visual Studio 2010

Элемент управления ASP.NET ListView обладает встроенными функциональными возможностями, позволяющими пользователям вставлять, редактировать или удалять записи без программирования.

В данном пошаговом руководстве показано, как отображать и обновлять данные используя элемент управления ListView. В данном пошаговом руководстве элемент управления SqlDataSource используется для извлечения результатов из источника данных и для управления обновлениями. Элемент управления SqlDataSource выступает в качестве источника данных для элемента управления ListView.

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

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

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

Проект Visual Studio с исходным кодом этого примера, прилагающийся к этому разделу, доступен на странице загрузки.

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

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

  • Проект веб-сайта или веб-приложения ASP.NET. Пример создания веб-проекта см. в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Studio.

  • Доступ к базе данных School. Образец базы данных School можно загрузить на веб-сайте CodePlex. Образец базы данных School также добавлен в образец проекта Visual Studio, который прилагается к данному пошаговому руководству. (загрузки)

В этом подразделе необходимо добавить элемент управления ListView на страницу и настроить его для отображения и изменения данных из таблицы Course базы данных School.

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

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

  2. В Обозревателе решений щелкните правой кнопкой мыши папку App_Data и выберите команду Добавить существующий элемент.

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

  3. Укажите расположение файла базы данных School (School.mdf).

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

    При выполнении этого действия файл School.mdf будет скопирован в папку App_Data.

  4. Перейдите к файлу Default.aspx или откройте его.

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

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

  7. В раскрывающемся списке Выберитеисточник данных меню Задачи ListView выберите <Новый источник данных...>.

    На следующем рисунке показано меню Общиезадачи ListView.

    Задачи ListView

    Появится мастер настройки источника данных. На следующем рисунке показан мастер Настройка источника данных.

    Мастер настройки источника данных
  8. Выберите пункт База данных.

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

  9. В поле Укажите идентификатор источника данных отображается имя элемента управления источником данных по умолчанию, SqlDataSource1. Можно оставить это имя.

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

    Появится мастер настройки источника данных.

  11. В списке Какое подключение ваше приложение должно использовать для работы с базой данных? выберите файл School.mdf.

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

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

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

    • Это более безопасно, чем сохранение ее на странице.

    • Можно использовать одну строку подключения на нескольких страницах.

  13. Убедитесь, что флажок Да, сохранить подключение как установлен и нажмите кнопку Далее. Можно оставить имя строки подключения, используемое по умолчанию.

    Появится мастер Настройка источника данных, где можно указать, какие данные требуется извлечь из базы данных.

  14. Установите переключатель Укажите столбцы из таблицы или представления. На следующем рисунке показан мастер настройки источника данных.

    Настроить оператор выбора
  15. Выберите таблицу Course и затем установите флажок (*), чтобы выбрать все столбцы.

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

  17. Установите флажок Создать операторы INSERT, UPDATE и DELETE и затем нажмите кнопку ОК.

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

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

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

    Мастер создаст элемент управления SqlDataSource и добавит его на страницу. Элемент управления ListView, который был добавлен ранее, связывается с элементом управления SqlDataSource.

  21. Щелкните правой кнопкой мыши элемент управления ListView и выберите команду Показать смарт-тег.

  22. В меню Задачи ListView выберите пункт Настройка ListView.

    Появится диалоговое окно Настройка ListView.

  23. В группе Параметры выберите флажки Разрешить изменение, Разрешить вставку и Разрешить удаление. На следующем рисунке показано диалоговое окно Настройка ListView.

    Настроить ListView
    ПримечаниеПримечание

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

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

    Настроенный элемент управления ListView должен выглядеть аналогично показанному на следующем рисунке.

    Настроенное представление ListView

Теперь можно проверить элемент управления ListView.

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

  1. Нажмите клавиши CTRL+F5 для запуска страницы.

    Элемент управления ListView отображается со столбцами CourseID, Title, Credits и DepartmentID.

  2. Нажмите кнопку Правка для изменения записи в таблице.

  3. Измените значения и затем нажмите кнопку Обновить или нажмите кнопку Отмена для отмены операции изменения.

  4. В поля внизу страницы введите значения и затем нажмите кнопку Вставка, чтобы вставить новую запись. Для столбца DepartmentID необходимо ввести 1, 2, 4 или 7.

  5. Нажмите кнопку Удалить только что вставленной записи для удаления записи из базы данных.

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

Показ: