jquery - aspxとhtmlのJquery

Question

マスターページを使用せずに aspx ページで次の Jquery を実行しています。スクリプト付きのマークアップを以下に示します。それはうまく動作します。

<body>
<form id="form1" runat="server">
<div>

    <asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />

    <asp:CheckBoxList ID="cbList" runat="server">
    </asp:CheckBoxList>

</div>
</form>

ここにスクリプトがあります

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

<script type="text/javascript">
    $(document).ready(function () {
        $('#chkAll').click(
         function () {
             $("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
         });
    });    

 </script>

マスターページを使用して作成したページのマークアップを次に示します。マスターページには、HeadContent プレースホルダーのヘッダーにある jquery ファイルへの参照のみが含まれます。言うまでもなく、マスターページのシナリオでは機能しません。質問はなぜ

 <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
   The identical script from above is placed here

</asp:Content>

そして、これがプレースホルダーコンテンツマークアップです。

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

<div>

    <asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />

    <asp:CheckBoxList ID="cbList" runat="server">
    </asp:CheckBoxList>

</div>
</asp:Content>

score 0 · Accepted Answer

jQueryスクリプトへの相対パスに問題があるようです。スクリプトが読み込まれているかどうかを確認するには、Webデバッガー（FireBug、IEツールバーなど）を使用する必要があります。Scriptsフォルダーがサイトのルートにある場合は、scriptsrcを「/Scripts/jquery-1.7.2.js」に設定します。

score 0 · Accepted Answer

これは、マスターページを使用すると、ページに表示されるコントロール ID が異なるためです。コードが両方のケースで機能することを確認するには、以下のようなことを行う必要があります。

$("[id$='chkAll']").click() { function () {
    $("INPUT[type='checkbox']").attr("checked", $(this).attr("checked"));
});

お役に立てれば！！

score 0 · Accepted Answer

IDWeb フォームコントロールに指定した値を使用することはできませんrunat="server"。ID は次のように変更されctl1_chkAll、スクリプトは失敗します。次のような方法でクライアント ID を参照する必要があります。

$("#<%= chkAll.ClientID %>")

... これが、人々が Web フォームから離れていく理由です。

score 0 · Accepted Answer

コントロールで使用ClientIDMode="Static"すると、割り当てた名前で参照できるようになります。

<asp:CheckBox ID="chkAll" runat="server" Text="Check All" ClientIDMode="Static" />

jquery - aspxとhtmlのJquery

4 に答える 4

Related

Reference