0

我的应用程序:

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

我的问题:

我的弹出窗口打开,我可以在这个弹出对话框的 div 块中设置我的控件。我已经为我的 ImageButton 创建了一个事件并为此生成了代码,但是如果我单击按钮(在弹出对话框中),代码将不起作用。它不会跳入 Button_click 方法:(

我的问题:

如何在我的弹出对话框中使用 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:(我的弹出对话框 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)
            {

            }


        }

这是我的应用程序中的图片:

在此处输入图像描述

我的 TestApplication 在 IE 中的源代码有效!

<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?

4

2 回答 2

1

jQuery modals 是通过克隆 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;
        });          
    }); 

之后,您的服务器事件现在应该会完美触发。

于 2012-09-19T07:07:05.970 回答
0

像这样使用 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'的表单提交。

于 2016-07-06T07:03:18.327 回答