Writing and Displaying XML Data in Expression Web

Hi Guys, In this article I will discuss how to create an XML file and show its content in a web page using Expression Web 4. Follow the steps below:

Creating the XML file first and then importing it.

Step 1 : Go-to File-->New-->Page-->Select XML file.

Step 2 : Now a Xml page opens up and now write the data in the XML file so created. See the code below:

Step 3 : After writing the required data into the XML file save this file as "student.xml". After saving this file import this file into the application.

For this Go to File-->import-->filestudent.xml and the file appears in the folder list.

Step 4 : Now you can see the XML file also appears in the data source tab on alongside. Select the file here and on right clicking on it select the "Show" options and the content of the file is displayed in the data detail tab. If the content donot appear , check the XML file it may be not in correct format:

Using the XML data in a webpage.

Step 5 :  Goto File-->New-->Page-->Add a ASPX page, name it as xmldata.aspx. The page opens up in a split view.

Step 6 : Now drag the so created xml file(student.xml) from the folder on the aspx page and see the changes in the HTML code view.

Step 7 : Now save the page first. If you notice there is a smart tag in the xml file dropped on the page. Click on this and You have following options here

1. Filter : This option helps you compare records and then display the filtered data.

2. Sort : This option helps sort the record  in ascending or descending order.

3. Change Layout : This option helps changing the default layout of the data view.

4. Data preview : Select the the drop down button and select any of the option to preview data in that format.

5. Conditional Formating

6. Refresh Data view

7. Data view property : This opens up a window showing all the properties of the xml data.

Step 8 : Now after doing the formating save the changes and you'll see that it prompts to save the "student.xsl" file. This is because since change in the schema was made so the file ".xsl" is generated and hence asks for saving it.

Step 11 : Click on the preview button to see the data in browser. The output on the browser looks like this.

Output :

That's all to learn in this article, You can post your comments and ask any difficulty while doing this task.