Post
Ask Question

Implementing Ajax in XSLT Grid


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 AJAXlike 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.

<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.
DeleteConfirm.JPG

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 theXsltArqumentList statement on the server side in ASP.NET.


Similar Articles