マスターページでJQueryを動作させることができません

マスターページのないフォームでサンプルjqueryがあり、正常に動作します。私はマスターページ内で同じ機能を使用しようとしていますが、機能しません。私はASP.NETを使用しています。ここでは、両方のための私のコードは次のとおりです。マスターページでJQueryを動作させることができません

Webフォーム（この作品）：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Surfitlocal.WebForm3" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#pHeader').click(function() { 
       $('#pBody').slideToggle('slow'); 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     .cpHeader 
     { 
      color: white; 
      background-color: #719DDB; 
      font: bold 11px auto "Trebuchet MS", Verdana; 
      font-size: 12px; 
      cursor: pointer; 
      width:450px; 
      height:18px; 
      padding: 4px;   
     } 
     .cpBody 
     { 
      background-color: #DCE4F9; 
      font: normal 11px auto Verdana, Arial; 
      border: 1px gray;    
      width:450px; 
      padding: 4px; 
      padding-top: 7px; 
     }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader"> 
      <asp:Label ID="lblText" runat="server" /> 
     </asp:Panel> 

     <asp:Panel ID="pBody" runat="server" CssClass="cpBody"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit 
      esse cillum dolore eu fugiat nulla pariatur 
     </asp:Panel> 
    </div> 
    </form> 
</body> 
</html>

マスターページ（これは動作しません）：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Biz.Master.cs" Inherits="Surfitlocal.Site1" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 
    <script src="scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#pHeader').click(function() { 
       $('#pBody').slideToggle('slow'); 
      }); 
     }); 
    </script>  
    <style type="text/css"> 
     .cpHeader 
     { 
      color: white; 
      background-color: #719DDB; 
      font: bold 11px auto "Trebuchet MS", Verdana; 
      font-size: 12px; 
      cursor: pointer; 
      width:450px; 
      height:18px; 
      padding: 4px;   
     } 
     .cpBody 
     { 
      background-color: #DCE4F9; 
      font: normal 11px auto Verdana, Arial; 
      border: 1px gray;    
      width:450px; 
      padding: 4px; 
      padding-top: 7px; 
     }  
    </style> 
    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:Panel ID="pHeader" runat="server" CssClass="cpHeader"> 
      <asp:Label ID="lblText" runat="server" /> 
     </asp:Panel> 

     <asp:Panel ID="pBody" runat="server" CssClass="cpBody"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna 
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit 
      esse cillum dolore eu fugiat nulla pariatur 
     </asp:Panel>  

     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
</asp:ContentPlaceHolder> 


    </div> 
    </form> 
</body> 
</html>

出典

2009-05-08 user103854

問題は、あなたがマスターページを追加するときあなたが得るということですClientIDのマングリング。

$("#pBody") => $(".pBody")

IDをMasterPageで使用することはできません。あなたはmangled clientIDにアクセスできません。要素にカスタムCSSクラスが必要です。

もちろん、そのマスターページを使用するすべてのページにpBodyがあることを期待しています。マスタページではなくページにコードを保存する方がよい。

出典

2009-05-08 21:50:37

例が表示されるように書式が修正されました。 –

Chrisさん、ありがとうございました。また、私の質問に書式を修正していただきありがとうございます。 :) Louis – user103854

.NET 4では、ClientIDの生成を無効にするためのベークインオプションが導入されました。以前のバージョンでは、ContentPlaceHolderとContentから継承し、Stringを返すことで無効にできました。 ClientID（および私を逃れる1つの他のID）を取得するための呼び出しでは空です – STW

あなたはCssClassを使用していますが、あなたの機能ではIDを示す "＃"を使用しています。

したがって

$('#pBody')

は、あなたはまだIDを使用したい場合は、あなたが使用する必要があり

$(".pBody')

であるべき：

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

出典

2009-05-08 21:51:09 janhartmann

返事をいただきありがとうございます。それは今の魅力のように機能します。 – user103854

-1

についてはasp.netでこの問題を解決しますスクリプトマネージャーを使用できます：

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
    <Scripts> 
    //put your js file in script reference tag: 
    //<asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" /> 
    //<asp:ScriptReference Path="~/scripts/PWDMenuMaker.js" /> 
    </Scripts> 
</asp:ScriptManager>

// Movafaghはただ、これらの下に配置しよう

出典

2010-08-17 20:31:23 hamed

これは、既にASP.NET AJAX拡張を使用している場合には受け入れられるかもしれませんが、UpdatePanelsやその他のコントロールを使用していない場合は非常に貧弱です。テストでは、素敵な 'ScriptManager'が〜20kの余分なJavascriptを生成してクライアントに送ります（このScriptManagerはスクリプトを参照しません - それは20KBの100％未使用の無駄です） – STW

をbashid。マスターページで助けてください

$(document.getElementById("<%=pHeader.ClientID%>") 

$(document.getElementById("<%=pBody.ClientID%>")

出典

2013-05-01 05:48:38

マスターページでJQueryを動作させることができません

答えて

関連する問題