Programmatically adding a hyperlink to a bulleted list that IS NOT DisplayMode=Hyperlink

Question

I have a ASP.NET bulleted list control that, until today, was created and used only for plain text. A new design request asks that I turn SOME of those items into hyperlinks. Therefore the bulleted list will ultimately need to contain some plain text items, and some hyperlinks. If I change it to DisplayMode=Hyperlink, even if I leave the value blank, the entries that should just be plain text still become clickable links.

One solution that I think I can make work, is to use a Literal control and use HTML (<a href...) on the lines that need to be links. That will entail a little bit of re-working some old code, so before I try that I really want to know if this is possible to do with the existing BulletedList.

---

EDIT:

I seriously couldn't find anything about this anywhere, and I generally consider myself a pretty good Googler. So for the one or two lost and confused souls who find themselves in the same scenario sometime in the next decade, here is my complete implementation of the excellent answer offered below:

In the page's code-behind:

foreach (SupportLog x in ordered)
{
    blschedule.Items.Add(new ListItem(x.Headline, "http://mysite/Support/editsupportlog.aspx?SupportLogID=" + x.SupportLogID));
}

blschedule.DataBind();

Note the DataBind at the end --- this is necessary to fall into the DataBound event:

protected void blschedule_DataBound(object sender, EventArgs e)
{
    foreach (ListItem x in blschedule.Items)
    {
        if (x.Value.Contains("http")) //an item that should be a link is gonna have http in it, so check for that
        {
            x.Attributes.Add("data-url", x.Value);
        }
    }
}

In the .aspx page's head:

<script src="<%# ResolveClientUrl("~/jquery/jquery141.js") %>" type="text/javascript"></script>
    <script>

        $(document).ready(function () {

           $('#<%=blschedule.ClientID %> li').each(function () {
               var $this = $(this);
               var attr = $this.attr('data-url');

               if (typeof attr !== 'undefined' && attr !== false) {
                   $this.html('<a href="' + $this.attr('data-url') + '">' + $this.text() + '</a>');
               }
           });
       });

    </script>

The if statement is required to make sure to only turn the items that have the "data-url" attribute into links, and not turn ALL items into links.

Answer 1

You may find it's easier to use an <asp:Repeater /> for that task.

Something like:

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><%# string.IsNullOrEmpty(Eval("url").ToString()) ? Eval("text") : string.Format("<a href=\"{0}\">{1}</a>", Eval("url").ToString(), Eval("text").ToString()) %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

Hackalicious Way

set the URL value to DataValueField when data binding the BulletedList

use the DataBound event to iterate through the items and add an attribute to each one with a URL value

protected void BulletedList1_DataBound(object sender, EventArgs e)
{
    foreach (ListItem i in BulletedList1.Items)
    {
        if (i.Value.Length > 0)
        {
            i.Attributes.Add("data-url", i.Value);
        }
    }
}

use JavaScript/jQuery to apply the necessary markup:

$('[data-url]').each(function() {
    var $this = $(this);
    $this.html('<a href="' + $this.attr('data-url') + '">' + $this.text() + '</a>');
});

didn't test this jQuery but it should be close