Пошаговое руководство. Создание вложенного элемента управления GridView

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

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

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

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

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

• Подключаться к базе данных SQL Server в Microsoft Visual Web Developer.

• Использовать элемент управления SqlDataSource для управления доступом к данным и связыванием.

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

• Создавать TemplateField с вложенными элементами управления, которые будут отображаться элементом управления GridView.

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

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

Необходимые компоненты

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

• Visual Web Developer (Visual Studio).

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

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

• Доступ к базе данных «Борей» на SQL Server. Сведения о загрузке и установке образца — базы данных Northwind SQL Server — содержатся в разделе Installing Sample Databases на веб-узле Microsoft SQL Server.

  Примечание.
  Если требуется информация о том, как войти на компьютер с SQL Server, обратитесь к администратору сервера.

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

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

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

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

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

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

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

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

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

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

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

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

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

Для отображения данных на веб-странице ASP.NET требуется следующее:

• Подключение к источнику данных, например к базе данных. В следующей процедуре будет создано подключение к базе данных Northwind SQL Server.

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

В следующей процедуре данные отображаются в элементе управления GridView. Элемент управления GridView возвращает данные из элемента управления SqlDataSource.

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

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

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

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

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

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

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

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

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

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

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

6. На странице Добавить подключение в поле Имя сервера введите имя сервера SQL Server, на котором установлена база данных «Борей».

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

8. Установите флажок Сохранить мой пароль, если введен пароль.

9. Выберите переключатель Выберите или введите имя базы данных, а затем введите Northwind.

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

11. В Мастере настройки источника данных нажмите кнопку Далее.

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

13. Назовите подключение NorthwindConnectionString и затем нажмите кнопку Далее.

14. На шаге мастера Настройте оператор Select выберите Укажите столбцы из таблицы или представления.

15. В поле со списком Имя выберите Клиенты.

16. В панели Столбцы выберите столбцы Клиент и Название.

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

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

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

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

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

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

1. Убедитесь, что находитесь в представлении конструирования для страницы Default.aspx.

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

3. В меню Задачи GridView в поле со списком Выбор источника данных выберите добавленный элемент управления SqlDataSource — SqlDataSource1.

4. Установите флажок Включить разбиение по страницам.

5. В окне «Свойства» разверните свойство RowStyle элемента управления GridView и задайте для свойства VerticalAlign значение Top. В результате текст в строке таблицы будет выровнен по верхней границе ячеек, так как вложенная таблица будет содержать несколько строк.

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

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

• Создайте TemplateField для строк, которые будут отображаться элементом управления GridView.

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

• Добавьте процедуру управления событием RowDataBound, которое возникает в родительском элементе управления GridView, чтобы задать значение параметра выбора для вложенного элемента управления SqlDataSource.

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

1. Убедитесь, что находитесь в представлении конструирования для страницы Default.aspx.

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

3. Нажмите Правка столбцов.

   Появится диалоговое окно Поля.

4. В панели Доступные поля выберите TemplateField и щелкните Добавить.

5. В панели Свойства TemplateField установите для заголовка HeaderText текст Заказы.

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

7. В панели Задачи GridView нажмите Редактировать шаблоны.

8. В панели Режим изменения шаблона в поле списком Отобразить выберите ItemTemplate.

9. Из группы Данные в панели элементов перетащите элемент управления SqlDataSource на страницу в редактируемую область шаблона ItemTemplate.

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

10. В смарт-теге Задачи SqlDataSource щелкните Настроить источник данных.

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

11. На странице мастера Выбор подключения базы данных выберите NorthwindConnectionString, которая была создана на одном из предыдущих этапов пошагового руководства, а затем щелкните Далее.

12. На шаге мастера Настройте оператор Select выберите Укажите столбцы из таблицы или представления.

13. В списке Имя выберите Заказы.

14. В панели Столбцы выберите столбцы ИД_заказа и Дата_заказа.

15. Щелкните WHERE, чтобы добавить параметр для оператора SELECT.

16. В окне Добавить предложение WHERE выберите Клиент в поле со списком Столбец.

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

18. Нажмите Добавить.

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

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

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

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

22. Из группы Данные в панели элементов перетащите элемент управления GridView на страницу в редактируемую область шаблона ItemTemplate.

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

23. В поле со списком Выбор источника данных смарт-тега Задачи GridView выберите имя вложенного элемента управления SqlDataSource — SqlDataSource2.

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

25. В панели Задачи GridView щелкните Завершить изменение шаблона.

    Примечание.
    Вложенный элемент управления GridView не отображается в представлении конструирования.

26. В панели Свойства для GridView1 нажмите кнопку События.

27. В поле RowDataBound введите GridView1_RowDataBound, а затем нажмите клавишу ВВОД.

    Visual Web Developer создаст обработчик событий для события RowDataBound элемента управления GridView. Код будет аналогичен коду, который приведен в следующем примере.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
    
    End Sub
    

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
    
    }
    

28. Добавьте в процедуру следующий код:

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
        s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
    End If
    

    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
        s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
    }
    

    Этот код извлекает значение Клиент для текущего столбца и задает его как значение параметра выбора для вложенного элемента управления SqlDataSource — SqlDataSource2.

29. Сохраните изменения в файле.

Проверка страницы

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

Проверка страницы

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

   Элемент управления GridView отображает строки данных из таблицы Customers базы данных «Борей» одновременно с данными из таблицы Orders базы данных «Борей» для каждого клиента, размещенного в отдельной строке.

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

Вложенный элемент управления GridView и кэширование

На данном этапе пошагового руководства у вас уже должна быть создана страница с вложенными элементами управления GridView. Как утверждалось выше, страница направляет один запрос для родительского элемента управления GridView и второй запрос для каждого вложенного элемента управления GridView.

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

Примечание.
Для больших баз данных это решение не является оптимальным. Если необходимо извлечь данные из большой базы данных постройте объект данных, который извлекал бы только нужные строки, и установите к нему привязку с помощью элемента управления ObjectDataSource. Дополнительные сведения см. в разделе Общие сведения о серверном веб-элементе управления ObjectDataSource.

Настройка вложенного элемента управления SqlDataSource для кэширования результатов запроса

1. Убедитесь, что находитесь в представлении конструирования для страницы Default.aspx.

2. Щелкните правой кнопкой мыши родительский элемент управления GridView — GridView1, а затем щелкните Изменить шаблон.

3. В шаблоне ItemTemplate для столбца Заказы, выберите вложенный элемент управления SqlDataSource — SqlDataSource2.

4. В окне «Свойства» присвойте свойству EnableCaching значение true.

5. Установите для свойства FilterExpression значение CustomerID='{0}'.

6. В свойстве FilterParameters нажмите кнопку с многоточием , чтобы открыть окно Редактор коллекции параметров.

7. В окне Редактор коллекции параметров щелкните Добавить параметр.

8. В поле Имя введите Клиент.

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

10. Щелкните правой кнопкой мыши вложенный элемент управления SqlDataSource — SqlDataSource2 и выберите Показать смарт-тег.

11. Щелкните Настроить источник данных.

12. Не изменяйте сведения о подключении и щелкните Далее.

13. На шаге мастера Настройте оператор Select выберите Укажите столбцы из таблицы или представления.

14. В поле со списком Имя выберите Клиенты.

15. В разделе Столбцы установите флажки для столбцов Клиент, Название и ДатаРазмещения, а затем щелкните Далее.

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

17. Если появится запрос на обновление полей и ключей для вложенного элемента управления GridView — GridView2, щелкните Нет.

    Столбцы, отображающиеся вложенным элементом управления GridView, не изменятся.

    В результате вложенный элемент управления SqlDataSource — SqlDataSource2 будет настроен таким образом, чтобы из базы данных извлекались все данные заказов и кэшировались локально. Если вложенный элемент управления GridView привязан к данным, применяется фильтр для того, чтобы в текущей строке отображались заказы, связанные с конкретным значением Клиент.

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

19. Замените код в обработчике событий RowDataBound следующим кодом.

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
        s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
    End If
    

    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
        s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
    }
    

    Данная версия кода предусматривает, что в элементе управления SqlDataSource значение задается не в коллекции SelectParameters, а в коллекции FilterParameters.

20. Сохраните файл.

Проверка страницы

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

Проверка страницы

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

   Элемент управления GridView отображает строки данных из таблицы Customers базы данных «Борей» одновременно с данными из таблицы Orders базы данных «Борей» для каждого клиента, размещенного в отдельной строке. Однако, запрос всех данных, связанных с элементом управления GridView будет выполняться один раз, если первая строка содержит данные с привязкой. Затем выполняется кэширование данных, которые будут использоваться в остальных строках элемента управления GridView.

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

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

В данном пошаговом руководстве мы показали, каким образом можно расширить функциональные возможности элемента управления GridView, чтобы связанные данные отображались на веб-странице ASP.NET с помощью элементов управления GridView. Также элементы управления DetailsView и FormView позволяют расширить функциональные возможности приложения таким образом, чтобы можно было обновлять и удалять данные или же разрешить пользователям вставлять новые записи. Кроме элемента управления TextBox для изменения значения можно также использовать другие элементы управления, например — DropDownList. Дополнительные сведения см. в следующих разделах:

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

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

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

См. также

Задачи

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

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

Пошаговое руководство. Основы доступа к данным на веб-страницах