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>

In the code behind, can you not generate a dictionary list and return it to js so that u can populate using ur jquery plugin? — Pawan, Sep 03 '12 at 06:41

score 1 · Accepted Answer · answered Sep 03 '12 at 07:52

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);
}

answered Sep 03 '12 at 07:52

Kamyar

18,639
9
97
171

Hi @Kamyar, tried to do the above but I am unable to set the ClientIDMode for the "ol" element. That property does not appear on the intellisense. – Amit Philips Sep 25 '12 at 04:44
@AmitPhilips This is added in .Net 4 – Kamyar Sep 25 '12 at 06:52
Hi @kamyar although intellisense doesnt show it, i put it on n it works. thanq so much :) (using .NET 4.0) – Amit Philips Sep 25 '12 at 10:35

score 0 · Answer 2 · answered Sep 03 '12 at 06:41

0

Like this ?

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

        <ol id="selectable">

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

            <% } %>
       </ol>

answered Sep 03 '12 at 06:41

Snake Eyes

16,287
34
113
221

pls forgive me for my lack of knowledge. but where should i write the above mentioned code... in the codebehind or the .aspx ? why are you using "<% %>" is this some technique ? – Amit Philips Sep 03 '12 at 07:10
No, it's a markup for C# code inside ASP/ASPX page. You can follow Kamyar answer if my answer is not clear or is not good at all for your question – Snake Eyes Sep 03 '12 at 07:59
thank you snake eyes & @kamyar for replying. i followed the inline asp method which snake eyes mentioned (needed this in my scenario) its working great. calling the jqueryui with the "runat = server" disabled the list functionality as well as the style :) thankx guys super happy :) – Amit Philips Sep 03 '12 at 16:04
@Amit: you'd have to set `ClientIdMode` to `static` to force asp.net to use your id and not generating a new id for the `ol` element. – Kamyar Sep 04 '12 at 09:04
@Kamyar how do i obtain the selected li itemms on the code behind file ? – Amit Philips Sep 29 '12 at 09:09

Add list items to jqueryui through C# code-behind

2 Answers2