Getting dynamically created tags (jQuery) from ASP.NET

Question

Hi,

I have web page in ASP.NET. I have created Tree View control with jQuery. I drag items from the tree and drop into the div element.

<div id="rows" runat="server" class="droppable">
</div>

I add items to that div using .append function from jQuery.

$(".droppable").append(event.originalTarget.innerHTML);

It works like I want. But now I want to get all dropped items from ASP.NET code. I use following code:

protected void Button2_Click(object sender, EventArgs e)
{
    HtmlGenericControl control = (HtmlGenericControl)Page.FindControl("rows");
    Label1.Text = control.InnerHtml;
}

But it doesn't work. I've also tried InnerText function, but still nothing. I've also put the button and label controls into UpdatePanel so the page doesn't refresh and my dropped item are still in div element.

How can I get dynamically added items from ASP.NET code.

Lukas

Answer 1

ASP.NET will only be able to work with form elements.

So if these rows are for example (input[type=text]) you can do this:

Request.Form["rows"]

EDIT

When the user drags over the element why don't you create a new hidden input and put the relevant value inside of it. This will make it easy to grab the value from the server with the example I used above.

Answer 2

Your append() call simply changes the DOM structure. ASP.NET has no idea you did this.

You need to store your changes into a hidden "state" field on the page, and in your code-behind pluck them out.

var droppedItem = event.originalTarget;
$(".droppable").append(droppedItem.innerHTML);
$("#myHiddenStateField").get(0).value += "," + droppedItem.id;

Code behind:

string[] droppedItemIds = myHiddenStateField.Value.Split(",");

Answer 3

better yet why not use jquery's ajax on droppable's success event and record each drop via asp.net's PageMethod, then you don't have to deal with parsing html inside your droppable element.

this should get you started

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

here is an actual example i used

          $('.droppable').droppable({
            accept: '#dragList > li, .columnRight li',
            activeClass: 'ui-state-highlight',
            hoverClass: 'hoverBorder',
            drop: function(ev, ui) {
                $.ajax({
                    type: "POST",
                    url: "yourPage.aspx/AddDroppable",
                    data: "{'id':'" + ui.draggable.context.id + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                        $("#Result").html(msg.d);
                    }
                });
            }
        });