guardar cambios html del cliente

Question

Tengo un elemento div que contiene un elemento ul que comienza vacío cuando la página se carga por primera vez. El usuario puede arrastrar elementos li en este cuadro div que poblará el elemento ul. Necesito poder retener los elementos li que se han agregado al contenedor ul para que pueda mostrar los elementos li después de una publicación posterior. ¿Cómo puedo conseguir esto?

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

arrastrar y soltar se hace con javascript y jquery. Todo esto se encuentra en una página asp.net. cuando se ha completado el arrastre este es el código que se ejecuta

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

así que intenté el código de abajo para ir a través y obtener todos los elementos que se supone que debe estar en el cuadro desplegable y ponerlos de nuevo. pero que aún no ha añadirlos al cuadro desplegable que realizó los cambios en la lista maestra

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

para conservar los elementos arrastrado a través de la devolución de datos que sugieren que puede almacenar los elementos identificadores en un asp: HiddenField como usuario hacer su arrastre/soltar operaciones

Cuando se produzca la devolución de datos, sus ID se mantendrán y podrá volver a crear el estado de la página tal como era antes de la devolución.

Answer 2

Para las operaciones de arrastrar y soltar, generalmente no se requiere la publicación posterior. Puede hacer las actualizaciones del lado del servidor utilizando Ajax, lo que eliminará por completo la creación del estado de la página.

Answer 3

Manzanas y naranjas. ¿Por qué estás posteando? Estaba haciendo lo mismo cuando comencé a usar Ajax. Tenía un poco de buena funcionalidad de Ajax y gran parte de old school state viewstateenabled = "true" good .Net viejo en una página. Es de lo que estamos siendo alimentados durante los últimos 10 años. Estaba guardando el estado de los cambios cuando los hice en el cliente y luego me mantuve en el servidor para mantener los cambios entre las devoluciones. Descubrí que cuanto menos usaba las devoluciones de datos y más desarrollaba en un estado mental sin estado. Si puede evitar la publicación, haga una llamada Ajax al servidor y haga lo que tiene que hacer, devuelva los resultados y vuelva a dibujar en consecuencia.