CODEWITHSUNDEEP
asp.netajaxjquery
nemke
nemke

Reputation: 2458

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

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


    }

Upvotes: 1

Views: 5019

Answers (2)

Canavar
Canavar

Reputation: 48088

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

Upvotes: 0

Dexter
Dexter

Reputation: 18452

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

Upvotes: 4

Related Questions