asp.net - 您将如何在服务器端操作 html 列表？

Question

如何在后台代码(服务器端)动态创建一个新的 html li 元素？

如何访问服务器端现有 ul 元素中的 li ？我需要 FindControl 获取所有 li 项目，然后添加新的 li 项目。

更新

我使用jquery ajax访问服务器端，所以我必须使用静态WebMethod。 FindControl 是非/静态方法。

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

这是 jQuery Ajax 调用

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

这是代码隐藏

[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

您可以使用 HtmlGenericControl 添加 Html 列表项:

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

在上面的示例中，我刚刚将控件直接添加到页面末尾 - 显然您需要考虑将其添加到哪个父元素。

更新要回答您编辑后提出的问题的额外部分，如果您的ul控件的id为ulListId并且标记有runat="server，您可以找到它以编程方式使用 FindControl 方法。然后只需循环 ul 的子级即可:

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