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

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

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

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

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

• Осуществлять привязку элемента управления DataList к источнику данных.

• Добавлять дочерний элемент управления данными и определенный код в элемент управления DataList для отображения данных в отношении "главный/подчиненный".

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

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

• Microsoft Visual Web Developer (Visual Studio).

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

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

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

  Если используется Microsoft Windows XP или Windows Server 2003, то компоненты MDAC версии 2.7 уже установлены. Однако если используется Microsoft Windows 2000, то может потребоваться обновление компонентов доступа к данным MDAC, уже установленных на компьютере. Дополнительные сведения содержатся в разделе "Установка компонентов доступа к данным MDAC" в библиотеке MSDN.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление элемента управления DataList для отображения данных в сетке

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

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

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

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

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

5. Нажмите кнопку База данных.

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

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

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

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

8. Выберите Новое подключение.

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

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

9. На странице Добавить подключение в текстовом поле Имя сервера введите имя компьютера, на котором размещена база данных SQL Server.

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

11. Установите флажок Сохранить пароль.

12. Нажмите кнопку Выбрать или ввести имя базы данных, а затем введите Northwind.

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

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

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

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

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

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

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

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

16. Убедитесь, что установлен флажок Укажите столбцы из таблицы или представления.

17. В списке Имя щелкните Категории.

18. В группе Столбцы установите флажки CategoryID и CategoryName.

    Мастер настройки источника данных отобразит инструкцию SQL, которая создается в поле в нижней части страницы.

    Примечание.
    Мастер настройки источника данных позволяет задать критерии (предложение WHERE) и другие параметры запроса SQL. В этой части пошагового руководства создается простая инструкция без параметров выборки или сортировки.

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

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

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

    Окно мастера настройки источника данных закрывается и происходит возвращение к элементу управления SqlDataSource. Если просмотреть свойства элемента управления SqlDataSource, можно увидеть, что мастер настройки источника данных создал значения для свойств ConnectionString и SelectQuery. Хотя в окне "Свойства" в Visual Web Developer отображается полная строка подключения, на странице сохраняется только ее идентификатор (в этом случае — NorthwindConnectionString).

Форматирование структуры элемента управления DataList

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

Форматирование структуры в элементе управления DataList

1. Щелкните правой кнопкой элемент управления DataList, выберите пункт Изменить шаблон и затем команду Шаблоны элементов.

   Элемент управления DataList переключается в режим правки шаблона и отображает поля для этих шаблонов:

   • ItemTemplate, содержащий текст и элементы управления, отображаемые по умолчанию в элементе управления DataList.

   • AlternatingItemTemplate, необязательный компонент, в котором можно создавать макет, используемый в других записях данных. Обычно свойство AlternatingItemTemplate аналогично свойству ItemTemplate, но свойство AlternatingItemTemplate использует другой цвет фона для эффекта полосы.

   • SelectedItemTemplate, определяющее структуру записи данных, выбираемую напрямую при нажатии кнопки или другого действия. Обычно этот шаблон используется для расширенного представления записи данных или служит главной записью в отношении "главный/подчиненный". Необходимо написать код, поддерживающий перевод записи в выбранный режим. (В данном пошаговом руководстве этот код не описывается. Дополнительные сведения см. в разделах Практическое руководство. Выбор пользователями элементов в серверном веб-элементе управления DataList и Пошаговое руководство: создание основных веб-страниц и страниц подробностей в Visual Studio).

   • EditItemTemplate, определяющий структуру режима редактирования записи данных. Обычно свойство EditItemTemplate включает редактируемые элементы управления, такие как TextBox и CheckBox, в которых пользователи могут изменять запись данных. Необходимо написать код для поддержки перевода записи в режим редактирования и сохранения записи после редактирования. (В этом руководстве этот код не описывается. Дополнительные сведения о написании кода для редактирования записей см. в разделе Практическое руководство. Предоставление пользователям разрешения на изменение элементов в серверном веб-элементе управления DataList).

   По умолчанию Visual Web Developer выполняет заполнение шаблона элемента элементом управления Label с привязкой к данным для каждого столбца данных источника данных. Кроме того, Visual Web Developer создает статический текст для каждой метки, действующей в качестве заголовка.

2. Перетащите правый маркер изменения размера для расширения элемента управления DataList, чтобы он занимал большую часть страницы по ширине.

3. Отредактируйте элемент шаблона, чтобы переупорядочить элементы управления Label и создайте новый заголовок, чтобы содержимое шаблона было аналогично следующему примеру кода:

   Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
   

4. Щелкните элемент управления CategoryNameLabel. В окне "Свойства" разверните узел Шрифт и присвойте свойству Полужирный значение true.

5. В режиме конструктора в элементе управления DataList щелкните правой кнопкой заголовок окна, выберите пункт Изменить шаблон, а затем щелкните Шаблон разделителя.

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

6. В панели элементов из группы HTML перетащите элемент Стиль горизонтальной линии в шаблон разделителя.

7. В элементе управления DataList щелкните правой кнопкой заголовок окна и выберите пункт Завершить изменение шаблона.

Проверка элемента управления DataList

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

Проверка элемента управления DataList

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

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

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

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

Макет может содержать текущую запись, а также связанные с ней записи. В этой части руководства макет изменяется так, чтобы в каждой строке отображалась категория и продукты этой категории. Фактически отображается отношение "главный/подчиненный" в каждой строке элемента управления DataList. Для реализации необходимо написать небольшую часть кода.

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

1. Щелкните правой кнопкой элемент управления DataList, выберите пункт Изменить шаблоны и затем команду Шаблоны элементов.

2. В панели элементов перетащите из группы Стандартные элемент управления Маркированный список в элемент шаблона и расположите элемент управления Маркированный список под данными категориями.

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

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

4. Щелкните Выбор источника данных.

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

5. В диалоговом окне Выбор источника данных выберите из списка Выбор источника данных пункт Создать источник данных.

6. Выберите База данных.

7. В поле Укажите идентификатор источника данных введите bulletedListDataSource.

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

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

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

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

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

10. В группе Specify columns from a table or view в раскрывающемся списке Имя выберите Products.

11. В поле Столбцы выберите поле ProductName.

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

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

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

13. В списке Столбцы щелкните CategoryID.

14. В списке Операторы выберите =.

15. В списке Источник выберите Отсутствует.

    Это означает, что значение столбца CategoryID задается переменной.

16. Нажмите кнопку Добавить, затем кнопку ОК, потом кнопку Далее, а после этого нажмите кнопку Готово.

    Проверка запроса не работает с переменной.

17. В списке Выбор поля данных, отображаемого в маркированном списке выберите ProductName. Нажмите кнопку ОК.

18. В элементе управления DataList щелкните правой кнопкой заголовок окна и выберите пункт Завершить изменение шаблона.

Написание кода для определения идентификатора категории

Созданная для элемента управления bulletedListDataSource инструкция SQL аналогичен следующему коду:

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

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

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

Написание кода для определения идентификатора категории

1. Щелкните элемент управления DataList и в окне "Свойства" в панели инструментов выберите События.

2. Дважды щелкните ItemDataBound, чтобы создать для него обработчик.

3. Скопируйте следующий код в обработчик.

   If e.Item.ItemType = ListItemType.Item Or _
       e.Item.ItemType = ListItemType.AlternatingItem Then
     Dim ds As SqlDataSource
     ds = CType(e.Item.FindControl("bulletedListDataSource"), _
         SqlDataSource)
     Dim categoryID As String
     categoryID = DataBinder.Eval(e.Item.DataItem, _
         "categoryid").ToString()
     ds.SelectParameters("CategoryID").DefaultValue = _
         categoryID
   End If
   

   if (e.Item.ItemType == ListItemType.Item ||
       e.Item.ItemType == ListItemType.AlternatingItem)
   {
     SqlDataSource ds;
     ds = e.Item.FindControl("bulletedListDataSource")
         as SqlDataSource;
     ds.SelectParameters["CategoryID"].DefaultValue =
         DataBinder.Eval(e.Item.DataItem,
         "categoryid").ToString();
   }
   

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

   1. Проверяет, что событие возникает при привязке объекта ItemTemplate или AlternatingItemTemplate (а не объекта SeparatorTemplate или другого типа шаблона).

   2. Использует метод FindControl для получения ссылки на экземпляр элемента управления SqlDataSource, созданный в каждом элементе шаблона.

   3. Получает значение столбца "CategoryID" при помощи текущего значения свойства DataItem.

   4. Задает переменную CategoryID параметризированного запроса, присваивая значение свойству DefaultValue в коллекции SelectParameters.

Проверка кода

Теперь можно проверить код.

Проверка кода определения идентификатора категории

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

  Элемент управления DataList отображает все записи категории, и для каждой из них в маркированном списке отображаются продукты этой категории.

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

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

• Написание кода, позволяющего пользователям выбирать элементы в серверном веб-элементе управления DataList. Дополнительные сведения см. в разделе Практическое руководство. Выбор пользователями элементов в серверном веб-элементе управления DataList.

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

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

См. также

Задачи

Практическое руководство. Выбор пользователями элементов в серверном веб-элементе управления DataList

Пошаговое руководство: создание основных веб-страниц и страниц подробностей в Visual Studio

Ссылки

DataList