Implementing Ajax in XSLT

Erode Senthilkumar

Rate me:

2.80/5 (3 votes)

16 Jul 2009CPOL2 min read

23.4K

How to implement AJAX in XSLT

Introduction

XSLT is more powerful than server data controls from the performance point of view because it internally executes a lot of event handles whenever we fire the events inside the data controls. XSLT supports CSS, JavaScript and AJAX like in the normal HTML page. Some of the ASP.NET controls like GridView would not support the CSS layout (designed using div tags). But it can be achieved in XSLT.

Implementation of XSLT

The below code shows how to convert the XML data into table representation like server data controls. I have used the Northwind Supplier's table for this implementation. Here we can see the CSS, Ajax along with JavaScript. When clicking on the delete link in the table, first it hides that particular row and in the background we will be deleting that record using AJAX. Here the most complicated issue may be paging. I will be explaining paging and sorting in the next articles.

XML

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes"/>

<xsl:template match="/">
<html>
 <head>
  <style type="text/css">
     .Link
      {
	color:orange;
	font-family:calibri;
	font-weight:bold;
	font-size:14px;
	cursor:pointer;
	}
	</style>
	<script type="text/javascript">
	function DeleteRow(AID)
	{
	var xmlhttp;
	var _AnchID = AID.id;
	var _TrID = _AnchID.replace("A","Tr");
	var _hid = _AnchID.replace("A","hid");
	var _Result;
	var _Url;
	var _hidValue;
 	_Result = confirm("Are you sure you want to delete this record?");
       
	if(_Result)
	{
	document.getElementById(_TrID).style.display = 'none';
	document.getElementById(_TrID).style.visibility = 'hidden';
	_hidValue = document.getElementById(_hid).value;
	_Url = "Ajax.aspx?SuppID="+_hidValue;

	if (window.XMLHttpRequest)
	{
	    xmlhttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	else
	{
	    alert("Your browser does not support XMLHTTP!");
	}
	xmlhttp.onreadystatechange=function()
	{
	  if(xmlhttp.readyState==4)
	{
	//document.myForm.time.value=xmlhttp.responseText;
	}
	}
	xmlhttp.open("GET",_Url,true);
	xmlhttp.send(null);
	}
	return false;
	}
	</script>
	</head>
	<body>
	<table cellpadding="0" style="background-color:silver;color:gray;" 
			align="center" cellspacing="0" border="1" width="61%">
	<tr style="font-weight:bold;">
	<td style="width:2%;">Supplier ID</td>
	<td style="width:12%;">Company Name</td>
	<td style="width:10%;">Contact Name</td>
       <td style="width:9%;">Address</td>
	<td style="width:8%;">City</td>
	<td style="width:7%;">Country</td>
	<td style="width:5%;">Phone</td>
	<td style="width:3%;">Fax</td>
	<td style="width:5%;">Delete</td>
	</tr>
	<xsl:for-each select ="NewDataSet/Table">
	<xsl:variable name="TrID">Tr<xsl:number/>
	</xsl:variable>
	<xsl:variable name="AID">A<xsl:number/>
	</xsl:variable>
	<xsl:variable name="hidID">hid<xsl:number/>
	</xsl:variable>
	<tr id="{$TrID}">
	<td style="width:2%;">
	<xsl:value-of select="SupplierID"/>
	</td>
	<td style="width:12%;">
	<xsl:value-of select="CompanyName"/>
	</td>
	<td style="width:10%;">
	<xsl:value-of select="ContactName"/>
	</td>
       <td style="width:9%;">
	<xsl:value-of select="Address"/>
	</td>
	<td style="width:8%;">
	<xsl:value-of select="City"/>
	</td>
      <td style="width:7%;">
	<xsl:value-of select="Country"/>
	</td>
	<td style="width:5%;">
	<xsl:value-of select="Phone"/>
	</td>
	<td style="width:3%;">
	<xsl:value-of select="Fax"/>
	</td>
       <td style="width:5%;">
	<xsl:variable name="hidValue">
	<xsl:value-of select="SupplierID"/>
	</xsl:variable>
	<input id="{$hidID}" type="hidden" value="{$hidValue}"></input>
	<a id="{$AID}" class="Link" onmouseover="this.cursor:pointer;" 
			onclick="return DeleteRow(this);">Delete</a></td>
	</tr>
	</xsl:for-each>
	</table>
	</body>
	</html>
      </xsl:template>
</xsl:stylesheet>

if (!Page.IsPostBack)
{
    string _SuppID = string.Empty;

    if (Request.QueryString["SuppID"] != null)
    {
         _SuppID = Request.QueryString["SuppID"].ToString();
         int iStauts = oXsltLogics.DeleteSupplierDetails(Convert.ToInt32(_SuppID));
    }
}

If we don't want to include the CSS, JavaScript and AJAX within the XSLT page, then we can write these things in .css, .js files. We do not need to include these links here. We can include the CSS and JavaScript in the source page.

We may face the issue when we have two JavaScript functions in the same name in XSLT file and source file. The ambiguity issue will be there.

I have written a separate page for delete activities. While deleting after hiding that row, we will be sending primary key field of SupplierID to the AJAX calling page. There I will be deleting that record in the background.

The above screenshot shows the practical implementation of this XSLT.

Conclusion

Implementing XSLT in web sites will be better. It drastically increases the performance. It may take more time to develop and be more complicated to implement in some cases. But it is the best method to implement table format data. If we have any more complex operations on the server side, they can be achieved using the XsltArqumentList statement on the server side in ASP.NET.

History

16^th July, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Erode Senthilkumar

Software Developer (Senior) ConsultParagon Computer Professionals Pvt Ltd

India

I have more than 3 years experience in web development. I work on ASP.Net, C#, SQL Server, Javascript, Ajax, XML, XSLT, and XSD.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.