동적 ASP를 찾을 수 없습니다 : JQuery를 사용하여 Gridview 내부 제어

Question

ASP.Net 응용 프로그램에서 내부에 Gridview가있는 업데이트 패널이있는 aspx 파일이 있습니다. Gridview 내부에는 또한 일부 패널이 포함 된 테이블이 있습니다. 이 패널 안에는 몇 가지 컨트롤이 있습니다.

ASPX

<asp:Gridview ID="GridView1" runat = "server"...> 
<Columns> 
    <asp:TemplateField ShowHeader="False"> 
    <ItemTemplate> 
    <table> 
     <asp:Panel ID="pnlVisualAst" runat="server" Visible="false"> 
       <tr> 
       <td style="text-indent: 50px; width: 25%"> 
        <asp:Label ID="lblVisAst" runat="server" Text="Visual Assitance"></asp:Label> 
       </td> 
       <td colspan="3"> 
        <asp:Button ID="btnVisAst" class="button" runat="server" Text="View"/> 
        <asp:Image ID="popImg" ImageUrl='<%# GetImage(Eval("VA_Img"))%>' runat="server" Visible="false" /> 
       </td> 
       </tr> 
     </asp:Panel> 
    </table> 
    </ItemTemplate> 
    </asp:TemplateField > 
</Columns> 
</asp:Gridview> 

지금, 나는이 GRIDVIEW 내부 버튼의 클릭 이벤트를 캡처하고 팝업 창에서 이미지 필드를 표시 할 JQuery와 함수를 쓰고 있어요.

JQuery와

<script type="text/javascript"> 

    $(document).on('ready', function() 
    { 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_endRequest(function() 
     { 
      $('#<%=GridView1.ClientID%>').find($('#<%= btnVisAst.ClientID %>')).click(function() 
      { 
       $('#<%=popImg.ClientID%>').dialog 
        ({ 
         title: "my jquery popup", 
         width: 430, 
         height: 200, 
         modal: true, 
         button: 
          { 
           Close: 
           function() 
           { 
            $(this).dialog('Close'); 
           } 
          } 
        }); 
       $(this).prop('checked', true); 

      }); 
     }); 

    }); 

상기 코드 문제는 그 내부 GRIDVIEW 동적 제어를 찾을 수있다. 'btnVisAst'및 'popImg'가 현재 컨텍스트에 존재하지 않음을 보여줍니다.

이 문제를 해결할 수있는 방법이 있습니까? 감사합니다. .

Answer 1

나는 ConnorsFan에 동의합니다. 클래스를 대신 사용하십시오. 당신이 당신의 방문을 버튼에 클래스를 적용하면, 당신은 같은 것을 할 수있다 "classVisAst을"말 :

$('.classVisAst').click(function() 
     { 
      var newDialog = $(this).siblings("img").dialog 
       ({ 
        title: "my jquery popup", 
        width: 430, 
        height: 200, 
        modal: true, 
        button: 
         { 
          Close: 
          function() 
          { 
           $(this).dialog('Close'); 
          } 
         } 
       }); 
      $(newDialog).dialog('open'); 

      $(this).prop('checked', true); 

     }); 

그런 다음 당신이 모든이 상대적 모든 때문에 ID를 걱정 아닙니다.

Answer 2

버튼을 검색하는 대신 기능을 할당합니다.

<asp:Gridview ID="GridView1" runat = "server"...> 
<Columns> 
    <asp:TemplateField ShowHeader="False"> 
    <ItemTemplate> 
     <asp:Panel ID="pnlVisualAst" runat="server" Visible="false"> 
    <table><%--put table inside panel else you will have empty table element --%> 
       <tr> 
       <td style="text-indent: 50px; width: 25%"> 
        <asp:Label ID="lblVisAst" runat="server" Text="Visual Assitance"></asp:Label> 
       </td> 
       <td colspan="3"> 
        <asp:Button ID="btnVisAst" OnClientClick="return doSomething(this)" class="button" runat="server" Text="View"/> 
        <asp:Image ID="popImg" ImageUrl='<%# GetImage(Eval("VA_Img"))%>' runat="server" Visible="false" /> 
       </td> 
       </tr> 
    </table> 
     </asp:Panel> 
    </ItemTemplate> 
    </asp:TemplateField > 
</Columns> 
</asp:Gridview> 

자바 스크립트 :

function doSomething(elem){//elem == input[type=submit] 
    $('#'+ elem.id.replace('btnVisAst','popImg')).dialog 
     ({ 
      title: "my jquery popup", 
      width: 430, 
      height: 200, 
      modal: true, 
      button: 
       { 
        Close: 
        function() 
        { 
         $(this).dialog('Close'); 
        } 
       } 
     }); 
    $(elem).prop('checked', true); 
    return false; 
}