在 XSLT 中实现 AJAX

Erode Senthilkumar

2.80/5 (3投票s)

2009年7月16日

CPOL

2分钟阅读

24298

如何在 XSLT 中实现 AJAX

介绍

从性能角度来看，XSLT 比服务器数据控件更强大，因为服务器数据控件会在我们触发事件时内部执行大量的事件处理程序。XSLT 支持 CSS、JavaScript 和 AJAX，就像在普通的 HTML 页面中一样。一些 ASP.NET 控件，例如 GridView，不支持使用 div 标签设计的 CSS 布局。但可以在 XSLT 中实现。

XSLT 的实现

以下代码展示了如何将 XML 数据转换为类似于服务器数据控件的表格表示形式。我使用了 Northwind 供应商表来实现此功能。在这里，我们可以看到 CSS、Ajax 以及 JavaScript。当单击表格中的删除链接时，它首先隐藏该行，然后在后台使用 AJAX 删除该记录。这里最复杂的问题可能是分页。我将在后续文章中解释分页和排序。

<?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));
    }
}

如果我们不想在 XSLT 页面中包含 CSS、JavaScript 和 AJAX，那么可以将这些内容写入 .css、.js 文件。我们不需要在此处包含这些链接。可以将 CSS 和 JavaScript 包含在源页面中。

当 XSLT 文件和源文件中存在同名的 JavaScript 函数时，我们可能会遇到问题。将会存在歧义问题。

我编写了一个单独的页面来处理删除操作。在隐藏该行后删除时，我们将 SupplierID 的主键字段发送到 AJAX 调用页面。在那里，我将在后台删除该记录。

上面的截图显示了此 XSLT 的实际实现。

结论

在网站中使用 XSLT 会更好。它可以显著提高性能。开发可能需要更多时间，并且在某些情况下实现起来可能更复杂。但它是实现表格数据格式的最佳方法。如果我们在服务器端有任何更复杂的操作，可以使用 ASP.NET 中的 XsltArqumentList 语句在服务器端实现。

历史

2009 年 7 月 16 日：初始发布