JQuery EasyUI彈出對話框解決Asp.net服務器控件沒法執行後臺代碼的方法(轉)

原文:JQuery EasyUI彈出對話框解決Asp.net服務器控件沒法執行後臺代碼的方法javascript

 

jquery-easyui是一個基於jquery的圖形界面插件,利用easyui能夠建立不少好看的網頁界面效果,easyui的相關地址是:http://jquery-easyui.wikidot.com/; easyui的中文文檔地址是:http://www.easyui.net/,本人也利用easeyUI在作一些頁面效果。因爲我很喜歡那種彈出的對話框界面,所以在界面中應用了Dialog類來處理一些確認的信息,但在利用中發現,彈出的對話框,不能再繼續執行asp.net按鈕的後臺響應代碼。界面以下所示。

操做是在按鈕提交後,彈出一個對話框層,用來確認流程的信息,不過奇怪的是裏面本來是asp.net圖片服務器控件卻不能提交了,沒法觸發後臺按鈕,其中頁面的代碼以下所示,注意若是要對話框默認開始不顯示出來,經過設置closed:true,屬性便可。
複製代碼
    <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>
複製代碼

對應的彈出層內容以下所示:html

複製代碼
        <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="序號">
                        <ItemTemplate>
                            <asp:Label ID="lblOrderbyId" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.OrderbyId") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn HeaderText="處理類型">
                        <ItemTemplate>
                            <asp:Label ID="lblproctype" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.proctype") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn HeaderText="流程名稱">
                        <ItemTemplate>
                            <asp:Label ID="lblflowname" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.flowname") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn HeaderText="流程處理人">
                        <ItemTemplate>
                            <asp:Label ID="lblproc_user" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.procuser") %>'></asp:Label>
                            <asp:DropDownList ID="ddlproc_user" runat="server" Visible="false" />
                        </ItemTemplate>
                    </asp:TemplateColumn>
                    <asp:TemplateColumn HeaderText="流程步驟描述">
                        <ItemTemplate>
                            <asp:Label ID="lblmayaddflow" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.flownote") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateColumn>
                </Columns>
            </asp:DataGrid>
                </td>
            </tr>
        </table>
                    
        <table class="formitem_pagestyle" cellspacing="0" cellpadding="0" border="0" style="width: 100%;
            border-collapse: collapse;">
            <tr>
                <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" />&nbsp;
                    <img src="http://www.cnblogs.com/Themes/Default/btn_close.gif" border="0" onclick="close1()"/>
                </td>
            </tr>
        </table>
        </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>   java

複製代碼

  

搜索相關問題發現,其中主要問題是出在:JQuery會把Dialog的元素append到Body裏面,而不是form裏面。研究了頁面源碼後發 現,jQuery UI Dialog控件初始化時動態生成的HTML元素被添加到頁面的尾部、form元素的後面,而原始的Dialog模板部分(其內包含表單元素)也被移到了 動態生成的HTML元素內。也就是說,原先在form內的表單在Dialog初始化後就被移到form外了,這就致使了Dialog模板內表單所有失效。jquery

解決方法是增長一行代碼便可:dlg.parent().appendTo(jQuery("form:first")); 服務器

也就是修改開始部分建立對話框的腳本便可:app

複製代碼
    <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
            });
             dlg.parent().appendTo(jQuery( " form:first " ));
        });

        function open1(){
            $('#dd').dialog('open');
        }
        function close1(){
            $('#dd').dialog('close');
        }
    </script> 
複製代碼

 

 另外你也能夠經過這種方法來處理該問題:asp.net

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

       $('#dialog').dialog('open');
        $('#dialog').parent().appendTo($("form:first"))
        return false;ide

    });post

上述的解決問題詳細能夠參考老外的一篇問題回覆文章:JQuery UI Dialog with Asp .NET button postback..ui

相關文章
相關標籤/搜索