Поделиться через

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

  • Статья

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

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

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

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

  • Привязывать элементы управления GridView и DataList к XML-данным.

  • Создавать страницы с отношением «основной-подробности», которые отображают логически связанные XML-данные.

  • Применять к XML-файлам преобразование, чтобы файл можно было использовать в виде табличных данных.

13ftcwy9.alert_note(ru-ru,VS.90).gifПримечание.

С XML также можно работать в иерархической форме. Дополнительные сведения см. в разделе Пошаговое руководство. Иерархические данные в элементе управления TreeView.

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

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

  • Microsoft Visual Web Developer;

  • Платформа .NET Framework

Данное пошаговое руководство подразумевает, что вы умеете работать в Visual Web Developer.

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

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

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

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

  2. В меню Файл выберите команду Создать веб-узел.

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

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

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

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

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

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

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

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

Создание XML-файла для данных

Создайте XML-файл на веб-узле, чтобы иметь XML-данные для работы.

Создание XML-файла

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

    13ftcwy9.alert_note(ru-ru,VS.90).gifПримечание.

    При помещении XML-файла в папку App_Data он будет обладать разрешениями, необходимыми для того, чтобы платформа ASP.NET могла считывать и записывать в него информацию во время выполнения. Кроме того, хранение файлов в папке App_Data защищает их от просмотра в обозревателе, поскольку папка App_Data помечена как недоступная для обзора.

  2. В разделе Установленные шаблоны Visual Studio выберите XML-файл.

  3. В поле Имя введите Bookstore.xml.

  4. Нажмите кнопку Добавить.

    Будет создан новый XML-файл, содержащий только XML-директиву.

  5. Скопируйте приведенные ниже XML-данные и вставьте их в файл поверх имеющегося там содержимого.

    <?xml version="1.0" standalone="yes"?>
<bookstore>
    <book ISBN="10-000000-001" 
        title="The Iliad and The Odyssey" 
        price="12.95">
    <comments>
        <userComment rating="4" 
            comment="Best translation I've read." />
        <userComment rating="2" 
            comment="I like other versions better." />
      </comments>
   </book>
   <book ISBN="10-000000-999" 
        title="Anthology of World Literature" 
        price="24.95">
   <comments>
      <userComment rating="3" 
          comment="Needs more modern literature." />
      <userComment rating="4" 
          comment="Excellent overview of world literature." />
   </comments>
   </book>
    <book ISBN="11-000000-002" 
        title="Computer Dictionary" 
        price="24.95" >
      <comments>
         <userComment rating="3" 
             comment="A valuable resource." />
      </comments>
   </book>
    <book ISBN="11-000000-003" 
        title="Cooking on a Budget" 
        price="23.95" >
   <comments>
      <userComment rating="4" 
          comment="Delicious!" />
    </comments>
    </book>
    <book ISBN="11-000000-004" 
        title="Great Works of Art" 
        price="29.95" >
   </book>
</bookstore>

    Файл Bookstore.xml содержит информацию о книгах, которые могут быть доступны в книжном интернет-магазине. Обратите внимание на следующие моменты, касающиеся XML-файла:

    • Значения свойств элементов задаются в виде атрибутов.

    • Файл имеет вложенную структуру — каждая книга может содержать значения своих свойств, а также один или несколько комментариев, в качестве отдельных элементов.

  6. Сохраните файл Bookstore.xml и закройте его.

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

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

Настройка доступа к данным XML-файла

  1. Откройте файл Default.aspx и переключитесь в режим конструктора.

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

  3. В меню ЗадачиXmlDataSource выберите команду Настроить источник данных.

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

  4. В поле Файл данных введите ~/App_Data/Bookstore.xml.

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

Элемент управления XmlDataSource делает данные в XML-файле доступными для элементов управления, находящихся на странице. Данные доступны в двух форматах: иерархическом и табличном. Элементы управления, привязанные к элементу управления XmlDataSource, могут получать данные в том формате, который им подходит.

В данном случае иерархия файла Bookstore.xml предоставляет возможность реляционной интерпретации. Два уровня файла (книги и комментарии) могут восприниматься как две связанные друг с другом таблицы.

Теперь можно отображать XML-данные в списочном элементе управления. Для начала отобразите часть XML-данных в элементе управления GridView.

Базовое отображение XML-данных с помощью элемента управления GridView

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

  2. В списке Выбор источника данных в меню Задачи GridView выберите XmlDataSource1.

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

    Страница отображает XML-данные в сетке.

Отображаемые в элементе управления GridView данные демонстрируют следующие моменты, касающиеся интерпретации XML-данных:

  • Когда XML-данные представлены в виде записи данных, то по умолчанию столбцы создаются из атрибутов (таких как ISBN).

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

Фильтрация XML-данных при помощи выражения XPath

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

В данной части пошагового руководства будет добавлен второй элемент управления GridView, который будет использован для отображения информации «основной-подробности». Пользователи смогут выбирать какую-либо книгу при помощи первого элемента управления GridView, а второй элемент управления GridView будет отображать связанные с ней пользовательские комментарии, если таковые имеются. Для отображения комментариев необходимо использовать выражение XPath, которое позволяет указывать, какой уровень файла XML-данных следует извлечь. Так как необходимо отображать комментарии только для выбранной книги, то выражение XPath будет создаваться динамически в зависимости от книги, которую выберет пользователь.

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

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

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

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

    Появится меню Задачи GridView.

  3. В окне Выбор источника данных выберите Новый источник данных.

    Запустится Мастер настройки источника данных.

  4. Выберите XML-файл в качестве источника данных.

  5. В поле Укажите идентификатор для источника данных оставьте значение по умолчанию — XmlDataSource2.

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

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

  7. В поле Файл данных введите ~/App_Data/Bookstore.xml.

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

  8. В поле Выражение XPath введите следующее выражение:

    /bookstore/book/comments/userComment

    Позже можно будет изменить свойство XPath в коде динамически. Тем не менее, задание выражения XPath для источника данных уже на этом этапе позволяет средствам Visual Web Designer определить, какая информация в конечном итоге будет отображаться в элементе управления.

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

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

  10. Выберите элемент управления GridView2 и задайте для свойства Visible в окне «Свойства» значение False.

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

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

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

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

  2. В меню Задачи GridView выберите команду Разрешить выделение.

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

  3. В окне «Свойства» установите для свойства DataKeyNames значение ISBN.

    Поле свойства можно щелкнуть, чтобы выбрать значение.

    При этом элемент управления GridView будет рассматривать свойство ISBN в качестве первичного ключа для всех элементов в XML-данных.

  4. Щелкните элемент управления GridView. В раскрывающемся списке в верхней части окна Свойства выберите События. Отобразятся все события, связанные с элементом управления.

  5. Дважды щелкните поле события SelectedIndexChanged.

    Произойдет переключение в режим редактора кода и будет создан каркас обработчика событий SelectedIndexChanged.

  6. Добавьте выделенный ниже код в обработчик событий.

    Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, _
    ByVal e As System.EventArgs) _
    Handles GridView1.SelectedIndexChanged
        Dim currentIndex As Integer        currentIndex = GridView1.SelectedIndex        Dim isbn As String        isbn = CStr(GridView1.DataKeys(currentIndex).Value)        XmlDataSource2.XPath = _            String.Format( _            "/bookstore/book[@ISBN='{0}']/comments/userComment", _            isbn)        GridView2.Visible = true
End Sub

    protected void GridView1_SelectedIndexChanged(Object sender, EventArgs e)
{
    String isbn = (String)         GridView1.DataKeys[GridView1.SelectedIndex].Value;        XmlDataSource2.XPath =             String.Format(              "/bookstore/book[@ISBN='{0}']/comments/userComment",             isbn);        GridView2.Visible = true;
}

    Этот код выполняет следующие действия:

    • Он использует свойство SelectedIndex (принадлежащее элементу управления GridView) для индексирования массива ключей данных, а затем возвращает первичный ключ выбранной строки. Ранее свойство DataKeyNames было настроено так, чтобы оно содержало номера ISBN.

    • Создает новое выражение XPath, которое содержит выбранный номер ISBN.

    • Заносит новое выражение XPath в свойство XPath (принадлежащее элементу управления XmlDataSource2). Занесение нового выражения XPath в свойство XPath приводит к повторному получению данных, возвращаемых элементом управления XmlDataSource. В свою очередь, элемент управления GridView заново связывается с данными.

    • Свойству Visible присваивается значение true, что приводит к отображению второго элемента управления GridView. При создании второго элемента управления GridView свойству его видимости было декларативно присвоено значение false, чтобы он не отображался до того, как пользователь выберет книгу.

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

Тестирование фильтрации с помощью выражения XPath

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

    На странице отображается сетка с информацией о книгах.

  2. Нажмите кнопку Выбрать рядом с первой книгой.

    Комментарии к этой книге отображаются во второй сетке.

  3. Нажмите кнопку Выбрать рядом с последней книгой.

    Комментарии не отображаются, поскольку у этой книги их нет.

Отображение XML-данных при помощи пользовательского макета

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

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

Отображение XML-данных при помощи пользовательского макета

  1. Переключитесь в режим конструктора, щелкните элемент управления GridView2 и нажмите клавишу DELETE, чтобы удалить его со страницы.

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

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

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

  4. В окне «Свойства» установите для свойства Visible значение false.

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

  6. В меню Задачи DataList выберите пункт Редактирование шаблонов, а затем в поле Показать выберите Шаблон элемента.

    Появится элемент управления DataList с редактируемой областью для шаблона элемента. Шаблон содержит макет по умолчанию, который состоит из статического текста и элементов управления Label, привязанных к столбцам Rating и Comment в записи данных. (элемент управления DataList способен использовать предполагаемую структуру данных, которые будут отображаться в нем, так как ранее в данном пошаговом руководстве для элемента управления XmlDataSource2 было задано статическое выражение XPath).

  7. В редактируемой области измените первый заголовок на Оценка пользователя:.

  8. Измените заголовок comment на Комментарий:.

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

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

  10. Из группы HTML в панели элементов перетащите в редактируемую область элемент управления Horizontal Rule.

  11. Щелкните правой кнопкой мыши элемент DataList и выберите команду Завершить изменение шаблона.

  12. Щелкните страницу правой кнопкой мыши и выберите команду Перейти к коду, чтобы перейти к коду страницы.

  13. В обработчике GridView1_SelectedIndexChanged замените строку:

    GridView2.Visible = True

    GridView2.Visible = true;

    на следующую:

    DataList1.Visible = True

    DataList1.Visible = true;

Теперь можно протестировать пользовательский макет.

Тестирование пользовательского макета

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

    На странице отображается сетка с информацией о книгах.

  2. Нажмите кнопку Выбрать рядом с первой книгой.

    Комментарии к первой книге отображаются в списке.

  3. Нажмите кнопку Выбрать рядом с последней книгой.

    Комментарии не отображаются, поскольку у этой книги их нет.

Реструктурирование XML-данных с помощью преобразований

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

Если работа ведется с XML-файлом, в котором значения свойств выражаются в формате, отличном от атрибутов, то можно создать файл преобразования (XSLT), который может динамически переформатировать XML-файл так, чтобы он стал совместим с элементом управления XmlDataSource.

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

Для начала необходимо создать второй XML-файл.

Создание второго XML-файла

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

  2. В разделе Установленные шаблоны Visual Studio выберите XML-файл.

  3. В поле Имя введите Bookstore2.xml.

  4. Нажмите кнопку Добавить.

    Будет создан новый XML-файл, содержащий только XML-директиву.

  5. Скопируйте приведенные ниже XML-данные и вставьте их в файл поверх имеющегося там содержимого.

    <?xml version="1.0" standalone="yes"?>
<bookstore>
    <book ISBN="10-000000-001">
        <title>The Iliad and The Odyssey</title>
        <price>12.95</price>
        <comments>
            <userComment rating="4">
                Best translation I've read.
            </userComment>
            <userComment rating="2">
                I like other versions better.
            </userComment>
        </comments>
    </book>
    <book ISBN="10-000000-999">
        <title>Anthology of World Literature</title>
        <price>24.95</price>
        <comments>
            <userComment rating="3">
                Needs more modern literature.
            </userComment>
            <userComment rating="4">
                Excellent overview of world literature.
            </userComment>
        </comments>
    </book>
    <book ISBN="11-000000-002">
        <title>Computer Dictionary</title>
        <price>24.95</price>
        <comments>
            <userComment rating="3">
               A valuable resource.
            </userComment>
        </comments>
    </book>
    <book ISBN="11-000000-003">
        <title>Cooking on a Budget</title>
        <price>23.95</price>
        <comments>
            <userComment rating="4">Delicious!</userComment>
        </comments>
    </book>
    <book ISBN="11-000000-004">
        <title>Great Works of Art</title>
        <price>29.95</price>
    </book>
</bookstore>

  6. Сохраните и закройте файл Bookstore2.xml.

Теперь надо создать файл преобразования, который преобразует данные в файле Bookstore2.xml в формат на основе атрибутов, который используется элементом управления XmlDataSource.

Создание файла преобразования

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

  2. В разделе Установленные шаблоны Visual Studio выберите Текстовый файл.

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

  3. В поле Имя введите Bookstore2.xsl.

    13ftcwy9.alert_note(ru-ru,VS.90).gifПримечание.

    Убедитесь, что используется именно расширение XSL.

  4. Нажмите кнопку Добавить.

    Создается новый пустой файл.

  5. Скопируйте и вставьте в файл следующий код преобразования.

    <?xml version="1.0"?>
<xsl:stylesheet 
   version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns:xsd="http://www.w3.org/2001/XMLSchema"
   xmlns:msxsl="urn:schemas-microsoft-com:xslt"
>
   <xsl:strip-space elements="*"/>
   <xsl:output method="xml" 
       omit-xml-declaration="yes" 
       indent="yes" 
       standalone="yes" />

   <xsl:template match="/">
      <xsl:for-each select="bookstore">
         <xsl:element name="bookstore">
            <xsl:for-each select="book">
               <xsl:element name="book">
                  <xsl:attribute name="ISBN">
                     <xsl:value-of select="@ISBN"/>
                  </xsl:attribute>
                  <xsl:attribute name="title">
                     <xsl:value-of select="title"/>
                  </xsl:attribute>
                  <xsl:attribute name="price">
                     <xsl:value-of select="price"/>
                  </xsl:attribute>
               </xsl:element>
            </xsl:for-each>
         </xsl:element>
      </xsl:for-each>
   </xsl:template>
</xsl:stylesheet>

  6. Сохраните и закройте файл Bookstore2.xsl.

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

Настройка доступа к данным XML-файла

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

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

  3. В поле Имя введите Bookstore2.aspx.

  4. Нажмите кнопку Добавить.

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

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

  7. В меню ЗадачиXmlDataSource выберите команду Настроить источник данных.

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

  8. В поле Файл данных введите ~/App_Data/Bookstore2.xml.

  9. В поле Файл преобразования введите ~/App_Data/Bookstore2.xsl.

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

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

  12. В списке Выбор источника данных в меню Задачи GridView выберите XmlDataSource1.

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

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

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

В этом пошаговом руководстве рассмотрены лишь основы работы с XML-документами и преобразованиями. В реальном приложении часто требуется более углубленная работа с XML-документами. Рекомендуется дополнительно ознакомиться со следующими вопросами:

  • Создание более сложных преобразований. В данном пошаговом руководстве был показан лишь один пример использования преобразований. XSL — мощный язык, содержащий развитые средства поддержки, касающиеся не только создания страниц HTML, но и практически произвольных преобразований из XML в другие структуры.

  • Запись XML-документов (а не только их чтение). Элемент управления Xml упрощает отображение содержимого XML-файлов на веб-страницах ASP.NET. Тем не менее, иногда требуется записать или исправить XML-файл собственными силами. Дополнительные сведения см. в разделе XML-документы и данные. Пример написания XML-файла см. в разделе Пошаговое руководство. Отображение и отслеживание рекламных объявлений с помощью элемента управления AdRotator.

См. также

Задачи

Пошаговое руководство. Иерархические данные в элементе управления TreeView

Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer