如何使用jQuery的從該PopUpDialog，這個PopUpDialog控制在我ASP.NEt應用

Question

我的應用程序：

我有兩個部分一個ASP.NET應用程序。第一部分是「缺席」部分，第二部分是「簽名」。此應用程序創建此部分自動。對於缺席，用戶必須輸入此缺席的結束日期和代表。該代表的TextBox具有從Active Directory獲取數據的自動完成功能。通過在文本框右側的圖像，用戶可以從jQuery的模式彈出窗口中搜索代表。 Popup有一個文本框和一個帶放大鏡符號的圖像按鈕。現在我想要的是，如果我點擊這個符號，我會在具有固定寬度和高度的PopUpBox中的ListView中找到所有找到的代表。

我的問題：

我彈出開放，我可以在這個PopUpDialog，這個PopUpDialog在div塊把我的控制。我爲我的ImageButton創建了一個事件併爲此生成了代碼，但是如果我點擊按鈕（在popupdialog中）代碼不起作用。它不會在Button_click法:(跳

我的問題：？

我怎麼能在我的PopUpDialog，這個PopUpDialog使用控件與jQuery和asp.net

這裏我的代碼：

ASPX：（jQuery代碼）

<script type="text/javascript" language="javascript"> 

     $(document).ready(function() { 
      $("#dialogbox").dialog({ 
       autoOpen: false, 
       modal: true, 
       resizable: false, 
       buttons: { 
        "OK": function() { 
         $(this).dialog("close"); 
        }, 
        "Cancel": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 

      $("#imgVertreter").click(function() { 
       $("#dialogbox").dialog("open"); 
       return false; 
      }); 
     }); 

    </script> 

ASPX：（我popupdialogbox的div代碼）

<div id="dialogbox" title="Gesammte Vertreterliste"> 
     <asp:TextBox ID="pVertreter" runat="server"></asp:TextBox> 
     <asp:ImageButton ID="pImageSearch" runat="server" 
     ImageUrl="~/App_Theme/lupe.jpg" Height="23px" Width="24px" 
      onclick="pImageSearch_Click" /><br /> 
     <hr /> 
     <asp:ListView runat="server" ID="ListView"> 

      <LayoutTemplate> 
       <table id="UserTable" runat="server" border="0" width="100%" cellpadding="0" cellspacing="0"> 
        <tr style="background-color:#ccdaeb" class="tableClass"> 
         <th align="left" id="th4" runat="server"><asp:Label ID="lblName" runat="server" Text="Name, Vorname"></asp:Label></th> 
         <th align="left" id="th3" runat="server"><asp:Label ID="lblAbteilung" runat="server" Text="Abteilung"></asp:Label></th> 
        </tr> 
       </table> 
      </LayoutTemplate> 

      <ItemTemplate> 
       <tr> 
        <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblFullname" Text='<%# Eval("Name") %>' runat="server"></asp:LinkButton></td> 
        <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteil" Text='<%# Eval("Abteilung") %>' runat="server"></asp:LinkButton></td> 
       </tr> 
      </ItemTemplate> 

      <EmptyDataTemplate> 
       Es wurden keine Einträge gefunden 
      </EmptyDataTemplate> 

      <AlternatingItemTemplate> 
       <tr class="TableClass"> 
        <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblFullname" Text='<%# Eval("Name") %>' runat="server"></asp:LinkButton></td> 
        <td align="left"><asp:LinkButton CssClass="MyLink" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>' ID="lblAbteil" Text='<%# Eval("Abteilung") %>' runat="server"></asp:LinkButton></td> 
       </tr> 
      </AlternatingItemTemplate> 

     </asp:ListView> 

    </div> 

爲的ImageButton（pImageSearch）我的C＃代碼

protected void pImageSearch_Click(object sender, ImageClickEventArgs e) 
     { 
      try 
      { 
       UserService srv = new UserService(); 

       DataTable dt = srv.BenutzerFinden(Domain, pVertreter.Text); 
       DataView dv = new DataView(dt); 

       dv.Sort = "Nachname ASC"; 

       this.ListView.DataSource = dv; 
       this.ListView.DataBind(); 
      } 
      catch (Exception) 
      { 

      } 


     } 

這裏是我的應用程序圖片：

源代碼在IE中對我的TestApplication的作品！

<div id="dialog" title="Liste"> 
<input name="txtBox" type="text" value="rettet" id="txtBox" /> 
<input type="submit" name="btnEdit" value="übergeben" id="btnEdit" /> 
</div> 

我的主要應用程序的源代碼不工作！

<div id="dialogbox" title="Vertreterliste"> 
<input name="pVertreter" type="text" id="pVertreter" /> 
<input type="image" name="pImageSearch" id="pImageSearch" src="App_Theme/lupe.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;pImageSearch&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="height:23px;width:24px;" /><br /> 
<input type="submit" name="suchen" value="suchen" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;suchen&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="suchen" /> 
</div> 

爲什麼這裏是一個多點觸發Oo的onclick？

Answer 1

jQuery模態是通過克隆DOM元素並將它們放在body標籤中創建的。 這創建了有效的DOM元素，它在客戶端工作正常。

但是，對於asp.net控件發送事件，它們必須在窗體標籤內（asp.net只創建一個窗體標籤）。

解決方案是創建對話框，然後將元素放回到表單標記中。

$(document).ready(function() { 
     $("#dialogbox").dialog({ 
      autoOpen: false, 
      modal: true, 
      resizable: false, 
      buttons: { 
       "OK": function() { 
        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     $("#dialogbox").parent().appendTo($("form:first")); 

     $("#imgVertreter").click(function() { 
      $("#dialogbox").dialog("open"); 
      $("#dialogbox").parent().appendTo($("form:first")); 
      return false; 
     });   
    }); 

此後，您的服務器事件應該完全啓動。

Answer 2

使用JavaScript這樣的：

(function(){ 
    var popups = $('.js-popups'); 

    popups.magnificPopup({ 
     type:'inline', 
     midClick: true, 
     preloader: true, 
     fixedContentPos: false, 
     closeMarkup: '<span class="popup-close-ic mfp-close"></span>', 
     removalDelay: 300, 
     appendTo: 'form', 
     prependTo: 'form' 
    }); 
})(); 

添加額外prependTo: 'form'表單提交。