クライアントのHTML変更を保存する

Question

ページが最初に読み込まれたときに空白で始まるul要素を含むdiv要素があります。ユーザーは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(); 
    } 

を実行されるコードであるので、私は通過し、ドロップダウンボックスにあり、それらを戻すために仮定されているすべての要素を取得するには、以下のこのコードを試してみました。それは、それは私はあなたがASPであなたの要素のIDを保存することをお勧め

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

がポストバック間であなたのドラッグ要素を保持するために、マスターリストに変更を加えたドロップボックスに追加didntは：ユーザーとしてのHiddenFieldは彼のドラッグを行います/ドロップ操作。

ポストバックが発生すると、IDが保持され、ポストバック前と同じようにページの状態を再現することができます。

Answer 2

ドラッグアンドドロップ操作では、一般にポストバックは不要です。 Ajaxを使用してサーバー側の更新を行うことができ、ページ状態の作成を完全に排除します。

Answer 3

リンゴとオレンジ。なぜあなたは転記していますか？私はAjaxを使い始めたときも同じことをしていました。私は素晴らしいAjaxの機能と古い学校の状態の多くをviewstateenabled = "true" good old .Netを1ページに集めました。私たちは過去10年間食糧を与えられていますか？私はクライアント上でそれらを作ったときに変更の状態を保存していました。そして、私はポストバックの間の変更を維持するためにサーバーを操作していました。私はポストバックを少なくし、ステートレスな心の中で私が開発したものが多くなったことを知りました。ポストバックを避けることができれば、サーバーへのAjaxコールを行い、実行しなければならないことを実行して、結果を返し、それに応じて再描画します。