Add list items to jqueryui through C# code-behind

Question

I am using this plugin to display a selectable list.

Although it works fine, I need these list items to be populated from code behind C#. Can you please point me into the right direction?

This is the codebehind section:

 wnetEntities1 db = new wnetEntities1();
 var wl = from w in db.wnet_available
         join role in db.wnet_userinfo
         on w.UserID equals role.UserId
         where w.AvailStatus == 1 && role.WLId == 1
         select new { w.UserID, role.FirstName };

wl.ToList();
foreach (var w in wl)
{
    var name = w.FirstName;

//guessing this is where the li items should be generated. }

And this is the html list (which needs to be generated from asp.net):

        <ol id="selectable">

        <li class="ui-widget-content">Item 1</li>
        <li class="ui-widget-content">Item 2</li>
        <li class="ui-widget-content">Item 3</li>
        <li class="ui-widget-content">Item 4</li>
        <li class="ui-widget-content">Item 5</li>
        <li class="ui-widget-content">Item 6</li>
        <li class="ui-widget-content">Item 7</li>
    </ol>

Answer 1

to be able to see your ol element in server side, first add runat="server" to it:

<ol id="selectable" runat="server">  

Then you can easily add your lis to it:

foreach (var w in wl.ToList())
{
    HtmlGenericControl li = new HtmlGenericControl("li");
    li.Attributes.Add("class", "ui-widget-content");
    li.InnerText = w.FirstName;
    selectable.Controls.Add(li);
}

Answer 2

Like this ?

   <% var items = wl.ToList(); %>

        <ol id="selectable">

         <%   foreach (var w in items)
            { %>
            <li class="ui-widget-content"><%=w.FirstName %></li>

            <% } %>
       </ol>