2017-06-07 13 views
0

WebフォームのマスターページでJQueryを使用して、WebフォームのコンテンツページにあるAjax Control ToolkitアコーディオンペインにあるHTMLテキスト入力コントロールの値にアクセスするにはどうすればよいですか?JQueryを使用してコントロールにアクセスする際に問題が発生する

私はSite.Masterと呼ばれるマスターページを持ち、コンテンツページはMainContentというプレースホルダーに入っています。いくつかのビジュアル:

Site.Master:ここ

<body> 
    <form runat="server"> 
    <asp:ScriptManager runat="server"> 
     <scripts>...</scripts> 
    </asp:ScriptManager> 

    <div class="container body-content"> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
    </asp:ContentPlaceHolder> 
... 

は私のアコーディオンです(コンテンツページ(Default.aspxの)に住んでいる、コンテンツページは、上記MainContentのプレースホルダに住んでいる)

ここ
<ajaxToolkit:Accordion 
    ID="Accordion1" 
    runat="server" 
    HeaderCssClass="accordionHeader" 
    HeaderSelectedCssClass="accordionHeaderSelected" 
    max-height="300px" 
    ContentCssClass="accordionContent" 
    AutoSize="None" 
    FadeTransitions="true" 
    TransitionDuration="250" 
    FramesPerSecond="40" 
    EnableViewState="true" 
    RequireOpenedPane="false" 
    SuppressHeaderPostbacks="true"> 
    <Panes> 
... 
     <ajaxToolkit:AccordionPane 
      ID="AccordionPane1" 
      runat="server"> 
      <Header> 
       Use a list 
      </Header> 
      <Content> 
       <asp:UpdatePanel ID="UpdatePanel3" runat="server"> 
        <ContentTemplate> 
         <div class="row"> 
          <div class="col-lg-6"> 
           <div class="file-upload-container"> 
            <div class="input-group"> 
             ... 
             <input 
              class="form-control" 
              id="Text03" 
              placeholder="Browse or enter a file" 
              runat="server" 
              style="border: none" 
              type="text" /> 
            </div> 
            ... 
           </div> 
          </div> 
         </div> 
        </ContentTemplate> 
       </asp:UpdatePanel> 
      </Content> 
     </ajaxToolkit:AccordionPane> 
    </Panes> 
</ajaxToolkit:Accordion> 

適切なHTMLのテキスト入力にHTMLファイルの入力やコピー、それをテキスト結果を取り、私のjQueryの(Text03、ありますBOVE)

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#file-upload-button").change(function() { 
      var fileName = $(this).val().split("\\").pop(); 
      var txtBoxID= <%# MainContent.FindControl("Text2").ClientID %>; 
      $(txtBoxID).val(fileName); 
     }); 
     $("#file-upload-button2").change(function() { 
      var fileName = $(this).val().split("\\").pop(); 
      var txtBoxID= <%# MainContent.FindControl("Text03").ClientID %>; 
      $(txtBoxID).val(fileName); 
     }); 
     ... 
    }); 
</script> 

それだけで "テキスト2" 機能と正常に動作します。

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object. 

Source Error: 


Line 28:    $("#file-upload-button2").change(function() { 
Line 29:     var fileName = $(this).val().split("\\").pop(); 
Line 30:     var txtBoxID= <%# MainContent.FindControl("Text03").ClientID %>; 
Line 31:     $(txtBoxID).val(fileName); 
Line 32:    }); 

私のコントロールは何とか既存のではない:?私は「Text03」機能を追加しようとする。しかし、それはライン30が強調表示された状態で、私は、このエラーが発生しますかバインディングの問題がありますか?何かアドバイスをいただければ幸いです。私は一日中ここで石を投げています。ありがとう!

答えて

1

ContentTemplateの内部にあるため、コードで直接参照することはできません。代わりにclass="form-control text03"のようにインジケータクラスとして追加し、代わりに$(".text03").val(fileName);で参照してください。

+0

ありがとう、それはトリックでした。ここで私が最後に何をしたのですか? '

関連する問題