2009-09-01 19 views
1

私はASP.NETにWebページを持っています。 jQueryでTree Viewコントロールを作成しました。ツリーから項目をドラッグしてdiv要素にドロップします。ASP.NETから動的に作成されたタグ(jQuery)を取得する

<div id="rows" runat="server" class="droppable"> 
</div> 

jQueryの.append関数を使用して、そのdivに項目を追加します。

$(".droppable").append(event.originalTarget.innerHTML); 

私が望むように機能します。しかし今、私はASP.NETコードからすべてのドロップ項目を取得したい。私は次のコードを使用します:

protected void Button2_Click(object sender, EventArgs e) 
{ 
    HtmlGenericControl control = (HtmlGenericControl)Page.FindControl("rows"); 
    Label1.Text = control.InnerHtml; 
} 

しかし、それは動作しません。私はInnerText関数も試しましたが、まだ何もありません。また、ボタンとラベルコントロールをUpdatePanelに入れて、ページが更新されず、ドロップされたアイテムがdiv要素に残るようにしました。

ASP.NETコードから動的に項目を追加する方法を教えてください。

ルーカス

答えて

6

あなたのappend()コールは、単にDOM構造を変更します。 ASP.NETではこれをやったことはありません。

ページの非表示の「状態」フィールドに変更を保存する必要があります。コードビハインドでは、変更を保存する必要があります。背後

var droppedItem = event.originalTarget; 
$(".droppable").append(droppedItem.innerHTML); 
$("#myHiddenStateField").get(0).value += "," + droppedItem.id; 

コード:

string[] droppedItemIds = myHiddenStateField.Value.Split(","); 
+0

を使用した実際の例では、サーバー側のIDは、クライアント側のIDと一致しないことに注意してくださいです。 – ChaosPandion

+0

完璧に動作します!ありがとう! –

1

ASP.NETはフォーム要素でのみ動作することができます。

したがって、これらの行は、例えばある場合(入力[タイプ=テキスト])あなたがこれを行うことができます。ユーザーはあなたがいない理由を要素の上にドラッグすると

Request.Form["rows"] 

EDIT

を新しい隠れた入力を作成し、その中に関連する値を入れます。これにより、上記の例のようにサーバーから値を取得するのが簡単になります。

1

いっそのドロップ可能な成功イベントでjQueryのAJAXを使用してasp.netのPageMethodを経由して各ドロップを記録していない理由を、あなたは内部の解析HTMLに対処する必要はありませんあなたの落ち着きの要素。

が、これはあなたがここに

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

を始める必要があり、私は

  $('.droppable').droppable({ 
      accept: '#dragList > li, .columnRight li', 
      activeClass: 'ui-state-highlight', 
      hoverClass: 'hoverBorder', 
      drop: function(ev, ui) { 
       $.ajax({ 
        type: "POST", 
        url: "yourPage.aspx/AddDroppable", 
        data: "{'id':'" + ui.draggable.context.id + "'}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function(msg) { 
         $("#Result").html(msg.d); 
        } 
       }); 
      } 
     }); 
関連する問題