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

Question

My Application:

I have a ASP.NET Application with two parts. First part is the "Absence" Part and the second part is "Signature". This Application create this parts Automatic. For Absence the User must input the Enddate from this absence and a representative. The TextBox for the representative have a AutoComplete that get Data from the Active Directory. And with a Image on the right side of the textbox, the user can search a representative in a Modal popup from jQuery. The Popup has one textbox and a imagebutton with a magnifying glass Symbol. Now I want that if I click on this Symbol I get all found representative in a ListView in the PopUpBox with a fixed Width and Height.

My Problem:

My PopUp open and I can set my Controls in the div block for this popupdialog. I have create a Event for my ImageButton and generate the Code for this but if I click on the Button (in the popupdialog) the Code don't work. It doesn't jump in the Button_click Method :(

My Question:

How I can use the Controls in my popupdialog with jquery and asp.net?

Here my Code:

ASPX: (jquery code)

<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: (my popupdialogbox div code)

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

            }


        }

Here is a Picture from my Application :

Sourcecode in IE for my TestApplication that works!

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

Sourcecode for my main Application that don't work!

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

Why is here a onclick with a dopostback Oo?

Answer 1

jQuery modals are created by cloning the DOM elements and placing them at the of the body tag. This create valid DOM elements and it works fine on the client side.

However for asp.net controls to send events, they must be inside the form tag(asp.net creates only one form tag).

The solution is to create the dialog and then place the elements back into the form tag.

    $(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;
        });          
    }); 

Your server events should now fire perfectly after that.

Answer 2

Use JavaScript like this:

(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'
    });
})();

Add the extra prependTo: 'form' for form submission.