XSLT - Edit XML

Data stored in XML files can be edited through an internet browser.

Open, Edit, and Save XML

Now, we will show you how to open, edit, and save XML files stored on the server.

We will use XSL to convert the XML document into an HTML form. The values of XML elements will be written to HTML input fields in the form. This form is editable. After editing, the data will be submitted back to the server, and the XML file will be updated (this part is done by ASP).

XML and XSL Files

First, let's take a look at the XML document to be used ("tool.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>
<tool>
  <field id="prodName">
    <value>HAMMER HG2606</value> 
  </field>
  <field id="prodNo">
    <value>32456240</value> 
  </field>
  <field id="price">
    <value>$30.00</value> 
  </field>
</tool>

View XML File.

Next, let's take a look at the following stylesheet ("tool.xsl"):

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<form method="post" action="edittool.asp">
<h2>Tool Information (edit):</h2>
<table border="0">
<xsl:for-each select="tool/field">
<tr>
<td>
<xsl:value-of select="@id"/>
</td>
<td>
<input type="text">
<xsl:attribute name="id">
  <xsl:value-of select="@id" />
</xsl:attribute>
<xsl:attribute name="name">
  <xsl:value-of select="@id" />
</xsl:attribute>
<xsl:attribute name="value">
  <xsl:value-of select="value" />
</xsl:attribute>
</input> 
</td>
</tr>
</xsl:for-each>
</table>
<br />
<input type="submit" id="btn_sub" name="btn_sub" value="Submit" />
<input type="reset" id="btn_res" name="btn_res" value="Reset" />
</form>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

View XSL file.

This XSL file will iterate over the elements in the XML file and create an input field for each XML "field" element. The value of the id attribute of the field element is added to the id and name attributes of each HTML input field. The value of the "value" element is added to the "value" attribute of each HTML input field. As a result, an editable HTML form containing the values from the XML file can be obtained.

Then, we also have a second stylesheet: "tool_updated.xsl". This XSL file will be used to display the updated XML data. This stylesheet will not output an editable HTML form, but a static HTML table:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Updated Tool Information:</h2>
<table border="1">
<xsl:for-each select="tool/field">
<tr>
<td><xsl:value-of select="@id" /></td>
<td><xsl:value-of select="value" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

View XSL file.

ASP file

In the "tool.xsl" file, the value of the action attribute of the HTML form is "edittool.asp" .

"edittool.asp" page contains two functions: loadFile() to load and transform XML files, and updateFile() function to update XML files:

<%
function loadFile(xmlfile,xslfile)
Dim xmlDoc,xslDoc
Load the XML file
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async = false
xmlDoc.load(xmlfile)
Load the XSL file
set xslDoc = Server.CreateObject("Microsoft.XMLDOM")
xslDoc.async = false
xslDoc.load(xslfile)
Convert the file
Response.Write(xmlDoc.transformNode(xslDoc))
end function
function updateFile(xmlfile)
Dim xmlDoc,rootEl,f
Dim i
Load the XML file
set xmlDoc = Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async = false
xmlDoc.load(xmlfile)
Set the rootEl variable to the root element
Set rootEl = xmlDoc.documentElement
Loop through the form set
for i = 1 To Request.Form.Count
   Exclude the button elements in the form
   if instr(1,Request.Form.Key(i),"btn_")=0 then
   The selectSingleNode method can query a single node in an XML file that matches a query.
   This query will request the value element, which is a child element of the field element,
   And this field element has an id attribute that can match the current key value in the form set.
   If a match exists, set the text attribute to the value of the current field in the form set.
   set f = rootEl.selectSingleNode("field[@id='" &
   Request.Form.Key(i) & "/value")
   f.Text = Request.Form(i)
   end if
next
Save the modified XML file
xmlDoc.save xmlfile
Release all object references
set xmlDoc=nothing
set rootEl=nothing
set f=nothing
Load the modified XML file through a stylesheet so that the client can see the edited information
loadFile xmlfile, server.MapPath("tool_updated.xsl")
end function
'If the form has been submitted, update the XML file and display the results, if not, convert this XML file for editing
if Request.Form("btn_sub")="" then
loadFile server.MapPath("tool.xml"), server.MapPath("tool.xsl")
else
updateFile server.MapPath("tool.xml")
end if
%>

Tip:If you are not familiar with how to write ASP, please learn ourASP Tutorial

Note:We are converting and updating the XML files located on the server. This is a cross-platform solution. The client can only obtain HTML returned from the server, which can run on any browser.