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!

Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

1 comment:

Anonymous said...

You couldn't just DisplayMode="HyperLink" to the markup. You wouldn't have to recompile the site. But I know how some clients are...