연습: 변환을 사용하여 Web Forms 페이지에 XML 문서 표시

  • 아티클

업데이트: 2007년 11월

이 연습에서는 XML 문서에서 웹 페이지에 정보를 표시하는 방법을 보여 줍니다. 이 연습에서는 간단한 XML 파일을 만든 후 ASP.NET 서버 컨트롤과 XSLT 변환을 사용하여 XML 파일의 내용을 웹 페이지에 표시합니다.

참고:

또한 XML 파일을 데이터 소스로 사용하고 GridView 컨트롤과 같은 컨트롤을 사용하여 해당 내용을 표시할 수도 있습니다. 자세한 내용은 연습: XML 데이터를 표시할 웹 페이지 만들기를 참조하십시오.

웹 페이지에 XML 정보를 표시하려면 서식 및 표시 정보를 제공해야 합니다. 예를 들어 table 요소, p 요소 등을 비롯하여 정보를 표시하는 데 사용할 방법을 어떤 식으로든 제공해야 합니다. 또한 XML 파일의 데이터를 이러한 태그에 맞추는 방법에 대한 지침도 제공해야 합니다. 예를 들어 XML 파일의 각 요소를 하나의 테이블 행으로 표시할 수 있습니다.

이 지침을 제공하기 위한 한 가지 방법은 ASP.NET 웹 페이지의 코드를 사용하여 XML 파일의 구문을 분석하고 해당 HTML 태그에 데이터를 채우는 것입니다. 이 작업은 시간이 많이 소요되고 관리하기 어렵지만 XML 파일을 프로그래밍 방식으로 정확하게 제어할 수 있는 강력한 방법입니다.

위의 방법보다는 XSL 변환 언어를 사용하여 변환 또는 XSL 파일을 만드는 것이 더 나은 방법입니다. XSL 변환에는 다음 정보가 포함됩니다.

  • 템플릿 - HTML 페이지와 유사하며 XML 정보를 표시하는 방법을 지정합니다.

  • XSL 처리 지침 - XML 파일의 정보를 정확하게 템플릿에 맞추는 방법을 지정합니다.

여러 개의 변환을 정의하여 동일한 XML 파일에 적용할 수 있습니다. 이렇게 하면 XML 정보를 서로 다르게 표시하고 XML 파일에서 서로 다른 데이터를 선택하는 등 XML 정보를 다양한 방식으로 사용할 수 있습니다.

XSL 변환을 만든 후에는 이를 XML 파일에 적용해야 합니다. 즉, XSL 파일 중 하나를 기준으로 XML 파일을 변환하여 처리해야 합니다. 이렇게 하면 변환 파일에 따라 서식이 지정된 XML 정보를 포함하는 새 파일이 생성됩니다.

이 과정을 프로그래밍 방식으로도 수행할 수 있습니다. 그러나 Xml 서버 컨트롤을 활용할 수도 있습니다. 개요를 보려면 XML 웹 서버 컨트롤(Visual Studio)을 참조하십시오. 이 컨트롤은 ASP.NET 웹 페이지에서 자리 표시자 역할을 합니다. 이 컨트롤의 속성을 특정 XML 파일과 XSL 변환으로 설정하면 페이지가 처리될 때 컨트롤에서 XML을 읽고 변환을 적용하여 결과를 표시합니다.

XSL에 대한 자세한 내용은 XslTransform 클래스를 사용하여 XSLT 변환을 참조하십시오.

이 연습에서는 XSL 변환을 사용하여 XML 정보를 표시하기 위해 Xml 서버 컨트롤을 사용하는 방법을 보여 줍니다. 이 시나리오는 다음을 사용합니다.

  • 여러 개의 가상 전자 메일 메시지를 포함하는 XML 파일

  • 두 개의 XSL 변환. 하나는 전자 메일 메시지의 날짜, 보낸 사람 및 제목만 표시하며 다른 하나는 전체 전자 메일 메시지를 표시합니다.

    참고:

    이러한 파일은 모두 연습용으로 제공됩니다.

사용자가 XML 정보를 두 가지 방법으로 표시할 수 있는 웹 페이지를 만듭니다. 페이지에는 기본적으로 선택된 Headers only 확인란이 있습니다. 따라서 기본 변환에는 전자 메일 메시지 머리글만 표시됩니다. 사용자가 이 확인란의 선택을 취소하면 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. 확인을 클릭합니다.

XML 파일 및 XSL 변환 추가

이 연습 부분에서는 XML 파일 1개와 XSLT 파일 2개를 만듭니다.

XML 파일을 프로젝트에 추가하려면

  1. 솔루션 탐색기에서 App_Data 폴더를 마우스 오른쪽 단추로 클릭하고 새항목 추가를 클릭합니다.

    참고:

    App_Data 폴더에 추가된 XML 파일에는 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를 입력합니다.

    참고:

    확장명은 반드시 .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>
    참고:

    이 템플릿을 필요에 따라 조정할 수 있습니다. 예를 들어, 색, 글꼴 크기, 스타일 또는 기타 기능을 변경할 수 있습니다.

  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 컨트롤 앞으로 커서를 이동한 다음 Enter 키를 여러 번 눌러 Xml 컨트롤 위에 공간을 만듭니다.

  2. 도구 상자의 표준 탭에서 CheckBox 컨트롤을 Xml 컨트롤 위에 있는 페이지로 끌어 옵니다.

  3. CheckBox 컨트롤에서 다음 속성을 설정합니다.

    속성

    설정 값

    Text

    Headers Only

    Checked

    True

    AutoPostBack

    True. 이렇게 설정하면 사용자가 확인란을 클릭하는 즉시 폼이 게시되고 처리됩니다.

  4. CheckBox 컨트롤을 두 번 클릭합니다.

    CheckBox 컨트롤의 CheckBox1_CheckedChanged라는 CheckChanged 이벤트에 대한 처리기가 코드 편집기에서 열립니다.

  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. Headers only 확인란의 선택을 취소합니다.

    전체 텍스트를 포함한 전자 메일 메시지가 다른 레이아웃으로 다시 표시됩니다.

다음 단계

이 연습에서는 XML 문서와 변환을 사용하는 기본 방법만을 배웠습니다. 실제 응용 프로그램에서는 XML 문서에 대해 보다 세부적으로 작업하는 경우가 많습니다. 다음과 같은 작업을 통해 이 연습에서 다루지 않은 기능을 배울 수 있습니다.

  • 보다 정교한 변환을 만듭니다. 이 연습에서는 변환을 사용하는 한 가지 방법만 배웠습니다. 그러나 XSL은 HTML 페이지를 만들기를 비롯하여 XML에서 다른 구조로의 거의 모든 종류의 변환을 정교하게 지원하는 강력한 언어입니다.

  • 프로그래밍 방식으로 변환을 적용합니다. 이 연습에서는 원시 XML 데이터에 변환을 적용하기 위해 Xml 웹 서버 컨트롤을 사용했습니다. 실제 응용 프로그램에서는 Xml 컨트롤을 사용하는 것이 적합하지 않으므로 이 작업을 사용자가 직접 수행하는 것이 나을 수도 있습니다. 자세한 내용은 XslTransform 클래스를 사용한 XSLT 변환을 참조하십시오.

  • XML 문서를 읽지만 않고 XML 문서를 씁니다. Xml 컨트롤을 사용하면 ASP.NET 웹 페이지에 XML 파일의 내용을 쉽게 표시할 수 있습니다. 직접 XML 파일을 만들거나 수정할 수도 있습니다. 자세한 내용은 XML 문서 및 데이터를 참조하십시오. XML 파일에 쓰는 작업에 대한 예제를 보려면 연습: AdRotator 컨트롤을 사용하여 광고 표시 및 추적을 참조하십시오.

참고 항목

기타 리소스

XML 웹 서버 컨트롤(Visual Studio)