サーバー上のJquery TreeViewへのアクセス方法

Question

フォームの送信時に.aspxファイル内のJquery Treeviewにアクセスするにはどうすればよいですか？ また、ノードをJqueryツリービューにオンザフライで追加できますか？

（クライアント側で）私が編集＃

C、asp.netのWebフォームを使用しています：質問の一つに次のように述べ 誰か： 「フォーム上で提出し、誰かが書き込みをしているつもりされますそのデータを収集し、Ajaxを介してサーバメソッドに送信するためのクライアントコード "

これはどのように行われますか？

Answer 1

jQuery Treeviewはクライアント側のコンポーネントなので、サーバー側からはアクセスできません。したがって、ツリーからサーバーにデータを渡すには、クライアントサイドのJavaScriptコード（実際はjQueryコード）を記述する必要があります。 TreeViewにノードを追加することについても、クライアント側のjQueryコードのみを使用しています。サーバー側のC＃はTreeViewについて全く知らないことに注意してください。

jQueryとASP.NET WebFormsの統合は、ASP.NETがさまざまなコンセプトで構築されているため、やや難解で「あまり自然ではありません」。ASP.NET WebFormsを使用している場合は、サーバー側のコンポーネントを代わりに使用することもできます（Microsoft独自のASP：TreeViewやその他のサードパーティ製WebFormsのコンポーネント）。また、新しいASP.NET MVCフレームワークを試すこともできます。これは一般的な（他のWeb開発プラットフォームの）コンセプトに基づいており、jQueryとの統合は簡単です（実際にはjQueryも同梱されています）。

間違ってはいけない...私は、jQueryとASP.NET WebFormsの統合は全く不可能だと言っているわけではありません。可能です。しかし、あなたは「あまりにも美しい」ものをする必要があり、すべての簡単な操作のために懸命に働く必要があります。それでもjQueryを使用する場合は、クライアント側のアニメーションにのみ使用してください。

更新：この見積もりについて - 「フォームの送信時に、誰かが収集するコードをクライアントに書き込む必要がありますそのデータをAjax経由でサーバーメソッドに送信します」 - これはまさに私が話していることです。クライアント側では、フォームを送信するときにjavascriptメソッドを呼び出します（たとえば、 "Submit"ボタンにonclick = 'mymethod（）;'を設定します）。このコードは、必要な処理をしてから、jQueryの素晴らしい構文を使用してAJAX呼び出しを実行することになっています。しかし、前に説明したように、これはASP.NET WebFormsでは機能しません。さて、Microsoft AJAXクライアント側のライブラリ（ここではhttp://msdn.microsoft.com/en-us/magazine/cc163300.aspx）について読むことができます。おそらくこれが役に立ちます。しかし、私はまだこの統合が簡単ではないと思います。他のすべてのものについては、アニメーションおよびASP.NETサーバー側コンポーネントにjQueryを使用してください。

Answer 2

私はあなたが望むものを見つけたと思います。見てくださいhere。

簡単に言うと、サーバー側でWebMethodを定義し、jQueryを使用して簡単にアクセスできます。上記のリンクの下には、優れた作業例があります。ここでは、引数を渡す方法を示すために変更します。だから... ...あなたのページのコードビハインド* .csファイルで

：

// We'll use this class to communicate 
public class Dog 
{ 
    public string Name { get; set; } 
    public string Color { get; set; } 
} 

// This is your page, in my case Default.aspx 
public partial class _Default : System.Web.UI.Page 
{ 
    [WebMethod] 
    public static string ProcessData(Dog myDog) 
    { 
     return "Your " + myDog.Color + " dog's name is " + myDog.Name + "!"; 
    } 
} 

その後、あなた*の.aspxの上：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="json2.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#btnProcess").click(function() { 
      // This is what we want to send to the server 
      var dogItem = 
      { 
       Color: $("#txtColor").val(), 
       Name: $("#txtName").val() 
      }; 

      // And this is how it should be sent - in serialized way 
      var dogItemSerialized = JSON.stringify(dogItem); 

      $.ajax({ 
       type: "POST", 
       url: "Default.aspx/ProcessData", 
       data: "{'myDog':" + dogItemSerialized + "}",  
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        $("#result").text(msg.d); 
       } 
      }); 
     }); 
    }); 

</script> 
Color: <input id="txtColor" type="text" /><br /> 
Name: <input id="txtName" type="text" /><br /> 
<input id="btnProcess" type="button" value="Click Me" /> 
<div id="result"></div> 

だからここにあなたがテキストボックスに記入してからデータが送信されますそれをDogオブジェクトとして理解しているサーバに渡します。引数を渡すことに注意してください。これは最も混乱する部分です。あなたはJSON形式で渡す必要がありますが、これはちょっと「あまりにも多くの文字列」です。だからここでjson2を使う。通常のjavascriptオブジェクトをJSON直列化文字列（JSON.stringify（）メソッド）に変換するのに役立つjsスクリプトです。利用可能なのはhereです。しかし、まだかなり醜い=）私は、値がシリアル化されたdogItemである "myDog"という引数を渡すことが重要です。これは、サーバーが（そう、例えば、私は引数名を変更することはできません取得する予定で、まさにあるので、このはを動作しません。

data: "{'someAnotherArgumentName':" + dogItemSerialized + "}" 

そして最後以下に注意してください。ライン：あなたは以前3.5（例えば、ASP.NET 2.0）にASP.NETを使用している場合

success: function(msg) { 
      $("#result").text(msg.d); 
     } 

、その後、あなただけの$（ "＃結果"）を記述する必要がありますテキスト（MSG。）の代わりにmsg.d。ASP.NET 3.5のみが "d"メンバーのすべてのデータをカプセル化します何らかの理由で...

とにかく、上記の記事では、記事やコメントの中の便利なリンクを見つけることができるので、引数 "msg.d"などを読むことができます。

こちらがお役に立てば幸いです。