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

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

Microsoft Visual Web Developer позволяет создавать формы ввода данных для обновления записей и вставки новых записей в базу данных с помощью только несколько строк кода. Используя комбинацию элементов управления источниками данных, инкапсулирующих доступ к данным, и элементы управления DetailsView и GridView, отображающие записи в редактируемом формате, можно создать страницу записи данных, позволяющую пользователям изменять существующие записи или добавлять новые, вообще не используя какой-либо код.

В процессе выполнения этого пошагового руководства вы научитесь:

• Создавать страницу записи данных.

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

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

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

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

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

• Visual Web Developer.

• Компоненты доступа к данным MDAC 2.7 или более поздней версии.

  При использовании операционных систем Microsoft Windows XP или Windows Server 2003 MDAC 2.7 уже установлен на компьютере. Однако при использовании Microsoft Windows 2000 может оказаться необходимым обновить установленный MDAC. Текущую версию MDAC можно загрузить с веб-узла Центра разработчиков доступа к данным и хранения данных.

• Доступ к учебной базе данных «Борей» на SQL Server. Сведения о загрузке и установке образца базы данных «Борей» SQL Server см. в документе Установка образцов баз данных на веб-узле Microsoft SQL Server.

  Примечание.
  Получите сведения о входе в систему SQL Server у администратора сервера.

• Разрешение на изменение данных в примере базы данных «Борей».

Создание веб-узла и страницы

Создайте новый веб-узел и страницу, выполнив следующие действия.

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

1. Откройте Visual Web Developer.

2. В меню Файл выберите пункт Создать и нажмите кнопку Веб-узел. При использовании Visual Web Developer Express, в меню Файл щелкните Создатьвеб-узел.

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

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

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

   Например, введите имя папки C:\WebSites\EditData.

5. Из списка Язык выберите язык программирования, с которым вы предпочитаете работать.

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

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

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

Подключение к SQL Server

На следующем этапе необходимо подключиться к базе данных SQL Server.

Создание подключения к базе данных SQL Server

1. В обозревателе серверов щелкните правой кнопкой мыши Подключения данных, а затем Добавить подключение. При использовании Visual Web Developer Express, используйте обозреватель баз данных.

   Открывается диалоговое окно Добавить подключение.

   • Если в списке Источник данных отсутствует элемент Microsoft SQL Server (SqlClient), нажмите кнопку Изменить и в диалоговом окне Изменить источник данных выберите Microsoft SQL Server.

   • При отображении страницы Выбрать источник данных в списке Источник данных выберите тип используемого источника данных. В этом пошаговом руководстве в качестве типа источника данных используется Microsoft SQL Server. Из списка Поставщик данных выберите Поставщик данных .NET Framework для SQL Server и нажмите кнопку Продолжить.

   Примечание.
   Если вкладка Обозреватель серверов не видна в Visual Web Developer, то в меню Вид щелкните Обозреватель серверов. Если вкладка Обозреватель баз данных не видна в экспресс-выпуске, то в меню Вид щелкните Обозреватель баз данных.

2. В поле Добавить подключение введите имя сервера в поле Имя сервера.

3. Для раздела Вход на сервер выберите параметр, который подходит для доступа к запущенной базе данных SQL Server (встроенная безопасность или определенный идентификатор и пароль) и при необходимости введите имя пользователя и пароль. При вводе пароля установите флажок Сохранить мой пароль.

4. В разделе Выберите или введите имя базы данных введите Борей.

5. Нажмите кнопку Проверить подключение и, убедившись в его наличии, нажмите кнопку ОК.

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

Создание страницы записи данных

В этом разделе описано создание страницы записи данных и настройка элемента управления DetailsView для обеспечения возможности просматривать данные сотрудников, которые хранятся в таблице Employees базы данных «Борей». Для обработки доступа к данным на этой странице необходимо настроить элемент управления источником данных SQL.

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

1. В меню Веб-узел выберите команду Добавить новый элемент.

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

2. В разделе Установленныешаблоны Visual Studio выберите Web Form и введите в поле ИмяEditEmployees.aspx.

3. Выберите команду Добавить.

4. Откройте страницу EditEmployees.aspx.

5. Перейдите в режим конструктора.

6. Введите Редактировать сотрудников, выделите текст, а затем отформатируйте текст как заголовок.

7. Из группы Данные в Панели элементов перетащите элемент DetailsView на страницу.

8. Щелкните правой кнопкой мыши элемент управления DetailsView, нажмите кнопку Свойства, а затем присвойте AllowPaging значение true.

   Это позволит перелистывать отдельные записи сотрудников при их отображении.

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

Настройка элемента управления источником данных

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

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

   Открывается диалоговое окно Мастер настройки источника данных.

3. В разделе Выбор типа источника данных щелкните База данных.

4. Оставьте имя по умолчанию SqlDataSource1 и нажмите кнопку ОК.

   Мастер настройки источника данных отображает страницу Выберите подключение.

5. В поле Какое подключение ваше приложение должно использовать для работы с базой данных? введите подключение, созданное на шаге «Создание подключения к SQLServer» и нажмите кнопку Далее.

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

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

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

6. Установите флажок Да, сохранить подключение как и щелкните Далее.

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

7. На странице Настройте оператор Select выберите Укажите столбцы из таблицы или представления, а затем в поле Имя щелкните Employees.

8. В разделе Столбцы установите флажки EmployeeID, LastName, FirstName и HireDate и щелкните Далее.

9. Нажмите кнопку Проверка запроса для предварительного просмотра данных и щелкните Готово.

Теперь можно протестировать страницу отображения записей сотрудников.

Тестирование отображения записей о сотрудниках

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

   Первая запись сотрудника отображается в элементе управления DetailsView.

2. Нажимайте ссылки с номерами страниц для просмотра остальных записей сотрудников.

3. Закройте обозреватель.

Разрешение на редактирование в элементе управления GridView

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

Примечание.
Элемент управления GridView предоставляет список записей и позволяет редактировать их. Однако он запрещает вставлять записи. Позже в этом пошаговом руководстве будет использоваться элемент управления DetailsView, позволяющий добавлять новые записи.

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

Добавление элемента управления GridView для разрешения редактирования

1. Из группы Данные в Панели элементов перетащите элемент GridView на страницу.

2. Щелкните правой кнопкой мыши элемент управления GridView, щелкните Показать смарт-теги, а затем в меню Задачи GridView выберите в поле Выбор источника данныхSqlDataSource1.

3. В меню Задачи GridView щелкните Настроить источник данных.

4. Нажмите кнопку Далее для перехода на страницу Настройте оператор Select мастера.

5. На странице Настройте оператор Select выберите Дополнительно, установите флажок Создать операторы INSERT, UPDATE и DELETE, а затем нажмите кнопку ОК.

   Это приводит к созданию инструкций INSERT, UPDATE и DELETE для элемента управления SqlDataSource1 на основе инструкции SELECT, настроенной ранее.

   Примечание.
   Или можно вручную создать инструкции, выбрав Укажите специальную инструкцию SQL или хранимую процедуру и введя SQL-запросы.

6. Нажмите кнопку Далее и кнопку Готово.

   Элемент управления SqlDataSource теперь настроен с использованием дополнительных инструкций SQL.

   Примечание.
   Можно проверить в инструкции, созданные мастером, выбрав элемент управления SqlDataSource и просмотрев свойства DeleteQuery, InsertQuery и UpdateQuery. Можно также просмотреть свойства обновленного элемента управления, переключившись на представление исходного кода и проверив разметку элемента управления.

7. В меню Задачи GridView установите флажки Включить постраничный просмотр и Разрешить изменение.

   Примечание о безопасности.

   Данные, вводимые пользователем на странице Web Forms ASP.NET, могут содержать потенциально небезопасный для клиента сценарий. По умолчанию веб-страницы ASP.NET проверяют введенные пользователем данные на наличие сценариев или HTML-элементов. Если такая проверка включена, нет необходимости явным образом проверять сценарий или элементы HTML в данных, введенных пользователем. Дополнительные сведения см. в разделе Общие сведения об использовании сценариев.

Теперь можно протестировать функцию редактирования записей сотрудников.

Тестирование функции редактирования в элементе управления GridView

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

   Элемент управления GridView отображается с данными в текстовых полях.

2. Выберите строку в элементе управления GridView и нажмите кнопку Изменить.

3. Измените запись и нажмите кнопку Обновить.

   Обновленные данные отображаются в элементах управления GridView и DetailsView.

4. Закройте обозреватель.

Разрешение изменения, удаления и вставки с помощью элемента управления DetailsView

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

Использование элемента управления DetailsView с возможностью удаления, вставки и обновления

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

2. В меню Задачи DetailsView установите флажки Разрешить вставку, Разрешить изменение и Разрешить удаление.

   При использовании элемента управления DetailsView ранее в этом пошаговом руководстве параметры для разрешения редактирования, вставки и удаления были недоступны. Это объясняется тем, что элемент управления SqlDataSource1, к которому привязан элемент управления DetailsView, не имел необходимых инструкций SQL. Теперь после настройки элемента управления источником данных для включения инструкции обновления параметры обновления доступны для элемента управления DetailsView.

Теперь можно протестировать функции удаления, вставки и обновления в элементе управления DetailsView.

Тестирование функций обновления, вставки и удаления в элементе управления DetailsView

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

   Элемент управления DetailsView отображает запись сотрудника.

2. На элементе управления DetailsView щелкните Правка.

   Элемент управления DetailsView теперь отображает данные в текстовых полях.

3. Измените запись и нажмите кнопку Обновить.

   Обновленные записи отображаются в элементе управления.

4. Нажмите Создать на элементе управления DetailsView.

   Элемент управления теперь отображает пустые текстовые поля для каждого столбца.

5. Введите значения для каждого столбца.

   Таблица Employees содержит столбец ключа с автоприращением, поэтому значение EmployeeID назначается автоматически при сохранении записи.

6. После завершения нажмите кнопку Вставить.

   Новая запись добавляется в качестве последней записи.

   Примечание.
   Вставка новой записи в таблицу Employees в этом пошаговом руководстве не приводит к возникновению ошибок. Однако при работе с коммерческими данными таблицы могут иметь ограничения (такие как ограничение внешнего ключа), которые необходимо учитывать при настройке элемента управления DetailsView.

7. Используйте разбиение по страницам в элементе управления DetailsView для перехода к последней записи и нажмите кнопку Удалить.

   Новая запись удаляется.

   Примечание.
   Как и при вставке данных, всегда необходимо учитывать все ограничения, применяемые к строкам данных, при настройке элемента управления DetailsView для разрешения удаления.

Следующие действия

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

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

• Использовать компонент среднего уровня для доступа к данным. Дополнительные сведения см. в разделе Пошаговое руководство. Привязка данных к пользовательским бизнес-объектам.

• Используйте другие способы настройки доступа к данным на веб-странице. Дополнительные сведения см. в разделе Пошаговое руководство. Основы доступа к данным на веб-страницах.

См. также

Задачи

Пошаговое руководство. Создание веб-страницы для отображения данных базы данных Access

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

Общие сведения об элементах управления источниками данных

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