Question

我的申请：

我有一个包含两个部分的ASP.NET应用程序。第一部分是“缺席”部分，第二部分是“签名”。此应用程序创建此部件自动。对于缺勤，用户必须输入此缺席的终止日期和代表。代表的TextBox具有从Active Directory获取数据的AutoComplete。通过文本框右侧的图像，用户可以在jQuery的模态弹出窗口中搜索代表。 Popup有一个文本框和一个带放大镜符号的图像按钮。现在我希望如果我点击这个符号，我会在PopUpBox的ListView中找到具有固定宽度和高度的所有代表。

我的问题：

我的PopUp打开，我可以在div块中为这个popupdialog设置我的控件。我已经为我的ImageButton创建了一个Event并为此生成了代码，但是如果我单击Button（在popupdialog中），则代码不起作用。它不会跳入Button_click方法:(

我的问题：

如何使用jquery和asp.net在popupdialog中使用控件？

这是我的代码：

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>

my C＃code for imageButton（pImageSearch）

 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)
            {

            }


        }

以下是我的应用程序中的图片：

enter image description here

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>

为什么这里有一个带有dopostback 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'。

我如何在ASP.NEt应用程序中使用来自jquery PopUpDialog的控件

2 个答案: