Question

How would you create a new html li element dynamically in the code behind (server side)?

How would you access an li in an existing ul element on the server side?
I need to FindControl get all li items and then add new li item.

Update

I’m using jquery ajax to access server side, so I must use static WebMethod. FindControl is non/static method.

 <script type="text/javascript">
        $(function(){
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });

This is jQuery Ajax Call

$(document).ready(function() {
        // Add the page method call as an onclick handler for the div.
        $("#Result").click(function() {
            $.ajax({
                type: "POST",
                url: "DraggableTest.aspx/SomeMethod",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    // Replace the div's content with the page method's return.
                    $("#Result").text(msg.d);
                }
            });
        });
    });

This is CodeBehind

[WebMethod]
    public static string SomeMethod()
    {
        // using System.Web.UI.HtmlControls;
        HtmlGenericControl ul = FindControl("sortable") as HtmlGenericControl;
        if (ul != null)
        {
            foreach (HtmlControl c in ul.Controls)
            {
                if (c.TagName.ToLower() == "li")
                {
                    // Processing here
                }
            }
        }


    }

Answer 1

You can add an Html List Item using the HtmlGenericControl:

System.Web.UI.HtmlControls.HtmlGenericControl li = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
li.InnerHtml = "<b>Some text</b>";
Page.Controls.Add(li);

In the above example, I’ve just added the control directly to the end of the page – you’ll obviously need to consider what parent element you add it to.

Update
To answer the extra part of the question that you asked after edit, if your ul control has an id of ulListId and is marked with runat="server, you can find it programmatically using the FindControl method. Then just loop through the ul’s children:

        // using System.Web.UI.HtmlControls;
        HtmlGenericControl ul = Page.FindControl("ulListId") as HtmlGenericControl;
        if (ul != null) {
            foreach (HtmlControl c in ul.Controls)
            {
                if (c.TagName.ToLower() == "li")
                {
                    // Processing here
                }
            }
        }