by WebSurfer
17. July 2011 14:29
GridView に表示するレコードを DropDownList を使って絞り込むサンプルです。
以前、実験室 SelectCommand の切り替え にも、2 つの DropDownList を使って GridView に表示されるレコードを絞り込むサンプルを書きましたが、それは SqlDataSource の SelectCommand（正確には SELECT クエリの WHERE 句）を書き換えていて、そのためのコードを書かなければならないのが面倒で、かつ、あまりスマートな方法とはいえません。
今回、ここに書いた方法は、WHERE 句は以下のように固定しておいて、DropDownList の SelectedValue プロパティの値によって全件抽出と条件抽出の両方に対応できるようにしたものです。
WHERE (@CustomerID='ALL' OR o.CustomerID=@CustomerID)
AND (@EmployeeID=0 OR e.EmployeeID=@EmployeeID)
上記で、@CustomerID='ALL' と @EmployeeID=0 が全件抽出の条件で、DropDownList.SelectedValue がそれぞれ "ALL" と "0" の時にその条件に一致させるようにします。
そのために、DropDownList の AppendDataBoundItems プロパティを true に設定した上で、全件抽出条件のための ListItem を追加します。なお、EmployeeID については、データ型が int なので、ListItem は以下のように設定しなければなりません。DropDownList.SelectedValue プロパティは string 型を返しますが、データベースプロバイダが型変換してくれます。
<asp:ListItem Value="0">ALL</asp:ListItem>
これによって C# のコードは一行も書かずに、すべてウィザードベースで作ることができます。上の画像の aspx ページのコードは以下の通りです。データベースには Northwind サンプルデータベースの Orders, Customers, Employees テーブルを使っています。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand=
"SELECT DISTINCT o.CustomerID, c.CompanyName
FROM Orders AS o
INNER JOIN Customers AS c
ON o.CustomerID = c.CustomerID">
</asp:SqlDataSource>
Customer:
<asp:DropDownList ID="DropDownList1"
runat="server"
AppendDataBoundItems="True"
DataSourceID="SqlDataSource1"
DataTextField="CompanyName"
DataValueField="CustomerID"
AutoPostBack="True">
<asp:ListItem>ALL</asp:ListItem>
</asp:DropDownList>
<br />
<asp:SqlDataSource ID="SqlDataSource2"
runat="server"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand=
"SELECT DISTINCT o.EmployeeID,
e.FirstName + ' ' + e.LastName AS Name
FROM Orders AS o
INNER JOIN Employees AS e
ON o.EmployeeID = e.EmployeeID">
</asp:SqlDataSource>
Employee:
<asp:DropDownList ID="DropDownList2"
runat="server"
AppendDataBoundItems="True"
DataSourceID="SqlDataSource2"
DataTextField="Name"
DataValueField="EmployeeID"
AutoPostBack="True">
<asp:ListItem Value="0">ALL</asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource3"
runat="server"
ConnectionString="<%$ ConnectionStrings:Northwind %>"
SelectCommand=
"SELECT o.OrderID, c.CompanyName,
e.FirstName + ' ' + e.LastName AS Name,
o.ShippedDate, o.Freight
FROM Orders AS o
INNER JOIN Customers AS c
ON o.CustomerID = c.CustomerID
INNER JOIN Employees AS e
ON o.EmployeeID = e.EmployeeID
WHERE (@CustomerID='ALL' OR o.CustomerID=@CustomerID)
AND (@EmployeeID=0 OR e.EmployeeID=@EmployeeID)
ORDER BY o.OrderID">
<SelectParameters>
<asp:ControlParameter ControlID="DropDownList1"
Name="CustomerID"
PropertyName="SelectedValue" />
<asp:ControlParameter ControlID="DropDownList2"
Name="EmployeeID"
PropertyName="SelectedValue" />
</SelectParameters>
</asp:SqlDataSource>
<asp:GridView ID="GridView1"
runat="server"
AllowPaging="True"
AutoGenerateColumns="False"
DataKeyNames="OrderID"
DataSourceID="SqlDataSource3">
<Columns>
<asp:BoundField
DataField="OrderID"
HeaderText="OrderID"
InsertVisible="False"
ReadOnly="True"
SortExpression="OrderID" />
<asp:BoundField
DataField="CompanyName"
HeaderText="Customer"
SortExpression="CompanyName" />
<asp:BoundField
DataField="Name"
HeaderText="Employee"
ReadOnly="True"
SortExpression="Name" />
<asp:BoundField
DataField="ShippedDate"
HeaderText="Shipped Date"
SortExpression="ShippedDate"
DataFormatString="{0:yyyy/M/d}" >
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField
DataField="Freight"
HeaderText="Freight"
SortExpression="Freight"
DataFormatString="${0:N2}" >
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>