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

Пошаговое руководство. Отображение XML-документа на странице Web Forms с помощью преобразований

  • Статья

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

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

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

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

Чтобы отобразить сведения из XML-файла на веб-странице, необходимо предоставить сведения о форматировании и отображении. Например, необходимо предоставить элементы table, p или любые другие элементы, которые требуется использовать для отображения сведений. Кроме того, необходимо предоставить инструкции относительно размещения данных из XML-файла в этих тегах. Например, можно отобразить каждый элемент из XML-файла в виде одной строки таблицы.

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

Рекомендуемым способом является использование языка XSL-преобразований для создания преобразований (или XSL-файлов). XSL-преобразования содержат следующие сведения.

  • Шаблон, аналогичный HTML-странице. Данный шаблон указывает способ отображения информации из XML-файла.

  • Инструкции XSL-преобразования, предоставляющие точную информацию о том, как сведения из XML-файла должны размещаться в шаблоне.

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

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

Этот процесс также можно выполнить программным способом. Однако можно также воспользоваться преимуществами серверного элемента управления Xml. (Общие сведения см. в разделе XML Web Server Control (Visual Studio).) Этот элемент управления выполняет роль «местозаполнителя» на веб-странице ASP.NET. Можно указать в его свойствах определенный XML-файл и XSL-преобразование. При обработке страницы элемент управления выполняет чтение XML-файла, применяет преобразование и отображает результат.

Дополнительные сведения о XSL см. в разделе XSLT-преобразования с помощью класса XslTransform.

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

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

  • Два XSL-преобразования. Одно отображает только даты, отправителей и темы сообщений. Другое отображает все сообщение полностью.

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

    Все эти файлы предоставлены как часть данного пошагового руководства.

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

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

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

  • Visual Studio 2008 или Visual Web Developer.

Также необходимо иметь общее представление о работе в Visual Web Developer. Основные сведения о Visual Web Developer см. в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer.

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

В этом разделе пошагового руководства создается веб-узел, на который добавляется новая страница. В нем создается веб-узел на базе файловой системы, для которого не требуется Microsoft IIS. Вместо этого страница создается и запускается в локальной файловой системе.

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

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

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

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

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

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

  5. В списке Язык выберите пункт Visual Basic или Visual C#.

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

Добавление XML-файла и XSL-преобразований

В этом разделе пошагового руководства создается XML-файл и два XSLT-файла.

Добавление XML-файла в проект

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

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

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

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

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

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

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

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

    <?xml version="1.0" ?>
  <messages>
    <message id="101">
      <to>JoannaF</to>
      <from>LindaB</from>
      <date>04 September 2007</date>
      <subject>Meeting tomorrow</subject>
      <body>Can you tell me what room where the committee meeting will be in?</body>
   </message>
   <message id="109">
      <to>JoannaF</to>
      <from>JohnH</from>
      <date>04 September 2007</date>
      <subject>I updated the site</subject>
      <body>I posted the latest updates to our internal Web site, as you requested. Let me know if you have any comments or questions. -- John
      </body>
   </message>
   <message id="123">
      <to>JoannaF</to>
      <from>LindaB</from>
      <date>05 September 2007</date>
      <subject>re: Meeting tomorrow</subject>
      <body>Thanks. By the way, do not forget to bring your notes from the conference. See you later!</body>
   </message>
</messages>

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

Теперь добавим в проект два XSL-преобразования.

Добавление XSL-преобразований в проект

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

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

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

  3. В поле Имя введите Email_headers.xslt.

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

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

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

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

  5. Скопируйте следующий пример кода и вставьте его в пустой файл.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">
<xsl:template match="/">
<html>
<body>
<table cellspacing="3" cellpadding="8">
   <tr bgcolor="#AAAAAA">
      <td class="heading"><strong>Date</strong></td>
      <td class="heading"><strong>From</strong></td>
      <td class="heading"><strong>Subject</strong></td>
   </tr>
   <xsl:for-each select="messages/message">
   <tr bgcolor="#DDDDDD">
       <td width="25%" valign="top">
         <xsl:value-of select="date"/>
       </td>
      <td width="20%" valign="top">
         <xsl:value-of select="from"/>
      </td>
       <td width="55%" valign="top">
         <strong><xsl:value-of select="subject"/></strong>
      </td>
   </tr>
   </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
    18az815d.alert_note(ru-ru,VS.90).gifПримечание.

    Этот шаблон можно настроить в соответствии со своими требованиями, например можно изменить цвета, размер шрифта, стили и т. д.

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

  7. Повторите действия 1 – 4, но уже для файла с именем Email_all.xslt.

  8. Вставьте следующий пример кода в файл Email_all.xslt.

    <?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    version="1.0">
<xsl:template match="/">
<html>
<body>
<table cellspacing="10" cellpadding="4">
  <xsl:for-each select="messages/message">
  <tr bgcolor="#CCCCCC">
  <td class="info">
    Date: <strong><xsl:value-of select="date"/></strong>
       <br /><br />
    To: <strong><xsl:value-of select="to"/></strong>
       <br /><br />
    From: <strong><xsl:value-of select="from"/></strong>
       <br /><br />
    Subject: <strong><xsl:value-of select="subject"/></strong>
       <br /><br />
    <br /><br />
    <xsl:value-of select="body"/>
  </td>
  </tr>
  </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

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

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

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

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

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

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

  3. Перетащите элемент управления XML со вкладки Стандартныепанели элементов на страницу.

    На странице появляется серое поле, представляющее элемент управления XML.

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

    Свойство

    Параметр

    DocumentSource

    ~/App_Data/Emails.xml

    TransformSource

    ~/App_Data/Email_headers.xslt

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

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

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

Добавление флажка для применения другого преобразования

  1. Переместите курсор в положение перед элементом управления XML и нажмите клавишу ВВОД несколько раз, чтобы оставить свободное пространство над элементом управления XML.

  2. Со вкладки Стандартныепанели элементов перетащите элемент управления CheckBox на страницу в положение над элементом управления XML.

  3. Установите следующие свойства элемента управления CheckBox.

    Свойство

    Параметр

    Text

    Только заголовки

    Checked

    True

    AutoPostBack

    True Это приводит к тому, что как только пользователь установит флажок, будет выполнена отправка и обработка формы.

  4. Дважды щелкните элемент управления CheckBox.

    Откроется редактор кода с обработчиком событий CheckChanged элемента управления CheckBox с именем CheckBox1_CheckedChanged.

  5. Добавьте код, выполняющий переключение между преобразованиями Email_headers.xslt и Email_all.xslt в зависимости от состояния флажка.

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

    Protected Sub CheckBox1_CheckedChanged(ByVal sender As _
      System.Object, ByVal e As System.EventArgs) _      Handles CheckBox1.CheckedChanged
    If CheckBox1.Checked Then
        Xml1.TransformSource = "~/App_Data/email_headers.xslt"
    Else
        Xml1.TransformSource = "~/App_Data/email_all.xslt"
    End If
End Sub

    protected void CheckBox1_CheckedChanged(object sender, 
        System.EventArgs e)
{
    if (CheckBox1.Checked)
    {
        Xml1.TransformSource = "~/App_Data/email_headers.xslt";
    }
     else
    {
        Xml1.TransformSource = "~/App_Data/email_all.xslt";
    }
}

Проверка

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

Проверка преобразований

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

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

  2. Снимите флажок Только заголовки.

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

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

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

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

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

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

См. также

Другие ресурсы

XML Web Server Control (Visual Studio)