Creating a Menu Using XSLT, XML, and JavaScript
page 1 of 4
Published: 27 Nov 2006
Abstract
In this article you will be introduced to XSL technology and its direct effect on your web applications. Integrating JavaScript with XSL will give you the ability to control your application on the client side without making your users wait until the page is processed on the server.
by Haissam Abdul Malak
Feedback
Average Rating: 
Views (Total / Last 10 Days): 34081/ 43

Introduction

Extensible Stylesheet language (XSL) is a language used to express style sheets.  You use XSL to define how data should be displayed, styled and laid out.  It was developed with the need of creating XML based Stylesheet language.

XSL is based on three concepts as described below.

·         Extensible Stylesheet Language Transformation (XSLT) is a language to transform the xml document into html, text or even another xml file.

·         XPath is a language to navigate through elements, attributes and elements' values in xml documents.

·         Extensible Stylesheet Language Formatting (XSL:FO) is a language for formatting xml documents.

This article assumes that you have a minimum understanding of the XSL functionality in order to keep up with this demonstration.  For more information please visit http://www.w3schools.com/xsl/xsl_intro.asp.

In this article we will create a horizontal menu.  This menu contains main items.  Once any item is clicked, sub items will be shown or hidden beneath the item clicked.  All the items and sub items are being read from an XML document which makes modifying the menu an easy job to do.

To create this menu we have to complete the following steps.

·         Create an XML document containing the items and sub items to be shown in the menu.

·         Create an XSL file which will navigate through the XML document.

Add C# code that will transform the XSL and the XML into an HTML document or use the XML server control found in ASP.NET.


View Entire Article

User Comments

Title: something   
Name: else
Date: 2012-12-17 5:55:34 PM
Comment:
yay its a comment
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:32:31 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
Title: hyperlink   
Name: pl
Date: 2009-11-12 3:21:59 AM
Comment:
Hi,

I would like to know how to make hyperlink for each items.

Could you show it to me?

Thank you.
Title: XSLT   
Name: Maheswari
Date: 2009-06-18 5:44:39 AM
Comment:
The Articles is very usefull to understand the concept but i want to store the xslt into the cache for further usage.Those details are not available in this.Can u pls provide the details??
Title: Menu items   
Name: deepali
Date: 2009-05-12 1:52:19 AM
Comment:
hey,
it's really a nice code. But want to know that how can i fatch a perticular item in menu from XML
Title: Menu items   
Name: Milind
Date: 2008-12-16 6:52:40 AM
Comment:
Hii actualyy i wanted to create a dynamic menu using xml & make templates of dat menu(sort of reusability or for flexibility) how can i do dat(like we do using .resx file in .net) pls help me.
Title: Nellre   
Name: Nuthan
Date: 2008-07-26 5:12:47 AM
Comment:
Glad to inform you

Thakns
Nuthan
Title: ComboBox   
Name: XSL_KID
Date: 2008-07-03 9:51:56 AM
Comment:
Hi WANT TO DO THE SAME THING THE AUTHOR HAS EXPLAINED. But I want to use combo box instead building menu. Can some one point to right source for help. The completely new to creating xsl documents and this article is great. Easy to follow and understant what he is doing. Any help is greatly appreciated.
Title: SSL   
Name: Rafi
Date: 2008-01-10 2:41:46 PM
Comment:
How to apply SLL in Asp.Net 2.0 Projects.

I want complete solution.


Thanks and Regard
Title: Thank you   
Name: Haissam Abdul Malak
Date: 2007-11-09 3:56:35 AM
Comment:
Glad to hear that it helped you :)
Title: a   
Name: a
Date: 2007-11-09 2:53:13 AM
Comment:
Thank you
Title: Nice! it help me   
Name: Aswattha
Date: 2007-07-12 4:51:23 AM
Comment:
Nice topic,
Thank you
Title: Creating a Menu Using XSLT, XML, and JavaScript   
Name: Fred
Date: 2007-05-25 1:36:36 AM
Comment:
Excellent article!
Even though it was written awhile ago and little things have changed, it's still the best explanation I've found on the web. You should expand & update this one (like XslCompiledTransform should now be used instead of XslTransform). Thanks again for a great article!
Title: how to display horizontal menu uisng XML,XSL and JavaScript   
Name: ASHA
Date: 2007-03-12 2:25:44 AM
Comment:
Please Give article on building horizontal menu using XML,XSL and JavaScript
Title: nice article   
Name: jonathan parker
Date: 2007-02-28 4:51:30 PM
Comment:
Haissam, great article, thanks for taking the time to share some of your knowledge! keep up the good work. -- jp
Title: Fine   
Name: Justin Check
Date: 2007-02-09 5:02:24 AM
Comment:
It is very nice
Title: Nice   
Name: Joydip
Date: 2007-01-04 12:40:25 AM
Comment:
Excellant article. Please find my articles at http://aspalliance.com/author.aspx?uId=58780
Title: Re:resulting HTML is Dirty with many HEAD Body ,Script file   
Name: Haissam Abdul Malak
Date: 2006-12-08 5:32:39 PM
Comment:
Thank u patil for your notice, i was busy these days anyway i took a quick look over the project and i saw the dirty html. As soon as i can, i will solve this and get back to u.

Best Regards
Title: resulting HTML is Dirty with many HEAD Body ,Script file   
Name: patil
Date: 2006-12-07 2:20:33 AM
Comment:
See the view source of the resulting HTML which is Dirty with many HEAD Body ,Script section repeated many times
Title: Thank U   
Name: Haissam Abdul Malak
Date: 2006-12-03 6:44:24 AM
Comment:
i would like to let you know that all your comments are appreciated.

Best Regards,
Title: Congrats   
Name: Nehme Gedeon
Date: 2006-12-03 3:52:42 AM
Comment:
Great article man, Clear and very easy to understand.

Congrats,

Nehme
Title: Great Idea   
Name: Rana D
Date: 2006-12-01 1:29:18 PM
Comment:
What you have just turned the light on is one of the problems we always face and try to solve. It is a great way of Solving or analyzing it this way and I want to congratulate you. We faced this problem and i suggested your idea, and we used both: your way when the xml is not a big file and user control as Keyvan Nayyeri said it is large.
Thus, I would like to thank you ;) and keep your efforts on, we will need them one day.
Best Wishes!
Title: Lecturer   
Name: Kumar
Date: 2006-11-30 5:17:44 AM
Comment:
It is very useful
Title: Thank you   
Name: Haissam Abdul Malak
Date: 2006-11-29 9:21:00 AM
Comment:
Thank u guys for your comments, i hope this article was informative.

Best Regards,
Title: Congratulations   
Name: Bilal Hadiar [MVP]
Date: 2006-11-27 6:05:10 AM
Comment:
Congratulations for your first article Haissam!!

It is nice to see the interaction between XSLT + JavaScript!!

Good luck and looking for more articles ;)

Regards
Title: Re:Caching   
Name: Haissam Abdul Malak
Date: 2006-11-27 1:44:00 AM
Comment:
Dear,
the purpose of this article was to show a demonstration about XSLT capabilites eventhough you are right.

Thank you for your comment.
Title: Caching   
Name: Keyvan Nayyeri
Date: 2006-11-27 12:34:45 AM
Comment:
Haissam,

Don't forget an important point here. Using XSL Transforms to build a menu can have a performance cost (especially for large XML files and complicated transforms) so it's absolutely better to apply this in a user control and use cache on server to improve performance.

Good article :-)

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 5:01:17 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search