Calling Jscript function with parameters from XSLT
Last week it took hours for me to Bing on how to call JavaScript with parameters from xslt. So I thought of keeping it on blog to help people who are interested in doing same kind of thing.
Now a day’s xslt is being used heavily to render XML.Here in this blog I have demonstrated the below things:
1. How to apply xslt on xml data.
2. How to call JavaScript functions with parameter from xslt.
I have create a very simple solution having 2 aspx pages, one will be treated as default page and other will be the popup page which will get called on clicking hyperlink on default.aspx page.
The html body of default page will look like the below one, we have one JavaScript function which open the popup window.
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<script language="javascript" type="text/javascript">
function ShowDialog(PageUrlWithQueryString) {
window.open(PageUrlWithQueryString, null, "height=200,width=300,status=yes");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
The Xml data File that we used for demo is something like this, it's having 2 Elements for each Employee one is Title and other is Description:
<?xml version="1.0" encoding="utf-8" ?>
<EmployeeFeedback>
<Employee>
<Title>Amit</Title>
<Description>He is Awesome</Description>
</Employee>
<Employee>
<Title>Sumit</Title>
<Description>He is Ok</Description>
</Employee>
<Employee>
<Title>Namit</Title>
<Description>He is Good</Description>
</Employee>
<Employee>
<Title>Zamit</Title>
<Description>He is Awefull</Description>
</Employee>
</EmployeeFeedback>
This is how the xslt would look like; anchor tag is bind with the Title Element of the xml data. We have defined the "onlclick" attribute for anchor tag, so on clicking of anchor tag the JavaScript will get called. Within the JavaScript function we are passing Description Element from the xml data.
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Edited by XMLSpy® -->
<xsl:stylesheet version="1.0" xmlns:xsl="https://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:for-each select="EmployeeFeedback/Employee">
<a href="#">
<xsl:attribute name="onclick">
javascript:ShowDialog('https://localhost:6742/TestXSLTJavascript/Description.aspx?itemId= <xsl:value-of select="Description"></xsl:value-of>')
</xsl:attribute>
<xsl:value-of select="Title"></xsl:value-of>
<br/>
</a>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Within page load function, we are building the string from the xml data; there can be other ways to do it but I chose whatever was there in mind. We are calling XSLTTransformation function which will take xml string as input and apply the xslt transformation that we defined previously on the xml and returns the html output.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataSet ds= new DataSet();
ds.ReadXml(@https://localhost:6742/TestXSLTJavascript/Data.xml);
string response= XSLTTransformation(ds.GetXml().ToString(), "https://localhost:6742/TestXSLTJavascript/RssFeedTransform.xslt");
Response.Write(response);
}
/// <summary>
/// XSLTs transformation the given XML.
/// </summary>
/// <param name="xml">Xml to be transformed.</param>
/// <param name="xsltPath">The XSLT path.</param>
/// <returns>The transformed string</returns>
public static string XSLTTransformation(string xml, string xsltPath)
{
StringBuilder sb = new StringBuilder();
XmlTextReader readerStyleSheet;
XmlReader reader;
StringReader strReader = null;
using (readerStyleSheet = new XmlTextReader(xsltPath))
{
using (strReader = new StringReader(xml))
{
reader = XmlReader.Create(strReader);
XmlUrlResolver resolver = new XmlUrlResolver();
resolver.Credentials = System.Net.CredentialCache.DefaultNetworkCredentials;
readerStyleSheet.XmlResolver = resolver;
XslCompiledTransform transform = new XslCompiledTransform();
transform.Load(readerStyleSheet);
using (TextWriter writer = new StringWriter(sb))
{
XmlTextWriter results = new XmlTextWriter(writer);
transform.Transform(reader, results);
}
}
}
return sb.ToString();
}
On description.aspx page, we can access the query string like the below:
string str= Request.QueryString["ItemId"].ToString();
Response.Write(str);
Happy coding :-)