How to convert ASP.NET Bulleted List items or UnOrdered List to Hyperlinks using jQuery

I came across an interesting problem recently. I had a bulleted list with me which listed the url's of websites. However the url's were just plain text as shown below:

    <div>

        <asp:BulletedList ID="BulletedList1" runat="server">

            <asp:ListItem Text="http://www.dotnetcurry.com" Value="Site 1" />

            <asp:ListItem Text="http://www.sqlserver.com" Value="Site 2" />

            <asp:ListItem Text="http://www.devcurry.com" Value="Site 3" />

        </asp:BulletedList>

    </div>

My client wanted me to convert them to hyperlinks dynamically since it was not possible to go ahead and make changes in the Bulleted List mark up. Here's how to convert an unordered list <ul> to hyperlinks using jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

        $('ul > li').css({ 

        "cursor": "pointer",

        "text-decoration": "underline",

        "color":"blue"

         })

            .click(function() {

                window.location = $(this).text()

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:BulletedList ID="BulletedList1" runat="server">

            <asp:ListItem Text="http://www.dotnetcurry.com" Value="Site 1" />

            <asp:ListItem Text="http://www.sqlserver.com" Value="Site 2" />

            <asp:ListItem Text="http://www.devcurry.com" Value="Site 3" />

        </asp:BulletedList>

    </div>

    </form>

</body>

</html>

As you can observe, we are adding some css attributes to the <li> to make it look like a link - css has been applied to underline it, add a pointer on mouseover and change its color to blue.

We then add a click function which sets the url, to the text of the list items of the Bulleted List. That's it.

Oh..I love jQuery!

'Like' us on our FaceBook page if you find this blog useful. Thanks!

Did you like this post?


			Save on Delicious
	subscribe via rss		subscribe via e-mail
	print this post		follow me on twitter

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal