Save html client changes

Question

I have a div element containing a ul element that starts from empty the first time the page loads. The user can then drag the li elements into this div field, which will populate the ul element. I need to hold on to li elements that were added to the ul container so that I can show li elements after the message back. How can I achieve this?

<div class="sidebar-drop-box"> <p class="dropTitle"><strong>Drop Box</strong><br /> Drag and drop tracks here temporarily if you're working with a long playlist.</p> <ul class="admin-song-list"></ul> </div> 

drag and drop is done using javascript and jquery. All this is on the asp.net page. when the drag and drop is completed, this is the code that executes

 function AddToDropBox(obj) { $(obj).children(".handle").animate({ width: "20px" }).children("strong").fadeOut(); $(obj).children("span:not(.track,.play,.handle,:has(.btn-edit))").fadeOut('fast'); $(obj).children(".play").css("margin-right", "8px"); $(obj).css({ "opacity": "0.0", "width": "284px" }).animate({ opacity: "1.0" }); if ($(".sidebar-drop-box ul").children(".admin-song").length > 0) { $(".dropTitle").fadeOut("fast"); $(".sidebar-drop-box ul.admin-song-list").css("min-height", "0"); } if (typeof SetLinks == 'function') { SetLinks(); } 

So, I tried this code below to go through and get all the elements that are supposed to be in the drop-down list and return them back. but this did not add them to the discard window, as a result of which the changes were made to the main list

 //repopulate drop box if(document.getElementById("ctl00_cphBody_hfRemoveMedia").value!="") { var localRemoveMedias=document.getElementById("ctl00_cphBody_hfRemoveMedia").value.split(","); $(".admin-left li.admin-song").each(function(){ // alert("inEach");//WORKS for(x in localRemoveMedias) { if($(this).attr("mediaid")==localRemoveMedias[x]) { AddToDropBox($(this)); } }//end for });//function(){ } 

Answer 1

To save your draggable items during postback, I suggest that you store your item identifiers in asp: hiddenfield when your user performs drag and drop operations.

When the postback occurs, your IDs will be saved and you can recreate the state of your page as it was before the postback.

Answer 2

For drag and drop operations, as a rule, a message is not required. You can update server servers using Ajax, which completely eliminates page state creation.

Answer 3

Apples and oranges. Why are you sending back? I did the same when I started using Ajax. I had a small part of the nice functionality of Ajax and the whole old old school that controlled viewstateenabled = "true", the good old .Net on one page. This is what we feed for the past 10 years. I saved the state of the changes when I made them on the client, and then I worked on the server to save the changes between postbacks. I found that the less I used postbacks, the more I developed into a state of statelessness. If you can avoid feedback, make an Ajax call to the server and do what you need to do, return the results and redraw accordingly.