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, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) 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 is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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...