IE.netのASP.net treenodeからJqueryを呼び出す

Question

asp.net treenodeコントロールからjquery関数を呼び出す際に問題が発生しています。 aspxファイルのtreenodeコードは次のとおりです。 私が使っている方法はjavascriptリンクを "navigateUrl"属性に入れることです。以下は

コードです：

<asp:TreeNode Value="Level1" 
       NavigateUrl="javascript:$('#mainContentContainer').load('report.aspx?level=1');" 
       Text="Level 1" 
       Target="Content" 
       expanded="false"> 

これは、Chromeで完璧に動作します。 report.aspxの内容は、treenodeの「レベル1」をクリックすると、期待どおりにmainContentContainer divに読み込まれます。

ただし、Internet Explorer（v8と9）では、別のブラウザウィンドウを開き、JavaScriptリンクをURLのように読み込もうとします。何らかの理由でアドレスバーにリンクのこの部分のみが表示されます。「javascript：$（ '」とコンテンツウィンドウにこのエラーが表示されます。「Internet Explorerはウェブページを表示できません」

この問題とすべての解決策を検索しました。 "OnClick"属性を使用してJavaScript呼び出しを行うか、または "要素"の "target"属性を "_self"に設定するかのいずれかが推奨されます。

これらのオプションはどちらも私にとっては役に立たず、このasp.netコントロールの有効な属性ではないため、「OnClick」属性を使用しています。

タイプ 'System.Web.UI.WebControls.TreeNode'に 'onclick'という名前のパブリックプロパティがありません はブラウザに表示されるエラーです（標準の.netエラーWebページとして返されます）

私はtarget = "_ self"オプションを試しましたが、唯一の変更は新しいブラウザウィンドウを開いてエラーで表示することでした。現在のブラウザは、アドレスバーに変更を加えることなく[オブジェクトオブジェクト]を表示します。

私が読んだもう一つの解決策は、javascript呼び出しの後に "retun false"を置くことでしたが、これは "関数の外にあるreturn文" JavaScriptエラーです。

asp.net treenodeコントロールからjquery.loadを呼び出すソリューションがある場合は、教えてください。

Answer 1

ドキュメントがロードされた後、またはクリックイベントハンドラをバインドするためにツリーがレンダリングされた後に、jQueryを使用する次のソリューションを検討できます。そのため、NavigateUrl属性内のjavascript:の代わりに、レポートの実際のURLを使用するだけです。

<asp:TreeNode Value="Level1" 
    NavigateUrl="report.aspx?level=1" 
    Text="Level 1" 
    Target="Content" 
    Expanded="false"> 

通常、ページからレポートページに移動することになります。しかし、我々はリンクにクリックイベントハンドラを追加するには、次のjQueryコードを使ってこれを防ぐことができます。

$("#tree a").click(function(e) { 
    // Get the url (report.aspx?level=...) 
    var url = $(this).attr("href"); 

    // Load the report 
    $('#mainContentContainer').load(url); 

    // Don't navigate away 
    e.preventDefault(); 
}); 

あなたは、あなたの中にある特定のレベルでのノードにこのクリックハンドラを追加するために、より具体的なセレクタを使用する必要があります木。その場合、あなたは、これらのノードにLevelStylesを使用してクラスを与えることができ、その後のjQueryで異なるセレクタを使用します。

<div id="tree"> 
    <asp:TreeView runat="server"> 
    <LevelStyles> 
     <!-- Add class report only to nodes at the first level --> 
     <asp:TreeNodeStyle CssClass="report"/> 
    </LevelStyles> 
    ... 
    </asp:treeView> 
</div> 

今すぐあなたのjQueryのセレクタは次のようになります。

$("#tree .report a").click(function(e) { ... });