How would you manipulate an html list on the server side?

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 use HtmlGenericControl to create server side li element. Another alternative might be using LiteralControl.

EDIT : If your <ul> is a server control (has runat="server" attribute) you can access it by Page.FindControl("yourControlID").

// <ul runat="server" id="yourControlID"></ul>

HtmlGenericControl myUl = (HtmlGenericControl)Page.FindControl("yourControlID");
LiteralControl liByLiteral = new LiteralControl("<li>li by LiteralControl</li>");
myUl.Controls.Add(liByLiteral);
HtmlGenericControl newByHtmlGenericControl = new HtmlGenericControl("li");
newByHtmlGenericControl.InnerText = "li by HtmlGenericControl";
myUl.Controls.Add(newByHtmlGenericControl);
// You can access other <li> elements in <ul> control

Answer 2

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