利用AJAX來達到選擇DropDownList值時與GridView做即時更新

利用AJAX來達到選擇DropDownList值時與GridView做即時更新

這個範例是完全用設定的方法,就可以達到的方式,不用寫任何程式碼,很方便又好用

記得要先建立一個ASP.NET AJAX-Enabled Web Site,然後建立一個資料庫,就可以使用了

資料表:Tasks

欄位-型態:
TaskID-Int,TaskName-NVarchar(50),Complete-bit

.aspx

01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlGridview_CS.aspx.cs" Inherits="ddlGridview_CS" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06     <title>未命名頁面</title>
07 </head>
08 <body>
09     <form id="form1" runat="server">
10         <div>
11             <asp:ScriptManager ID="ScriptManager1" runat="server">
12             </asp:ScriptManager>
13             <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
14                 <asp:ListItem Selected="True" Value="False">Active</asp:ListItem>
15                 <asp:ListItem Value="True">Complete</asp:ListItem>
16             </asp:DropDownList>
17             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
18                 <contenttemplate>
19 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TaskID"
20 DataSourceID="SqlDataSource1" CellPadding="4" ForeColor="#333333" GridLines="None">
21 <Columns>
22 <asp:BoundField DataField="TaskID" HeaderText="TaskID" InsertVisible="False" ReadOnly="True"
23 SortExpression="TaskID" />
24 <asp:BoundField DataField="TaskName" HeaderText="TaskName" SortExpression="TaskName" />
25 <asp:CheckBoxField DataField="Complete" HeaderText="Complete" SortExpression="Complete" />
26 </Columns>
27 <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
28 <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
29 <EditRowStyle BackColor="#999999" />
30 <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
31 <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
32 <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
33 <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
34 </asp:GridView>
35 </contenttemplate>
36                 <triggers>
37 <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
38 </triggers>
39             </asp:UpdatePanel>
40             <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString %>"
41                 SelectCommand="SELECT * FROM [Tasks] where Complete = @IsComplete">
42                 <SelectParameters>
43                     <asp:ControlParameter ControlID="DropDownList1" Name="IsComplete" PropertyName="SelectedValue" />
44                 </SelectParameters>
45             </asp:SqlDataSource>
46         </div>
47     </form>
48 </body>
49 </html>
50