保存客户端html更改

问题描述:

我有一个div元素,其中包含一个ul元素,该元素在页面首次加载时从空开始。然后,用户可以将li元素拖入此div框中,该框将填充ul元素。我需要能够保留添加到ul容器的li元素,以便在回发后显示li元素。我怎样才能做到这一点?保存客户端html更改

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

拖放是用javascript和jquery完成的。所有这些都在asp.net页面上。当拖拽完成这是执行

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

所以我想下面这段代码要经过,并得到所有被假设是在下拉框,并把它们放回去的元素代码。但它没有把它们添加到它所做的更改到主列表

//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(){ 
     } 
+3

您可能希望提供一些更多信息,例如特别用于执行拖放操作的框架。这些工具中的每一种都有不同的方式来实现你想要的。 – NotMe 2010-12-20 19:20:28

+3

当在客户端完成放置来存储状态时,不会向服务器发出AJAX请求,从而使您可以执行所需操作?我可能会感到困惑。我不知道回传是在哪里更新到服务器... – gbvb 2011-02-08 22:22:28

+0

您是否尝试将控件的'.innerHtml'属性作为字符串发送到服务器?也许在你的控件中设置'runat = server',你可以在提交整个页面时自动获取更新的内容。 – BertuPG 2011-02-11 13:06:02

要保留整个回传你的拖累因素,我建议您存储元素的ID在ASP的下拉框:hiddenfield为你的用户做他的阻力/放置操作。

当发生回发时,您的ID将被保留,您将能够像回发之前一样重新创建页面状态。

对于拖放操作,通常不需要回发。您可以使用Ajax来完成服务器端更新,这将完全消除页面状态的创建。

苹果和桔子。你为什么张贴回来?当我开始使用Ajax时,我也在做同样的事情。我有一个不错的Ajax功能和一大堆旧式的状态驱动viewstateenabled =“真正”好旧的.net在一个页面。是我们在过去的10年中所吃的东西。当我在客户端上创建这些更改时,我正在保存这些更改的状态,然后在服务器上进行操作以维护回发之间的更改。我发现使用回传的次数越少,我越是在无状态的状态下发展。如果您可以避免发布回调服务器的Ajax调用并执行您必须执行的操作,请返回结果并相应地重新绘制。