asp.net - 保存客户端 html 更改

Question

我有一个 div 元素，其中包含一个 ul 元素，该元素在页面首次加载时开始为空。然后，用户可以将 li 元素拖到此 div 框中，该框将填充 ul 元素。我需要能够保留已添加到 ul 容器中的 li 元素，以便我可以在回发后显示 li 元素。我怎样才能实现这个目标？

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

Answer 1

为了在回发过程中保留拖动的元素，我建议您在用户执行拖/放操作时将元素 ID 存储在 asp:hiddenfield 中。

当发生回发时，您的 ID 将被保留，并且您将能够重新创建回发前的页面状态。