讀取條至中

2008-03-20

3908
0
AJAX

讀取條至中

讀取條至中的效果

001 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
002
003 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
004
005 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
006
007 <html xmlns="http://www.w3.org/1999/xhtml" >
008 <head runat="server">
009     <title>未命名頁面</title>
010     <link href="GridView.css" rel="stylesheet" type="text/css" />
011     <link href="Progress.css" rel="stylesheet" type="text/css" />
012 </head>
013 <body>
014     <form id="form1" runat="server">
015         <asp:ScriptManager ID="ScriptManager1" runat="server">
016         </asp:ScriptManager>
017          <script type="text/javascript">
018
019             function onUpdating(){
020                 // 取得Progress div
021                 var pnlPopup = $get('<%= me.pnlPopup.ClientID %>');
022
023                 // 取得gridview
024                 var gridView = $get('<%= me.gvCustomers.ClientID %>');
025
026                 // 設為隱藏
027                 pnlPopup.style.display = '';
028
029                 var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
030                 var pnlPopupBounds = Sys.UI.DomElement.getBounds(pnlPopup);
031
032                 //  至中於gridview
033                 var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(pnlPopupBounds.width / 2);
034                 var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(pnlPopupBounds.height / 2);
035
036                 //    設定progress的位置
037                 Sys.UI.DomElement.setLocation(pnlPopup, x, y);
038             }
039
040             function onUpdated() {
041                 // 取得progress div
042                 var pnlPopup = $get('<%= me.pnlPopup.ClientID %>');
043                 // 顯示
044                 pnlPopup.style.display = 'none';
045             }
046
047         </script>
048     <div>
049         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
050             DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" InsertCommand="INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued]) VALUES (@ProductName, @SupplierID, @CategoryID, @QuantityPerUnit, @UnitPrice, @UnitsInStock, @UnitsOnOrder, @ReorderLevel, @Discontinued)"
051             ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
052             SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued] FROM [Products]"
053             UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [SupplierID] = @SupplierID, [CategoryID] = @CategoryID, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [UnitsOnOrder] = @UnitsOnOrder, [ReorderLevel] = @ReorderLevel, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID">
054             <DeleteParameters>
055                 <asp:Parameter Name="ProductID" Type="Int32" />
056             </DeleteParameters>
057             <InsertParameters>
058                 <asp:Parameter Name="ProductName" Type="String" />
059                 <asp:Parameter Name="SupplierID" Type="Int32" />
060                 <asp:Parameter Name="CategoryID" Type="Int32" />
061                 <asp:Parameter Name="QuantityPerUnit" Type="String" />
062                 <asp:Parameter Name="UnitPrice" Type="Decimal" />
063                 <asp:Parameter Name="UnitsInStock" Type="Int16" />
064                 <asp:Parameter Name="UnitsOnOrder" Type="Int16" />
065                 <asp:Parameter Name="ReorderLevel" Type="Int16" />
066                 <asp:Parameter Name="Discontinued" Type="Boolean" />
067             </InsertParameters>
068             <UpdateParameters>
069                 <asp:Parameter Name="ProductName" Type="String" />
070                 <asp:Parameter Name="SupplierID" Type="Int32" />
071                 <asp:Parameter Name="CategoryID" Type="Int32" />
072                 <asp:Parameter Name="QuantityPerUnit" Type="String" />
073                 <asp:Parameter Name="UnitPrice" Type="Decimal" />
074                 <asp:Parameter Name="UnitsInStock" Type="Int16" />
075                 <asp:Parameter Name="UnitsOnOrder" Type="Int16" />
076                 <asp:Parameter Name="ReorderLevel" Type="Int16" />
077                 <asp:Parameter Name="Discontinued" Type="Boolean" />
078                 <asp:Parameter Name="ProductID" Type="Int32" />
079             </UpdateParameters>
080         </asp:SqlDataSource>
081         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
082             <ContentTemplate>
083         <asp:GridView ID="gvCustomers" CssClass="tablestyle"  runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" AllowSorting="true"
084             DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。" AllowPaging="True">
085             <AlternatingRowStyle CssClass="altrowstyle" />
086                         <HeaderStyle CssClass="headerstyle" />
087                         <RowStyle CssClass="rowstyle" />
088             <Columns>
089                 <asp:BoundField DataField="ProductID" HeaderText="ProductID" ReadOnly="True" SortExpression="ProductID" />
090                 <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
091                 <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
092                 <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
093                 <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
094                 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
095                 <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
096                 <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
097                 <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
098                 <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
099             </Columns>
100         </asp:GridView>
101             </ContentTemplate>
102         </asp:UpdatePanel>
103         <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1" runat="server">
104         <Animations>
105                     <OnUpdating>
106                         <Parallel duration="0">
107                             <%-- place the update progress div over the gridview control --%>
108                             <ScriptAction Script="onUpdating();" />
109                          </Parallel>
110                     </OnUpdating>
111                     <OnUpdated>
112                         <Parallel duration="0">
113                             <%--find the update progress div and place it over the gridview control--%>
114                             <ScriptAction Script="onUpdated();" />
115                         </Parallel>
116                     </OnUpdated>
117                 </Animations>
118         </cc1:UpdatePanelAnimationExtender>
119          <asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;">
120                 <div class="container">
121                     <div class="header">Loading, please wait...</div>
122                     <div class="body">
123                         <img src="img/activity.gif" />
124                     </div>
125                 </div>
126             </asp:Panel>
127     </div>
128     </form>
129 </body>
130 </html>

Partial Class _Default
03

Inherits System.Web.UI.Page
04

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
06

System.Threading.Thread.Sleep(3000)
07

End Sub
08

Protected Sub gvCustomers_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvCustomers.RowDataBound
10

Dim gridView As GridView = CType(sender, GridView)
11

If gridView.SortExpression.Length > 0 Then
12

Dim cellIndex As Integer = -1
13

For Each field As DataControlField In gridView.Columns
14

If field.SortExpression = gridView.SortExpression Then
15

cellIndex = gridView.Columns.IndexOf(field)
16

Exit For
17

End If
18

Next
19

If cellIndex > -1 Then
20

If e.Row.RowType = DataControlRowType.Header Then
21

e.Row.Cells(cellIndex).CssClass &= IIf(gridView.SortDirection = SortDirection.Ascending, " sortascheader", " sortdescheader")
22