Ajax

开发平台：
Java

GridViewDrillDownjQueryAjax.aspx：源码内容
							<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewDrillDownjQueryAjax.aspx.cs" Inherits="GridViewDrillDownjQueryAjax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JQuery Demo</title>
    <link type="text/css" rel="Stylesheet" href="Assets/css/dialog.css" />
    <link type="text/css" rel="Stylesheet" href="Assets/css/pager.css" />
    <link type="text/css" rel="Stylesheet" href="Assets/css/grid.css" />
    <link type="text/css" rel="Stylesheet" href="Assets/css/subgrid.css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" >
            <Scripts>
                <asp:ScriptReference Path="~/scripts/jquery-1.2.3.min.js" ScriptMode="Release" />
            </Scripts>
        </asp:ScriptManager>
        <asp:SqlDataSource ID="sqlDsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind %>"
            SelectCommand="SELECT [Customers].[CustomerID], [Customers].[CompanyName], COUNT([OrderID]) TotalOrders&#13;&#10;FROM [Customers] INNER JOIN [Orders] ON [Customers].[CustomerID]=[Orders].[CustomerID]&#13;&#10;Group By [Customers].[CustomerID], [Customers].[CompanyName]">
        </asp:SqlDataSource>
        <div id="dlg" class="dialog" style="width: 700px">
            <div class="header" style="cursor: default">
                <div class="outer">
                    <div class="inner">
                        <div class="content">
                            <h2>
                                Northwind: Orders By Customer</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="outer">
                    <div class="inner">
                        <div class="content">
                            <asp:Panel CssClass="grid" ID="pnlCust" runat="server">
                                <asp:UpdateProgress AssociatedUpdatePanelID="pnlUpdate" runat="server" >
                                    <ProgressTemplate>
                                        <img alt="loadting" src="Assets/img/progress-indicator.gif"  />    
                                    </ProgressTemplate>
                                </asp:UpdateProgress>
                                <asp:UpdatePanel ID="pnlUpdate" runat="server">
                                    <ContentTemplate>
                                        <asp:GridView Width="100%" AllowPaging="True" ID="gvCustomers" AutoGenerateColumns="False"
                                            DataSourceID="sqlDsCustomers" runat="server" ShowHeader="False">
                                            <Columns>
                                                <asp:TemplateField>
                                                    <ItemTemplate>
                                                        <div class="group" style="display:inline" id='<%#String.Format("customer{0}",Container.DataItemIndex) %>' 
                                                            onclick='showhide(<%#String.Format(""#customer{0}"",Container.DataItemIndex) %>,
                                                                              <%#String.Format(""#order{0}"",Container.DataItemIndex) %>,
                                                                              <%#String.Format(""{0}"",Eval("CustomerID")) %>)'>
                                                            <asp:Image ID="imgCollapsible" CssClass="first" ImageUrl="~/Assets/img/plus.png"
                                                                Style="margin-right: 5px;" runat="server" /><span class="header">
                                                                    <%#Eval("CustomerID")%>:
                                                                    <%#Eval("CompanyName")%>(<%#Eval("TotalOrders")%> Orders) </span>
                                                        </div>                                                        
                                                        <div id='<%#String.Format("order{0}",Container.DataItemIndex) %>' class="order"></div>
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                        </asp:GridView>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </asp:Panel>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="outer">
                    <div class="inner">
                        <div class="content">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="progress" style="position:absolute;visibility:hidden;display:inline">
            <img alt="loadting" src="Assets/img/ajaxloading.gif"/>
        </div>
        
        <script type="text/javascript">
            //master: id of div element that contains the information about master data
            //details: id of div element wrapping the details grid
            //customerId: id of the customer to be send as parameter to web method
            function showhide(master,detail,customerId)
            { 
                //First child of master div is the image
                var src = $(master).children()[0].src;
                //Switch image from (+) to (-) or vice versa.
                if(src.endsWith("plus.png"))
                    src = src.replace('plus.png','minus.png');
                else
                    src = src.replace('minus.png','plus.png');
                //if the detail DIV is empty Initiate AJAX Call, if not that means DIV already populated with data             
                if($(detail).html() == "")
                {
                    //Prepare Progress Image
                    var $offset = $(master).offset();
                    $('#progress').css('visibility','visible');
                    $('#progress').css('top',$offset.top);
                    $('#progress').css('left',$offset.left+$(master).width());                    
                    //Prepare Parameters
                    var params = '{customerId:"'+ customerId +'"}';                    
                    //Issue AJAX Call
                    $.ajax({
                            type: "POST", //POST
                            url: "GridViewDrillDownjQueryAjax.aspx/GetOrders", //Set call to Page Method
                            data: params, // Set Method Params
                            beforeSend: function(xhr) {
                                xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");},
                            contentType: "application/json; charset=utf-8", //Set Content-Type
                            dataType: "json", // Set return Data Type
                            success: function(msg, status) {
                                $('#progress').css('visibility','hidden');
                                $(master).children()[0].src = src;
                                $(detail).html(msg);
                                $(detail).slideToggle("normal"); // Succes Callback
                                },
                            error: function(xhr,msg,e){
                                alert(msg);//Error Callback
                                }
                            });
                }
                else
                {
                    //Toggle expand/collapse                   
                    $(detail).slideToggle("normal");
                    $(master).children()[0].src = src;
                }
            }
        </script>
    </form>
</body>
</html>

						