Call a JavaScript Function in an XSL StyleSheet of an ASP.NET XML Control

Using an XSL stylesheet together with an ASP.NET XML control can be a great way to format the output of a database query. For instance a cool implementation is that you can embed an XML control within a ListView control so that you can output a tree-like structure in your ListView rather than the standard tabular structure.

One surprisingly tricky thing is setting up a call to a JavaScript function within your XSL stylesheet that passes data from your database query dynamically. Unlike traditional ASP/ASP.NET you cannot directly output your database variable in your XSL markup (ie: along the lines of: Text='<%# Eval(“SomeData”) %>’). Instead, you first need to assign the dynamic data to a variable and then you need to use that variable to format your JavaScript call.

So How Can One Set Up An XSL Variable?

Thankfully it’s actually quite straightforward to set up and use an XSL variable. The only real difference is the way that its done. Rather than the syntax of traditional languages where you would declare and populate the variable (ie: var myVariable = ‘some data’), you actually create an Element with an attribute set to the value that you want to set.

So, for example, to set up a variable in XSL that is populated with data from a database query, you could write this as:

<xsl:variable name="myVariable" select="SomeData"/>

Below is a slightly more complete example with a few more lines of code added in order to give you a better idea:

<xsl:template match="MyRoot/UserData">
<xsl:if test="SomeData">
<xsl:variable name="myVariable" select="SomeData"/>

From the example code above, within your template match you first test to see if the database value ‘SomeData’ has been returned as a data-populated XML node. If this is indeed the case, then you can declare and populate your new variable named myVariable.

As you can see, the XSL tag xsl:variable sets up the markup as a variable type element. You use the name= attribute to declare the name that you want to use for your variable. Then you use the select= attribute to state the text from which node that XSL should use to populate your variable.

Naturally if you want to use the text from an attribute rather than from a node you can use the @ symbol in front of your attribute name (along the lines of select=”@SomeData”).

How Can One Use the XSL Variable in a JavaScript Function Call?

The next step of the process is to use the newly declared XSL variable to set the dynamically passed parameter in a JavaScript function call. To do so, you can tell XSL that you are making reference to an XSL variable using the syntax: {$variableName}

As an aside; it’s useful to note that if you are using an XML control on your ASP.NET WebForm, then you should write your JavaScript function in the header of your ASP.NET Web page rather than trying to include it with your XSL stylesheet.

Below is a full example of setting up your XSL variable and then using it as part of a JavaScript function call. The two lines of code that are relevant to this article are highlighted in green.

<xsl:if test="SomeData">
 <xsl:variable name="myVariable" select="SomeData"/>
 <xsl:choose>
 <xsl:when test="SomeData">
Some Text: 
<a href="JavaScript:myJSFunction({$myVariable})" class="CSS_Styling">
 <xsl:value-of select="SomeData"/>
 </a>
 </xsl:when>
 <xsl:otherwise>
The XML Element Was Not Found
 </xsl:otherwise>
 </xsl:choose>
 </xsl:if>

Conclusion

So from the code above, you can see that much of the logic involves testing the XML structure to make sure the element is valid. The two main components are:

1. Setting up your variable element to get the necessary information from your XML file/feed.
2. Adding the XSL variable to your JavaScript Function call using the syntax:  {$variableName}