Transfer list from code behind to aspx page

Question

I want to populate a List dynamically and display the list when i hover over a button

<div class="invite">
    <asp:Button ID="Button1" runat="server" Text="Invite"  CssClass="invite-link"/>
    <div class="invite-drop">
        <div class="holder">
            <ul runat="server">
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Chris Robin</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Danny Defoee</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Gustav Lee</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img3.png" width="22" height="22" alt="image description" />
                        <span>Eric Rees</span>
                    </a>
                </li>
            </ul>
            <a class="select" href="#">Or select friend</a>
        </div>
    </div>
</div>

My list is as follows and i am trying to construct it dynamically :

HtmlGenericControl list = new HtmlGenericControl("ul");
for (int i = 0; i < 3; i++)
{
    HtmlGenericControl listItem = new HtmlGenericControl("li");
    HtmlGenericControl anchor = new HtmlGenericControl("a");
    Image im = new Image();
    //im.ImageUrl = ds.Tables[0].Rows[1].ItemArray.ToString();
    anchor.Attributes.Add("href", "");
    anchor.Controls.Add(im);
    anchor.InnerText = "TabX";
}

EDIT :

i have been successful in transferring the list from codebehind however the formatting isnt correct want to display the images one below the other

My question is how do i transfer it to aspx design page? and display it on the hover event

Please help

Answer 1

Add the dynamically created ul from server side into Page controls collection or anywhere on the page and make it hidden by default through css or inline style display:none . Give an id or class to ul which will help to find the element on the client side.

On the client you can find it using $('ul.classname') or $('#listId) and then show it using show() on the hover event and position it as per your requirement.

Based on your code.

Give an id to ul

<ul ID="list" runat="server">

Note in the for loop you should add the anchor to the list control.

    for (int i = 0; i < 3; i++)
    {
        HtmlGenericControl listItem = new HtmlGenericControl("li");
        HtmlGenericControl anchor = new HtmlGenericControl("a");
        Image im = new Image();
        //im.ImageUrl = ds.Tables[0].Rows[1].ItemArray.ToString();
        anchor.Attributes.Add("href", "");
        anchor.Controls.Add(im);
        anchor.InnerText = "TabX";

        list.Controls.Add(anchor);
     }

Js

$('.invite-link').hover(function(){
     $('#list').show();
}, function(){
     $('#list').hide();
});