Coding an AjaxPro.NET Based Search Engine for Your Website - The Client-side Design
(Page 2 of 4 )
On the client side, we first have to add references to the necessary JavaScript files that are required by Google's AJAXSLT framework at the <head> section of the "Search.aspx" (our search engine sample page) file:
<script src="javascript/misc.js" type="text/javascript"></script>
<script src="javascript/dom.js" type="text/javascript"></script>
<script src="javascript/xpath.js" type="text/javascript"></script>
<script src="javascript/xslt.js" type="text/javascript"></script>
Please note that we must follow the order specified above. This is because the programming logic of the latter .js files depends on the related parts that are coded inside the former. Here, however, we don't plan to dig into the inner workings.
Next, we follow the steps listed below to program the client side.
First, when the application starts up, we invoke the "MySearchEngine.GetXsl()" method to load the cascade style we are going to use to apply to the .xml files. This is the way specified by the AjaxPro.NET framework to call the server-side methods. Here the Ajax method GetXsl is prefixed by a particular namespace, MySearchEngine, that is defined above.
Then, inside the "onkeyup" event handler of the HTML <input> element (with the id being searchword), we invoke the GetResultXml client-side method, whose complete source code is listed below:
function GetResultXml(){
var strWord = el("searchword").value;
MySearchEngine.GetResultXml(strWord, GetResultXml_callback);
}
function GetResultXml_callback(response){
var strXml = response.value;
xml = xmlParse(strXml);
el("result").innerHTML = xsltProcess(xml, xslt);
}
Here, with the help of a simple helper function named el we get the value of the HTML <input> control "searchword." Then we call the MySearchEngine.GetResultXml" server-side method, which is exposed via the AjaxPro.NET framework. Readers with more or less AJAX experience may be familiar with the followed code snippet; it is very similar to that used in invoking the general and original XMLHttpRequest with a typical callback function to deal with the returned result. Here, inside the GetResultXml_callback callback function we first invoke the xmlParse JavaScript helper function supplied by the AJAXSLT framework to convert the string formatted XML data into the formal XML format. Finally, by calling another AJAXSLT helper function, namely xsltProcess, we convert the above XML data into HTML format using the readily converted style data that is held in the xslt variable.
By now, we can come to the conclusion that with the XSLT light-weight language, the XML data can be converted into client-side HTML format without any complexity.
Let's take a quick look at the .xslt file we have just used, namely trans.xslt:
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="gb2312" indent="yes"/>
<xsl:template match="/">
<table cellspacing="0" cellpadding="4" rules="cols" bordercolor="#DEDFDE"
border="1" id="dgResult" style="color:Black;background-color:White;border-
color:#DEDFDE;border-width:1px;border-style:None;width:100%;border-
collapse:collapse;">
<tr style="color:White;background-color:#6B696B;font-weight:bold;">
<td style="width:10%;">ID</td>
<td style="width:70%;">Title</td>
<td style="width:20%;">Author</td>
</tr>
<xsl:for-each select="/ArticleDataSet/Table">
<tr style="background-color:#F7F7DE;">
<xsl:attribute name="style"><xsl:if test="position() mod 2 = 0">background-
color:#F7F7DE;
</xsl:if><xsl:if test="position() mod 2 = 1">background-color:white;
</xsl:if></xsl:attribute>
<td>
<xsl:value-of select="id"/>
</td>
<td>
<xsl:value-of select="title"/>
</td>
<td>
<xsl:value-of select="author"/>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
Here, we have utilized some skills. First, we select a HTML <table> element to render the final XML data. Second, with the lines of code that lie below the for-each clause that judges whether the current line number is odd, we have achieved the effect of rendering the background color of the table rows alternately.
Next: Optimization >>
More .NET Articles
More By Xianzhong Zhu
/ 10 
