web-dev-qa-db-ja.com

マスターページでJQueryを使用する方法

マスターページが含まれていない限り、簡単に動作する簡単な例を入手できます。マスターページを使用して、ボタンをクリックし、.jsファイル内のjavascriptで「hello world」と言うようにするだけです。どんな助けも非常に感謝します:)

asp.netjquerymaster-pages
30
Keith Myers

[〜＃〜] edit [〜＃〜]

@Adamがコメントで指摘しているように、私の元の答えのハックと基本的に同じことを行うネイティブjQueryメカニズムがあります。あなたができるjQueryを使用して

 $('[id$=myButton]').click(function(){ alert('button clicked'); });

私のハックは元々ASP.NETのPrototypeの回避策として開発されたもので、元の答えに合わせて変更しました。 jQueryは基本的に内部で同じことを行うことに注意してください。ただし、ハックを実装するよりもjQueryを使用することをお勧めします。

コメントコンテキストの元の回答

マスターページを使用すると、ASP.NETは依存ページ上のコントロールの名前をマングルします。ハンドラーを追加する適切なコントロールを見つける方法を見つける必要があります（javascriptを使用してハンドラーを追加する場合）。

私はこの機能を使用してそれを行います：

function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}

その後、次のようなことができます：

jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );

子ページに次のものがある場合

<asp:Button ID="myButton" runat="server" Text="Click Me" />
26
tvanfosson

サイトのコンテンツページが他のフォルダーにある場合、srcパスでPageのResolveUrlメソッドを使用すると、jsファイルを常に見つけることができます。

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
24
djuth

マスターページにjQueryが追加されていることを確認します。この制御があると仮定すると：

_<asp:Button ID="myButton" runat="server" Text="Submit" />
_

これでjavascriptを接続できます：

_$(document).ready(function() {
    $('[id$=myButton]').click(function() { alert('button clicked'); });
});
_

$(document).ready()は、DOMが完全にロードされ、すべての要素がそこにある必要があるときに起動します。これをさらに簡素化できます

_$(function() {});
_

セレクター構文$('[id$=myButton]')は、id属性に基づいて要素を検索しますが、文字列の最後にのみ一致します。逆に、_'[id^=myButton]'_は先頭に一致しますが、UniqueIDを除外するためにはあまり役に立ちません。 jQueryで使用できるさらに多くの便利なセレクターがあります。 それらすべてを学ぶ 、そしてあなたの多くの仕事はあなたのために行われます。

問題は、ASP.Netが各要素に対して一意のidおよびname属性を作成するため、それらを見つけるのが困難になることです。以前は、UniqueIDプロパティをサーバーからjavascriptに渡す必要がありましたが、jQueryはそれを不要にします。

JQueryのセレクターのパワーを使用して、JavaScriptをサーバー側から完全に分離し、イベントをJavaScriptコードで直接ワイヤリングできます。マークアップにJavaScriptを追加する必要はもうありません。これにより、読みやすくなり、リファクタリングがはるかに簡単になります。

20
Adam Lassek

<script type="text/javascript" src="jquery.js" />タグをマスターページのheadタグに挿入します。その後、すべてのコンテンツページでjqueryを使用できます。

JQueryでマスターページを使用する魔法はありません。

15
gius

Adamのソリューションが最適です。シンプル！

マスターページ：

<head runat="server">    
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>    
</head>

コンテンツページ：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">       
<script type="text/javascript">
    $(document).ready(function () {
        $("[id$=AlertButton]").click(function () {
            alert("Welcome jQuery !");
        });
    }); 
</script> 
</asp:Content>

ボタンがある場所

<asp:Button ID="AlertButton" runat="server" Text="Button" />
7
AFD

次のように、MasterPageのヘッドでJquery .jsファイルを参照します。

<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>

（一部のブラウザは/>で終わるのが嫌いです）

その後、次のように書くことができます

$('#<%= myBtn.ClientID%>').show()

javaScriptで、クライアントコードでASP.Netコントロールを参照するときにClientIdを使用するようにしてください。これは、コントロールの名前とIDの「マングリング」を処理します。

5
Jared

マスターページ：

JQueryライブラリーはマスターページに入ります。パスが正しく参照されているかどうかを確認してください。次のような追加のドキュメントを追加できます。

<head>
    <script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 
    <% if (false) { %>
    <script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script>
    <% } %>
</head>

マスターページ：

<head>
<script type="text/javascript">
    $(document).ready(
        function()
        {
            alert('Hello!');
        }
    );
</script>
</head>

コンテンツページとユーザーコントロールのCodeBehind：

this.textBox.Attributes.Add("onChange",
    String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));
1
Patrick de Kleijn

マスターページと共にページがレンダリングされると、ページレンダリングでコントロールIDが変更されるため、jQueryでこの#controlidのように参照することはできません。代わりに、input[id$=controlid]を使用してみてください。コントロールが入力コントロールとしてレンダリングされる場合、またはアンカータグとしてjQueryでa[id$=controlid]を使用する場合。

1
Nitin Nayyar

誰かがラベルにアクセスしたい場合、ここに構文があります

$('[id$=lbl]').text('Hello');

ここで、lblはラベルIDであり、ラベルに表示するテキストは 'Hello'です。

1
hoodwink

この投稿をチェックしてください：

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

また、Visual StudioでjQueryのインテリセンスを取得する方法についても説明します。

1
Stefan

また、最も単純な例から始めましたが、運がありませんでした。最後に、マスターページの<head>セクションのjquery .jsファイルoutsideを追加する必要がありました。これは、Firefoxで何かを動作させるための唯一の方法でした（まだ他のブラウザを試したことはありません）。

また、絶対アドレスで.jsファイルを参照する必要がありました。何が起こっているのか完全にはわかりません。

0
Scott Marlowe

Adam LassekはjQueryセレクターの使用にリンクしていましたが、IDではなく、クラスによって要素を選択することを明示的に呼び出す価値があると思います。

例えば$("#myButton").click(function() { alert('button clicked'); });の代わりに

代わりに$(".myButtonCssClass").click(function() { alert('button clicked'); });を使用してください

クラスをボタンに追加します。

<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />

これには、同じjQueryコードを一度に（同じcssクラスで）複数のコントロールに適用できることに加えて、2つのコントロールIDが同じ方法で「終了」するかどうかを心配する必要がないという利点があります。

0
n00b

  • 問題-> Site.Masterページを使用する場合、コントロールID名（ASPコントロールの場合）はプレフィックスが付けられたContentPlaceHolderIDを取得します（これはASP以外のコントロールでは問題ではないことに注意してください ' t「再解釈」されます-すなわち、それらは単に書かれたように表示されます）

  • 解決策：

      1. 最も単純-> aspxページのaspコントロール定義にClientIDMode = "Static"を追加（またはプロパティで設定）
    • 代替手段は次のとおりです。
      1. JsコードでContentPlaceHolderID名をハードコーディングします。例：「＃ContentPlaceHolder1_controlName」-eek !!!!
      1. <== controlName.ClientID％>をASPページ-プラス、割り当て-そこ-変数（または変数のオブジェクト）で使用します。変数（またはオブジェクトのドット表記）はその後、外部jsページで使用されます（注：外部jsでは<％= controlName.ClientID％>を使用できません）
      1. ASPページで一意の（IDと同じ名前）のCssClassを使用し、 "＃controlName"ではなく ".controlName"としてコントロールを参照する
      1. 「#controlName」の代わりに「[id $ = _ controlName]」を使用する-これは小さな検索を伴い、一意の名前で終わるコントロールを探しています-そのように開始は無関係です
0
Mike