Adding html list items dynamically from code behind?

Question

The above is the code in my .aspx page. How this can be added from code behind dyanmically?

<ul runat="server" id="1">
<li><a href="page.html">abc</a>
  <ul runat="server" id="2">
  <li><a href="pag2.htm">3</a></li>
  <li><a href="page3.htm">2</a></li>
  </ul>
</li>
</ul>

I'd suggest using a repeater with a nested bulletedlist control. But I hope the data is only one level deep...? — deostroll, May 28 '14 at 13:28

zapico · Answer 1 · 2011-09-19T10:27:51.870

You must use the "InnerHtml" property of "sidebarmenu1" control.

protected void Page_Load(object sender, EventArgs e)
        {
            this.loadHtml();
        }

So you can generate every list item code and add it to the InnerHtml:

private loadHtml()
{
    this.sidebarmenu1.InnerHtml = GetListHtml().ToHtmlString();
}

And a little example for this GetListHtml:

public string GetListHtml()
        {
            StringBuilder htmlBuilder = new StringBuilder();

            htmlBuilder.AppendLine("<li><a href="#">Flat</a>");
            htmlBuilder.Append("<ul runat="server" id="sidebarmenu2">");
            htmlBuilder.AppendLine("<li><a href="#">Flat 1`enter code here`</a></li>");
            htmlBuilder.Append("<li><a href="#">Flat 2</a></li></ul>");
            return htmlBuilder.ToString();
        }

This GetListHtml method can call to a DAL or load data from any other place... use a foreach to load every item...

i guess the string (attribute values) you have enclosed in double quotes will not work. eg:htmlBuilder.AppendLine("

score 0 · Answer 2 · answered Sep 19 '11 at 09:04

you can take the analogy of the tutorial given in this link : http://neimke.blogspot.com/2011/01/create-delicious-user-interface-for.html it worked for me - It dynamically adds the list items using the given code below using jquery .. check it pout ...

 <li id="tagInputListItem"><input class="tagInput" id="tagInput" /></li>

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

You can put a PlaceHolder in your .aspx and give it an id, then use that id in code behind page and add controls to that placeholder. For more information you can see in here.

And if you're really sure about "runat=server" attribute maybe this post of mine it's useful (here)

If you need clarifications give me a feedback.

edited May 23 '17 at 12:08

Community

1
1

answered Sep 19 '11 at 09:05

Michael

649
6
9

You can use Controls only for those
- .But for those tags with "runat='server'" you can't do it without using asp controls. So you'll have to use HtmlGenericControls("ul").
– Michael Sep 19 '11 at 11:03

score 0 · Answer 4 · answered Sep 19 '11 at 10:57

You can use ASP Literal to populate data from back-end code eg. if you have literal with id ltrNavigation

protected void Page_Load(object sender, EventArgs e)
{
       ltrNavigation.text = "";
        if (!IsPostBack)
        {
           ltrNavigation.text += "<ul id='sidebarmenu1'>";
           ltrNavigation.text += "<li><a href='#'>Flat</a></li>";
           ltrNavigation.text += "</ul>";
        }

}

Adding html list items dynamically from code behind?

4 Answers4