Speichern Client HTML-Änderungen

Question

Ich habe ein div-Element, das ein ul-Element enthält, das beim Laden der Seite leer beginnt. Der Benutzer kann dann li-Elemente in dieses div-Feld ziehen, das das ul-Element auffüllt. Ich muss in der Lage sein, die li-Elemente beizubehalten, die dem ul-Container hinzugefügt wurden, so dass ich die li-Elemente nach einem Post-Back anzeigen kann. Wie kann ich das erreichen?

<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 & Drop ist mit Javascript und jquery gemacht. All dies sitzt auf einer asp.net-Seite. wenn die Schlepp abgeschlossen ist dieser Code, der ausgeführt wird

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

Also habe ich versucht, diesen Code unten durch zu gehen und alle Elemente zu erhalten, die in dem Dropdown-Feld sein, sind wohl und legte sie zurück. aber es hat nicht sie in die Drop-Box hinzuzufügen, die Änderungen an der Master-Liste gemacht

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

Um Ihre geschleppt Elemente über Postbacks beibehalten ich Ihnen vorschlagen, Ihre Elemente zu speichern IDs in einem asp: Hidden als Benutzer tun, um seine Drag/Drop-Operationen.

Wenn Postback auftritt, werden Ihre IDs beibehalten und Sie können Ihren Seitenstatus wie vor dem Postback neu erstellen.

Answer 2

Für Drag & Drop-Vorgänge ist die Post-Back-Operation normalerweise nicht erforderlich. Sie können Ihre serverseitigen Aktualisierungen mithilfe von Ajax durchführen, wodurch die Erstellung des Seitenstatus vollständig verhindert wird.

Answer 3

Äpfel und Orangen. Warum postest du zurück? Ich machte das gleiche, als ich anfing, Ajax zu benutzen. Ich hatte ein bisschen nette Ajax-Funktionalität und eine ganze Menge von alten Schule Zustand ViewStateenabled = "True" gute alte. Net auf einer Seite. Ist, was wir seit den letzten 10 Jahren gefüttert werden. Ich habe den Zustand der Änderungen gespeichert, als ich sie auf dem Client gemacht habe, und dann habe ich auf dem Server gemanagt, um die Änderungen zwischen den Postbacks aufrechtzuerhalten. Ich fand heraus, dass je weniger Postbacks verwendet wurden und je mehr ich mich in einem zustandslosen Zustand entwickelte. Wenn Sie den Post zurück vermeiden können, machen Sie einen Ajax-Anruf zum Server und tun Sie, was Sie tun müssen, geben Sie die Ergebnisse zurück und zeichnen Sie entsprechend neu.