JQuery EasyUI彈出對話框解決Asp.net伺服器控件無法執行背景代碼的方法

    <script language="javascript">

        $(function(){

            var dlg = jQuery("#dd").dialog({

                draggable: true,

                resizable: true,

                closed:true,

                show: 'Transfer',

                hide: 'Transfer',

                autoOpen: false,

                width:600,

                minHeight: 10,

                minwidth: 10

            });

        });

        function open1(){

            $('#dd').dialog('open');

        }

        function close1(){

            $('#dd').dialog('close');

    </script>

對應的彈出層内容如下所示：

        <div id="dd" title="處理流程" icon="icon-save" style="overflow:auto;padding:10px;">

        <table width="100%" cellpadding="0" cellspacing="1" border="0" id="Table1">

            <tr>

                <td >

                    <asp:DataGrid ID="dg" runat="server" Width="100%" CssClass="dg" AutoGenerateColumns="False"

                PageSize="20" AllowSorting="True" DataKeyField="ID" Height="0px" OnItemDataBound="dg_ItemDataBound">

                <EditItemStyle CssClass="EditItem"></EditItemStyle>

                <AlternatingItemStyle CssClass="AlternatingItem"></AlternatingItemStyle>

                <ItemStyle CssClass="Item"></ItemStyle>

                <HeaderStyle CssClass="Header"></HeaderStyle>

                <FooterStyle CssClass="Footer"></FooterStyle>

                <Columns>

                    <asp:TemplateColumn HeaderText="ID" Visible="false">

                        <ItemTemplate>

                            <asp:Label ID="lblId" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.id") %>'></asp:Label>

                        </ItemTemplate>

                    </asp:TemplateColumn>

                    <asp:TemplateColumn HeaderText="序号">

                            <asp:Label ID="lblOrderbyId" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.OrderbyId") %>'></asp:Label>

                    <asp:TemplateColumn HeaderText="處理類型">

                            <asp:Label ID="lblproctype" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.proctype") %>'></asp:Label>

                    <asp:TemplateColumn HeaderText="流程名稱">

                            <asp:Label ID="lblflowname" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.flowname") %>'></asp:Label>

                    <asp:TemplateColumn HeaderText="流程處理人">

                            <asp:Label ID="lblproc_user" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.procuser") %>'></asp:Label>

                            <asp:DropDownList ID="ddlproc_user" runat="server" Visible="false" />

                    <asp:TemplateColumn HeaderText="流程步驟描述">

                            <asp:Label ID="lblmayaddflow" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.flownote") %>'></asp:Label>

                </Columns>

            </asp:DataGrid>

                </td>

            </tr>

        </table>

        <table class="formitem_pagestyle" cellspacing="0" cellpadding="0" border="0" style="width: 100%;

            border-collapse: collapse;">

                <td class="pagebutton" align="right" style="height: 30px; width: 100%;">

                    <asp:ImageButton ID="imgbtnOK" runat="server" ImageUrl="~/Themes/Default/btn_savetobox.gif"

                        OnClick="imgbtnOK_Click" /> 

                    <img src="http://www.cnblogs.com/Themes/Default/btn_close.gif" border="0" onclick="close1()"/>

        </div>  

        <br /><br />

        <div align="center">   

            <img src="http://www.cnblogs.com/Themes/Default/btn_savetobox.gif" border="0" onclick="open1()"/>

            <asp:ImageButton ID="imgbtnBack" runat="server" ImageUrl="~/Themes/Default/btn_back.gif"

                        CausesValidation="false" OnClick="imgbtnBack_Click" />

         </div>   

搜尋相關問題發現，其中主要問題是出在：JQuery會把Dialog的元素append到Body裡面，而不是form裡面。研究了頁面源碼後發現，jQuery UI Dialog控件初始化時動态生成的HTML元素被添加到頁面的尾部、form元素的後面，而原始的Dialog模闆部分（其内包含表單元素）也被移到了 動态生成的HTML元素内。也就是說，原先在form内的表單在Dialog初始化後就被移到form外了，這就導緻了Dialog模闆内表單全部失效。

解決方法是增加一行代碼即可：dlg.parent().appendTo(jQuery("form:first")); 

也就是修改開始部分建立對話框的腳本即可：

            dlg.parent().appendTo(jQuery("form:first"));

    </script> 

 另外你也可以通過這種方法來處理該問題：

     $('#dialog_link').click(function () { 

       $('#dialog').dialog('open');

        $('#dialog').parent().appendTo($("form:first"))

        return false;

    });