연습: 변환을 사용하여 Web Forms 페이지에 XML 문서 표시
업데이트: 2007년 11월
이 연습에서는 XML 문서에서 웹 페이지에 정보를 표시하는 방법을 보여 줍니다. 이 연습에서는 간단한 XML 파일을 만든 후 ASP.NET 서버 컨트롤과 XSLT 변환을 사용하여 XML 파일의 내용을 웹 페이지에 표시합니다.
.gif "참고") 참고: |
|---|
또한 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(인터넷 정보 서비스)로 작업할 필요가 없는 파일 시스템 웹 사이트를 만듭니다. 대신 로컬 파일 시스템에서 페이지를 만들어 실행합니다.
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새 웹 사이트를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 선택합니다.
위치 상자에서 파일 시스템을 선택한 다음 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어, 폴더 이름 C:\WebSites를 입력합니다.
언어 목록에서 Visual Basic 또는 **Visual C#**을 클릭합니다.
확인을 클릭합니다.
XML 파일 및 XSL 변환 추가
이 연습 부분에서는 XML 파일 1개와 XSLT 파일 2개를 만듭니다.
XML 파일을 프로젝트에 추가하려면
솔루션 탐색기에서 App_Data 폴더를 마우스 오른쪽 단추로 클릭하고 새항목 추가를 클릭합니다.
참고:App_Data 폴더에 추가된 XML 파일에는 ASP.NET에서 런타임에 파일을 읽고 파일에 쓸 수 있도록 허용하는 올바른 사용 권한이 지정됩니다. 또한 App_Data 폴더는 검색 불가능 폴더로 표시되므로 브라우저에서 파일을 볼 수 없도록 보호됩니다.
Visual Studio에 설치되어 있는 템플릿에서 XML 파일을 클릭합니다.
이름 상자에 Emails.xml을 입력합니다.
추가를 클릭합니다.
XML 지시문만 포함된 새 XML 파일이 만들어집니다.
다음 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>파일을 저장한 다음 닫습니다.
이제 두 XSL 변환을 프로젝트에 추가합니다.
XSL 변환을 프로젝트에 추가하려면
솔루션 탐색기에서 App_Data 폴더를 마우스 오른쪽 단추로 클릭하고 새항목 추가를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 텍스트 파일을 클릭합니다.
변환 파일의 템플릿이 없으므로 올바른 확장명을 갖는 텍스트 파일로 만들 수 있습니다.
이름 상자에 Email_headers.xslt를 입력합니다.
참고:확장명은 반드시 .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="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>참고:이 템플릿을 필요에 따라 조정할 수 있습니다. 예를 들어, 색, 글꼴 크기, 스타일 또는 기타 기능을 변경할 수 있습니다.
파일을 저장한 다음 닫습니다.
위 1-4단계를 반복하되 이번에는 파일 이름을 Email_all.xslt로 지정합니다.
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>파일을 저장한 다음 닫습니다.
페이지에 Xml 컨트롤 추가
이제 XML 파일과 두 개의 변환이 준비되었으므로 이를 사용하여 웹 페이지에 정보를 표시할 수 있습니다. 이를 위해 Xml 서버 컨트롤을 사용합니다.
Xml 컨트롤을 추가하려면
Default.aspx 페이지를 열거나 이 페이지로 전환합니다.
디자인 뷰로 전환합니다.
도구 상자의 표준 탭에서 Xml 컨트롤을 페이지로 끌어 옵니다.
Xml 컨트롤을 나타내는 회색 상자가 페이지에 추가됩니다.
컨트롤을 선택하고 속성 창에서 다음 속성을 설정합니다.
속성
설정 값
DocumentSource
~/App_Data/Emails.xml
TransformSource
~/App_Data/Email_headers.xslt
이렇게 하면 Xml 컨트롤에 기본적으로 전자 메일 메시지 머리글만 표시됩니다.
변환 변경을 위한 컨트롤 추가
이 연습 부분에서는 사용자가 변환 간에 전환할 수 있도록 하는 확인란을 사용합니다. 현재 Xml 컨트롤에서는 전자 메일 메시지 머리글만 표시하는 변환을 적용합니다.
다른 변환을 적용하기 위한 확인란을 추가하려면
Xml 컨트롤 앞으로 커서를 이동한 다음 Enter 키를 여러 번 눌러 Xml 컨트롤 위에 공간을 만듭니다.
도구 상자의 표준 탭에서 CheckBox 컨트롤을 Xml 컨트롤 위에 있는 페이지로 끌어 옵니다.
CheckBox 컨트롤에서 다음 속성을 설정합니다.
속성
설정 값
Text
Headers Only
Checked
True
AutoPostBack
True. 이렇게 설정하면 사용자가 확인란을 클릭하는 즉시 폼이 게시되고 처리됩니다.
CheckBox 컨트롤을 두 번 클릭합니다.
CheckBox 컨트롤의 CheckBox1_CheckedChanged라는 CheckChanged 이벤트에 대한 처리기가 코드 편집기에서 열립니다.
확인란의 상태에 따라 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 Subprotected 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"; } }
테스트
이제 변환의 작동 상태를 확인할 수 있습니다.
변환을 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
기본적으로 전자 메일 메시지의 날짜, 보낸 사람 및 제목 줄이 표시됩니다.
Headers only 확인란의 선택을 취소합니다.
전체 텍스트를 포함한 전자 메일 메시지가 다른 레이아웃으로 다시 표시됩니다.
다음 단계
이 연습에서는 XML 문서와 변환을 사용하는 기본 방법만을 배웠습니다. 실제 응용 프로그램에서는 XML 문서에 대해 보다 세부적으로 작업하는 경우가 많습니다. 다음과 같은 작업을 통해 이 연습에서 다루지 않은 기능을 배울 수 있습니다.
보다 정교한 변환을 만듭니다. 이 연습에서는 변환을 사용하는 한 가지 방법만 배웠습니다. 그러나 XSL은 HTML 페이지를 만들기를 비롯하여 XML에서 다른 구조로의 거의 모든 종류의 변환을 정교하게 지원하는 강력한 언어입니다.
프로그래밍 방식으로 변환을 적용합니다. 이 연습에서는 원시 XML 데이터에 변환을 적용하기 위해 Xml 웹 서버 컨트롤을 사용했습니다. 실제 응용 프로그램에서는 Xml 컨트롤을 사용하는 것이 적합하지 않으므로 이 작업을 사용자가 직접 수행하는 것이 나을 수도 있습니다. 자세한 내용은 XslTransform 클래스를 사용한 XSLT 변환을 참조하십시오.
XML 문서를 읽지만 않고 XML 문서를 씁니다. Xml 컨트롤을 사용하면 ASP.NET 웹 페이지에 XML 파일의 내용을 쉽게 표시할 수 있습니다. 직접 XML 파일을 만들거나 수정할 수도 있습니다. 자세한 내용은 XML 문서 및 데이터를 참조하십시오. XML 파일에 쓰는 작업에 대한 예제를 보려면 연습: AdRotator 컨트롤을 사용하여 광고 표시 및 추적을 참조하십시오.