DataGridに絞込み機能を追加したサンプル

図 DataGridに絞込み機能を追加したサンプル

このサンプルは、親ウィンドウのDataGridに表示されているレコードを絞り込むことができます。DataGridに表示するレコードを絞り込むには、親ウィンドウから検索(フィルタ)ボタンをクリックします。検索ボタンをクリックすると、子ウィンドウが表示されます。

検索条件（フィルタ条件）は、得意先テーブルの得意先ID、得意先名、役職、都道府県のカラムに対して設定することができます。たとえば、都道府県に検索条件を設定するには、都道府県のドロップダウンリストから条件式（比較演算子）を選択します。ドロップダウンリストに表示される条件式は、カラムのデータ型により異なります。条件式からBetween、Not Betweenを選択したときは、範囲(開始値/終了値)を入力します。In、Not Inを選択したときは、「埼玉県,千葉県」のようにコンマで区切って入力します。Like、Not Likeを選択したときは、「%課長%」のようにワイルドカード（%）を使用します。文字型のカラムに条件式の値を入力するとき、値を引用符で囲む必要がありません。引用符は、システムが自動的に付加します。

検索条件から複数のカラムを選択したときは、ドロップダウンリストから論理演算子(OR/AND条件)を選択します。デフォルトでは、OR条件で検索します。OR条件のときは、いずれかの条件を満足したときにレコードが抽出されます。AND条件のときは、すべての条件を満足したときにレコードが抽出されます。

検索条件を選択したら、最後に[検索]ボタンをクリックすると、親ウィンドウのDataGridに検索結果が表示されます。検索条件をリセットするときは、[クリア]ボタンをクリックします。

表　比較演算子と使用可能なデータ型　（○：使用可能、X：使用不可）

比較演算子	文字型	数値型	使用例
Equal to	○	○	Ken='埼玉県', CustomerID=5
Less than	X	○	CustomerID < 5
Greater than	X	○	CustomerID > 5
Between	○	○	CustomerID Between 1 and 5
In	○	○	Ken In ('埼玉県','千葉県')
Is Null	○	○	Ken Is Null
Not Equal to	○	○	Not Ken='埼玉県', Not CustomerID=5
Not Less than	X	○	Not CustomerID < 5
Not Greater than	X	○	Not CustomerID > 5
Not Between	○	○	CustomerID Not Between 1 and 5
Not In	○	○	Ken Not In ('埼玉県','千葉県')
Is Not Null	○	○	Ken Is Not Null
Like	○	X	Ken Like '%県', ContactTitle Like '%長%'
Not Like	○	X	Ken Not Like '%県', ContactTitle Not Like '%長%'

◆プログラムPopupSearch.aspxのポイント

¶ポイント1　検索条件によってTextBoxの個数を変えるには

このサンプルでは、検索条件のDropDownListから選択した比較演算子によって1個、または2個のTextBoxを表示します。条件によって異なる個数のTextBoxを表示するにはPanelを使用すると便利です。Panel1には1個のTextBox、Panel2には2個のTextBoxを定義します。1個のTextBoxを表示するときは、Panel1のVisibleプロパティをTrueに設定します。2個のTextBoxを表示するときは、Panel2のVisibleプロパティをTrueに設定して切り替えます。

¶ポイント２　DropDownListに異なるアイテムを表示するには

このサンプルでは、得意先ID、都道府県などの条件式（比較演算子）をDropDownListに表示しています。条件式は、カラムのデータ型によって異なります。DropDownListに異なるアイテムを表示するには、DropDownListのDataSourceプロパティにデータ連結タグを記述します。データ連結タグからは、関数を呼び出してアイテムをバインドします。

<asp:DropDownList id="dropID" runat="server"
DataSource=<%# GetLogicalOperator("int") %> />

<asp:DropDownList id="dropKen" runat="server"
DataSource=<%# GetLogicalOperator("string") %> />

¶ポイント３　ページ間でデータを渡すには

このサンプルでは、子ウィンドウから選択した検索条件を親ウィンドウに渡すのに、TextBoxを経由しています。子ウィンドウから選択した検索条件を親ウィンドウのTextBoxに渡すには、JavaScriptで記述したコードをブラウザから実行させます。親ウィンドウのTextBoxが書き換えられると、WebページがポストバックされてDataGridに検索結果が表示されます。

TextBoxが書き換えられたときにWebページをポストバックさせるには、TextBoxにクライアント側で動作するonPropertyChangeイベントを登録します。このイベントでは、Page.GetPostBackEventReference()メソッドが生成したJavaScriptを実行させてWebページをポストバックします。

◆メインプログラムDataGridFiltering.aspxの解説(HTML編)

DataGridFiltering.aspxのプレゼンテーションコンテンツの部分について解説します。行150-156のImageButtonでは、検索ボタンを定義しています。行157-163のLabelとTextBoxでは、件数を表示しています。

図検索ボタンと件数を表示した例

行176-229では、DataGridを定義しています。このDataGridには、AutoGenerateColumnsプロパティにFalseを設定してカラムの自動生成機能を抑止しています。行190-228の<Columns>…</Columns>では、TemplateColumnとBoundColumnを定義しています。行191-202のTemplateColumnでは、ItemTemplateに<a>タグとLinkButtonを定義しています。<a>は、ブックマークとして使用します。LinkButtonは、レコードセレクターとして使用します。

行203-207のBoundColumnでは、得意先テーブルの得意先IDをバインドしています。後続するBoundColumnでは、得意先テーブルの得意先名、担当者名、役職、電話番号、都道府県をバインドしています。

図 DataGridに得意先テーブルを表示した例

行238-243では、メッセージを表示するTextBoxを定義しています。このTextBoxのReadOnlyプロパティには、Trueを設定して読み込み専用にしています。

行248-251では、Buttonを定義しています。このButtonのVisibleプロパティには、Falseを設定して非可視状態にしています。このButtonには、OnClickイベントが登録されています。OnClickイベントは、子ウィンドウから親ウィンドウをポストバックさせたときに実行されます。

リスト DataGridFiltering.aspxのソースコード(HTML編)

131: <html>
137: <body>
146: <form id="frmMain" runat="server">
150: <asp:ImageButton id="ibtnSearch" runat="server"
151:    CommandName="search"
152:    OnCommand="ibtnSearch_Command"
153:    ImageUrl="../img/search.gif"
156:    ImageAlign="Middle" />
157: <asp:Label id="lblRows" runat="server"
158:   Text="件数"
159:    CssClass="rowNumber" />
160: <asp:TextBox id="txtRows" runat="server"
162:    Columns="3"
163:   ReadOnly="True" />
176: <asp:DataGrid id="dgrdCustomers" runat="server"
177:    AutoGenerateColumns="False"

178:    OnItemCommand="dgrdCustomers_ItemCommand"
179:    OnItemDataBound="dgrdCustomers_ItemDataBound" :::
185:    EnableViewState="True">
190:   <Columns>
191:      <asp:TemplateColumn
192:        HeaderText="<div class='dgrdHeaderBox'>1</div>">
193:        <ItemTemplate>
194:          <a name='#<%# GetBookMarkID() %>'></a>
195:          <asp:LinkButton id="lbtnSelect" runat="server"
196:            CommandName="Select"
197:            Text="<div class='dgrdItemArrow'>4</div>"
198:            Visible="True" />
199:        </ItemTemplate>
202:      </asp:TemplateColumn>
203:      <asp:BoundColumn

204:        DataField="CustomerID"
205:        HeaderText="<div class='dgrdHeader'>ID</div>">
207:      </asp:BoundColumn>
           ・・・

228:    </Columns>
229: </asp:DataGrid>
238: <asp:TextBox id="txtMessage" runat="server"
242:   Visible="True"
243:   ReadOnly="True" />
248: <asp:Button id="btnRefresh" runat="server"
250:   Visible="False"
251:   OnClick="btnRefresh_Click" />
252: </form>
253: </body>
253: </html>

◆メインプログラムDataGridFiltering.aspxの解説(コード編)

DataGridFiltering.aspxは、子ウィンドウから検索条件を取得してDataGridに検索結果を表示します。子ウィンドウから選択した検索条件は、TextBoxを経由して親ウィンドウに渡します

Sub Page_Load()イベントの処理

このイベントは、DataGridFiltering.aspxがロードされたときに実行されます。このイベントでは、クライアント側で動作するイベントの登録と、DataGridに得意先テーブルをバインドします。

行9では、メッセージを表示するTextBoxにクライアント側で動作する、onPropertyChangeイベントを登録しています。onPropertyChangeイベントでは、Webページをポストバックします。GetPostBackEventReference()メソッドは、WebページをポストバックするJavaScriptを生成します。Webページがポストバックされると、btnRefreshイベントが実行されます。

行10-12のIf…End Ifでは、ページが最初にロードされたか調べています。ページが最初にロードされたときは、BindDataGrid()を呼び出してDataGridに得意先テーブルをバインドします。

8: Sub Page_Load()
9:   txtMessage.Attributes.Add("OnPropertyChange", GetPostBackEventReference(btnRefresh))
10:   If Not IsPostBack Then
11:     BindDataGrid()
12:   End If
13: End Sub

Sub dgrdCustomers_ItemDataBound()イベントの処理

このイベントは、DataGridのDataBind()メソッドが実行されたときに発生します。このイベントでは、DataGridのアイテム(DataGridItem)にクライアント側で動作するonClickイベントを登録します。これにより、DataGridの任意のセルをクリックして行を選択できるようになります

47: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
48:   Dim lit As ListItemType = e.Item.ItemType
49:
50:   If lit = ListItemType.Item OrElse _
51:     lit = ListItemType.AlternatingItem OrElse _
52:     lit = ListItemType.SelectedItem Then
53:     Dim lbtn As LinkButton = CType(e.Item.FindControl("lbtnSelect"), LinkButton)
54:     e.Item.Attributes("onClick") = GetPostBackClientHyperlink(lbtn, "")
55:     e.Item.Style("cursor") = "hand"
56:   End If
57: End Sub

Sub dgrdCustomers_ItemCommand()イベントの処理

このイベントは、DataGridから行を選択したときに発生します。このイベントでは、InsertBookmarkScript()を呼び出してクライアント側で動作するJavaScriptを登録します。InsertBookmarkScriptの引数には、DataGridから選択したアイテムのインデックス番号を指定します。

59: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
60:   If e.CommandName = "Select" Then
61:     InsertBookmarkScript(e.Item.ItemIndex)
62:   End If
63: End Sub

Sub ibtnSearch_Command()イベントの処理

このイベントは、Webページから検索ボタンをクリックしたときに発生します。このイベントでは、InsertScriptBlock()を呼び出して、子ウィンドウを開きます。

65: Sub ibtnSearch_Command(s As Object, e As CommandEventArgs)
66: InsertScriptBlock()
67: End Sub

Sub btnRefresh_Click()イベントの処理

このイベントは、クライアント側からメッセージを表示するTextBoxを書き換えたときに発生します。このサンプルでは、子ウィンドウから親ウィンドウのTextBoxにメッセージを設定して書き換えます。つまり、子ウィンドウから親ウィンドウをポストバックさせています。btnRefresh_Clickイベントでは、DataGridに検索結果を表示します。

行17では、TextBoxに格納されている検索条件を取得しています。行19-26では、検索条件の有無を調べています。検索条件がないときは、SELECTステートメントにWHERE句を追加しません。

SELECT * From Customers

検索条件があるときは、SELECTステートメントにWHERE句を追加します。

SELECT * From Customers Where Criteria

行22-24のIf…EndIfでは、検索条件にティルダ(～)が含まれているか調べています。ティルダが含まれているときは、ティルダを引用符に置換します。

行29では、CreateDataSet()関数を呼び出して得意先テーブルのDataSetを作成します。CreateDataSetの引数には、SQLのSELECTステートメントを指定します。

行34-39のWith…End Withでは、DataGridに得意先テーブルのDataViewをバインドしています。

行40では、TextBoxに得意先テーブルのレコード件数を設定しています。レコード件数は、DataTableのRowsコレクションのCountプロパティから取得します。

15: Sub btnRefresh_Click(s As Object, e As EventArgs)
16:   Dim strSQL As String = "Select * From Customers"
17:   Dim strCriteria As String = txtMessage.Text.Trim()
18:
19:   If strCriteria = String.Empty Then
20:     ' strSQL = "Select * From Customers"
21:   Else
22:     If strCriteria.IndexOf("~") <> -1 Then
23:       strCriteria = strCriteria.Replace("~", "'")
24:     End If
25:     strSQL &= " Where " & strCriteria
26:   End If
27: txtMessage.Text = strCriteria
28:
29:   Dim ds AS DataSet = CreateDataSet(strSQL)
30:   If ds Is Nothing Then
31:     txtRows.Text = String.Empty
32:     Exit Sub
33:   End If
34:   With dgrdCustomers
35:     .DataSource = ds.Tables(0).DefaultView()
36:     .DataKeyField = "CustomerID"
37:     .DataBind()
38:     .SelectedIndex = -1
39:   End With
40:   txtRows.Text = ds.Tables(0).Rows.Count.ToString()
41: End Sub

Sub BindDataGrid()の処理

このサブプロシージャでは、DataGridに得意先テーブルをバインドして表示します。BindDataGridは、Page_Loadイベントから呼ばれます。

69: Sub BindDataGrid()
70:   Dim strSQL As String = "Select * From Customers"
71:   Dim ds AS DataSet = CreateDataSet(strSQL)
72:   With dgrdCustomers
73:     .DataSource = ds.Tables(0).DefaultView()
74:     .DataKeyField = "CustomerID"
75:     .DataBind()
76:     .SelectedIndex = -1
77:   End With
78:   txtRows.Text = ds.Tables(0).Rows.Count.ToString()
79: End Sub

Sub InsertScriptBlock()の処理

このサブプロシージャでは、子ウィンドウを開くJavaScriptを生成して登録します。InsertScriptBlockは、検索ボタンをクリックしたときに、ボタンのOnCommandイベントから呼ばれます。

行82-84では、JavaScriptのwindow.open()メソッドの引数に指定するオプションを生成しています。行86-90のWith…End Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。

</script>

JavaScriptのwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、url、target、featuresを指定します。urlには、新規ウィンドウに表示するファイルPopupSearch.aspxを指定します。

行91では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録します。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザから実行されます。

81: Sub InsertScriptBlock()
82:   Dim strFeatures As String = "height=200,width=470,left=10,top=10," & _
83:     "location=no,menubar=no,resizable=yes,scrollbars=no," & _
84:     "status=no,titlebar=yes,toolbar=no"
85:   Dim sbScript As New StringBuilder()
86:   With sbScript
87:     .Append("<script language='javascript'>" & vbCrLf)
88:     .Append(vbTab & "window.open('PopupSearch.aspx','_blank','" & strFeatures & "');" & vbCrLf)
89:     .Append("</" & "script>")
90:   End With
91:   RegisterClientScriptBlock("openWindow", sbScript.ToString)
92: End Sub

Sub InsertBookmarkScript()の処理

このサブプロシージャでは、DataGridから選択した行が自動的に画面に表示されるように位置情報を保持します。DataGridがページ内に収まらないときは、ウィンドウに垂直型のスクロールバーが表示されてスクロールできるようになっています。DataGridをスクロールした状態で、Webページがポストバックされるとカレントの位置情報が失われて常に先頭行から表示されます。このサブプロシージャでは、ブックマーク機能を応用してWebページがポストバックされたときの位置を自動的に保持します。

InsertBookmarkScriptは、DataGridのOnItemCommandイベントから呼ばれます。OnItemCommandイベントは、DataGridから行を選択したときに発生します。

行96-100のWith…End Withでは、StringBuilderのAppend()メソッドで、以下のようなJavaScriptを生成しています。

location.href='#999';

</script>

JavaScriptのlocation.href=では、hrefにブックマークID(#999)を設定してその位置に移動させます。このサンプルでは、DataGridの選択行のブックマークIDを設定して、その行に移動させます。つまり、選択した行が画面に表示されるようにしています。

行101では、Page.RegisterStartupScript()メソッドでJavaScriptを登録しています。RegisterStartupScriptで登録されたJavaScriptは、Webページの最後に挿入されます。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザから実行されます。

94: Sub InsertBookmarkScript(intBookMarkID As Integer)
95:   Dim sbScript As New StringBuilder()
96:   With sbScript
97:     .Append("<script language='javascript'>" & vbCrLf)
98:     .Append(vbTab & "location.href='#" & intBookMarkID.ToString() & "'" & vbCrLf)
99:     .Append("</" & "script>")
100:   End With
101:   RegisterStartupScript("bookMark", sbScript.ToString)
102: End Sub

Function GetBookMarkID()関数の処理

この関数は、ブックマークのIDを生成して返します。GetBookMarkIDは、DataGridのTemplateColumnがバインドされるときに呼ばれます。

191:       <asp:TemplateColumn>
193:         <ItemTemplate>
194:           <a name='#<%# GetBookMarkID() %>'></a>
199:         </ItemTemplate>
202:       </asp:TemplateColumn>

GetBookMarkIDは、0から始まるブックマークIDを生成して返します。

104: Function GetBookMarkID() As String
105:   Dim strBookMarkID As String = mintBookMarkID.ToString()
106:   mintBookMarkID += 1
107:   Return strBookMarkID
108: End Function

Function CreateDataSet()関数の処理

この関数は、データベースからレコードを抽出してDataSetを作成して返します。CreateDataSetは、BindDataGrid()とbtnRefresh_Click()から呼ばれます。CreateDataSetのの引数には、strSQLとstrConnectionStringを指定します。strSQLには、データベースからレコードを抽出するSELECTステートメントを指定します。strConnectionStringには、Web.Configに登録されている<add>タグのkeyを指定します。strConnectionStringを省略したときは、デフォルトとしてconStringAccNwを使用します。

<add key="conStringAccNw"

value="PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source=C:\WebMatrix\webdb\Nwind.mdb" />

119: Function CreateDataSet(strSQL As String, _
120:   Optional strConnectionString As String = "conStringAccNw") As DataSet
121:   Dim con As New OleDbConnection( _
122:     ConfigurationSettings.AppSettings(strConnectionString))
123:   Dim da As New OleDbDataAdapter(strSQL, con)
124:   Dim ds As New DataSet()
125:   da.Fill(ds)
126:   Return ds
127: End Function

リスト DataGridFiltering.aspxのソースコード(コード編)

1: <%@ Page language="vb" SmartNavigation="false" %>
2: <%@ Import Namespace="System.Data" %>
3: <%@ Import Namespace="System.Data.OleDb" %>
4:
5: <script language="vb" runat="server">
6: Private mintBookMarkID As Integer = 0
7:
8: Sub Page_Load()
13: End Sub
14:
15: Sub btnRefresh_Click(s As Object, e As EventArgs)
41: End Sub
42:
47: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
57: End Sub
58:
59: Sub dgrdCustomers_ItemCommand(s As Object, e As DataGridCommandEventArgs)
63: End Sub
64:
65: Sub ibtnSearch_Command(s As Object, e As CommandEventArgs)
67: End Sub
68:
69: Sub BindDataGrid()
79: End Sub
80:
81: Sub InsertScriptBlock()
92: End Sub
93:
94: Sub InsertBookmarkScript(intBookMarkID As Integer)
102: End Sub
103:
104: Function GetBookMarkID() As String
108: End Function
109:
119: Function CreateDataSet(strSQL As String, _
120: Optional strConnectionString As String = "conStringAccNw") As DataSet

127: End Function
129: </script>

◆サブプログラムPopupSearch.aspxの解説(HTML編)

子ウィンドウのWebフォームには、得意先ID、得意先名、役職、都道府県のDropDownListとTextBoxを作成しています。DropDownListからBetween、Not Betweenの条件式を選択したときは、範囲(開始値/終了値)を入力する2個のTextBoxを表示します。DroDownListからその他の条件式を選択したときは、1個のTextBoxを表示します。TextBoxを1個と2個のケースに切り替えるには、Panelを使用しています。

行294-317では、得意先IDのLabel、DropDownList、TextBoxを定義しています。TextBoxは、Panel内に1個のケースと2個のケースを定義しています。行294では、Labelで「ID」を表示します。行297-301では、DropDownListに条件式を表示します。行298では、DropDownListのAutoPostBackプロパティにTrueを設定してアイテムを選択したときにWebページをポストバックさせています。行299では、OnSelectedIndexChangedイベントを登録しています。このイベントは、DropDownListからアイテムを選択したときに発生します。行301では、DataSourceプロパティにデータ連結式を記述しています。GetLogicalOperator()関数の引数には、int/stringを指定します。intは、得意先テーブルのカラムが数値型のときに指定します。stringは、得意先テーブルのカラムが文字型のときに指定します。DropDownListには、得意先テーブルのデータ型によって異なる条件式を表示します。

294:   <asp:Label runat="server" Text="ID" CssClass="label" />
297:   <asp:DropDownList id="dropID" runat="server"
298:     AutoPostBack="True"
299:     OnSelectedIndexChanged="dropID_SelectedIndexChanged"
301:     DataSource=<%# GetLogicalOperator("int") %> />

行305-310では、Panelに1個のTextBoxを定義しています。このTextBoxは、DropDownListからBetween/Not Between以外の条件式を選択したときに表示します。行311-317では、Panelに2個のTextBoxを定義しています。2個のTextBoxは、DropDownListからBetween/Not Betweenの条件式を選択したときに表示します。

305:     <asp:Panel id="pnlSingleID" runat="server" Visible="True">
307:         <asp:TextBox id="txtID" runat="server"
308:           Columns="30" />
310:     </asp:Panel>
311:     <asp:Panel id="pnlMultiID" runat="server" Visible="False">
313:         <asp:TextBox id="txtFromID" runat="server" Columns="10" />
314:         <asp:Label id="lblID" runat="server" Text="and" CssClass="label" />
315:         <asp:TextBox id="txtToID" runat="server" Columns="10" />
317:     </asp:Panel>

以下、得意先名、役職、都道府県のLabel、DropDownList、TextBoxを定義しています。

図条件式により表示されるTextBoxの個数が異なる例

行418-420では、「クリア」のButtonを定義しています。このButtonは、検索条件をリセットするときに使用します。行421-424では、論理演算子(OR/AND条件)を選択するDropDownListを定義しています。

421:   <asp:DropDownList id="dropCriteria" runat="server">
422:     <asp:ListItem Value="or" Text="いずれかの検索条件に一致 (OR条件)" />
423:     <asp:ListItem Value="and" Text="すべての検索条件に一致 (AND条件)" />
424:   </asp:DropDownList>

行425-429では、「検索」と「閉じる」のButtonを定義しています。検索ボタンをクリックしたときは、検索条件を親ウィンドウに渡してDataGridに検索結果を表示します。閉じるボタンをクリックしたときは、子ウィンドウを閉じます。

図ボタンとドロップダウンリストを表示した例

リスト PopupSearch.aspxのソースコード(HTML編)

276: <html>
282: <body>
284: <form runat="server">
294: <asp:Label runat="server" Text="ID" CssClass="label" />
297: <asp:DropDownList id="dropID" runat="server"
298:   AutoPostBack="True"
299:   OnSelectedIndexChanged="dropID_SelectedIndexChanged"
301:   DataSource=<%# GetLogicalOperator("int") %> />
305: <asp:Panel id="pnlSingleID" runat="server" Visible="True">
307:   <asp:TextBox id="txtID" runat="server"
308:     Columns="30" />
310: </asp:Panel>
311: <asp:Panel id="pnlMultiID" runat="server" Visible="False">
313:   <asp:TextBox id="txtFromID" runat="server" Columns="10" />
314:   <asp:Label id="lblID" runat="server" Text="and" CssClass="label" />
315:   <asp:TextBox id="txtToID" runat="server" Columns="10" />
317: </asp:Panel>
       ・・・

418: <asp:Button id="btnClear" runat="server"
419:   Text="クリア"
420:   OnClick="btnClear_Click" />
421: <asp:DropDownList id="dropCriteria" runat="server">
422:   <asp:ListItem Value="or" Text="いずれかの検索条件に一致 (OR条件)" />
423:   <asp:ListItem Value="and" Text="すべての検索条件に一致 (AND条件)" />
424: </asp:DropDownList>
425: <asp:Button id="btnSearch" runat="server"
426:   Text="検索"
427:   OnClick="btnSearch_Click" />
428: <asp:Button id="btnClose" runat="server"
429:   Text="閉じる" />
435: </form>
436: </body>
436: </html>

◆サブプログラムPopupSearch.aspxの解説(コード編)

PopupSearch.aspxは、Webフォームから選択した検索条件を親ウィンドウに渡します。検索条件は、得意先テーブルの得意先ID、得意先名、役職、都道府県のカラムに対して設定することができます。複数のカラムの検索条件を設定するときは、論理演算子(OR/AND条件)を適用することができます。

Sub Page_Load()イベントの処理

このイベントは、ページがロードされたときに発生します。このイベントでは、ページの初期化を行います。

行5-8のIf…End Ifでは、ページが最初にロードされたか調べています。最初にロードされたときは、「閉じる」ボタンにクライアント側で動作するonClickイベントを登録します。onClickイベントでは、JavaScriptのwindow.close()メソッドを実行して子ウィンドウを閉じます。行7のPage.DataBind()メソッドでは、DropDownListのDataSourceプロパティに設定されているGetLogicalOperator()関数を実行させて条件式をバインドします。

297: <asp:DropDownList id="dropID" runat="server"
301: DataSource=<%# GetLogicalOperator("int") %> />

4: Sub Page_Load()
5:   If Not IsPostBack Then
6:     btnClose.Attributes.Add("onclick", "window.close();")
7:     Page.DataBind()
8:   End If
9: End Sub

Sub dropID_SelectedIndexChanged()イベントの処理

このイベントは、得意先IDのDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて、表示するTextBoxの個数を切り替えます。DropDownListからBetween/Not Betweenを選択したときは、2個のTextBoxが定義されているPanelを可視状態にします。DropDownListからBetween/Not Between以外を選択したときは、1個のTextBoxが定義されているPanelを可視状態にします。

行12では、DropDownListのSelectedItem.Textプロパティから、選択した条件式を取得しています。行14-20のIf…Else…End Ifでは、PanelのVisibleプロパティを書き換えて可視/非可視状態に切り替えます。DropDownListからBetween以外を選択したときは、1個のTextBoxが定義されているPanelを可視状態にします。DropDownListからBetweenを選択したときは、2個のTextBoxが定義されているPanelを可視状態にします。

11: Sub dropID_SelectedIndexChanged(s As Object, e As EventArgs)
12:   Dim strOperator As String = dropID.SelectedItem.Text
13:
14:   If strOperator.IndexOf("Between") = -1 Then
15:     pnlSingleID.Visible = True
16:     pnlMultiID.Visible = False
17:   Else
18:     pnlSingleID.Visible = False
19:     pnlMultiID.Visible = True
20:   End If
21: End Sub

Sub dropCompanyName_SelectedIndexChanged()イベントの処理

このイベントは、得意先名のDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて表示するTextBoxの個数を切り替えます。

23: Sub dropCompanyName_SelectedIndexChanged(s As Object, e As EventArgs)
24:   Dim strOperator As String = dropCompanyName.SelectedItem.Text
25:
26:   If strOperator.IndexOf("Between") = -1 Then
27:     pnlSingleCompanyName.Visible = True
28:     pnlMultiCompanyName.Visible = False
29:   Else
30:     pnlSingleCompanyName.Visible = False
31:     pnlMultiCompanyName.Visible = True
32:   End If
33: End Sub

Sub dropContactTitle_SelectedIndexChanged()イベントの処理

このイベントは、役職のDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて表示するTextBoxの個数を切り替えます。

35: Sub dropContactTitle_SelectedIndexChanged(s As Object, e As EventArgs)
36:   Dim strOperator As String = dropContactTitle.SelectedItem.Text
37:
38:   If strOperator.IndexOf("Between") = -1 Then
39:     pnlSingleContactTitle.Visible = True
40:     pnlMultiContactTitle.Visible = False
41:   Else
42:     pnlSingleContactTitle.Visible = False
43:     pnlMultiContactTitle.Visible = True
44:   End If
45: End Sub

Sub dropKen_SelectedIndexChanged()イベントの処理

このイベントは、都道府県のDropDownListから条件式を選択したときに発生します。このイベントでは、PanelのVisibleプロパティを書き換えて表示するTextBoxの個数を切り替えます。

47: Sub dropKen_SelectedIndexChanged(s As Object, e As EventArgs)
48:   Dim strOperator As String = dropKen.SelectedItem.Text
49:
50:   If strOperator.IndexOf("Between") = -1 Then
51:     pnlSingleKen.Visible = True
52:     pnlMultiKen.Visible = False
53:   Else
54:     pnlSingleKen.Visible = False
55:     pnlMultiKen.Visible = True
56:   End If
57: End Sub

Sub btnClear_Click()イベントの処理

このイベントは、Webフォームから「クリア」ボタンをクリックしたときに発生します。このイベントでは、検索条件をリセットします。

59: Sub btnClear_Click(s As Object, e As EventArgs)
60:   dropID.SelectedIndex = -1
61:   dropCompanyName.SelectedIndex = -1
62:   dropContactTitle.SelectedIndex = -1
63:   dropKen.SelectedIndex = -1
64:
65:   txtID.Text = ""
66:   txtFromID.Text = ""
67:   txtToID.Text = ""
       ・・・

78:   pnlSingleID.Visible = True
79:   pnlMultiID.Visible = False
       ・・・

86: End Sub

Sub btnSearch_Click()イベントの処理

このイベントは、Webフォームから「検索」ボタンをクリックしたときに発生します。このイベントでは、Webフォームから選択した検索条件を取得して親ウィンドウに渡します。

行90では、論理演算子(OR/AND条件)のDropDownListから選択した値(and/or)を取得しています。行93-103では、得意先IDの検索条件を取得しています。行93では、DropDownListから条件式を取得しています。DropDownListのSelectedItem.Textプロパティには、Equal to、Less than、Greater than、Between・・・などの比較演算子が格納されています。行94-103のIf…End Ifでは、DropDownListから比較演算子を選択したか調べています。行95-97では、StringBuilderのAppend()メソッドで論理演算子(Or/And)を追加しています。

(CustomerID Between 30 and 39) Or (Ken In '埼玉県')

(CustomerID Between 30 and 39) And (Ken In '埼玉県')

行98-102では、条件式の比較演算子にBetweenが含まれるか調べています。Betweenが含まれるときは、GenIntCriteria()関数の引数に開始値/終了値を指定して呼び出します。Betweenが含まれないときは、GetIntCriteria()関数の引数に値を指定して呼び出します。GetIntCriteria()からは、SQLのWHERE句が返されます。

Equal to è CustomerID=1

Not Equal to è Not CustomerID=1

Between è CustomerID Between 1 and 5

同様の手順で、得意先名、役職、都道府県の検索条件を取得します。なお、これらのカラムのWHERE句を生成するときは、GetStrCriteria()関数を使用します。

行142-147のWith…End Withでは、StringBuilderのAppend()メソッドで以下のJavaScriptを生成しています。

window.opener.frmMain.txtMessage.value = 'Search Criteria';

</script>

JavaScriptのwindow.opener.frmMain.txtMessage.value=では、親ウィンドウのTextBoxに検索条件(Search Criteria)を設定しています。ここで設定した検索条件は、親ウィンドウのDataGridに検索結果を表示するときに使用します。

行148では、Page.RegisterClientScriptBlock()メソッドでJavaScriptを登録しています。ここで登録したJavaScriptは、Webページがロードされたときにクライアント側のブラウザがら実行されます。

88: Sub btnSearch_Click(s As Object, e As EventArgs)
89:   Dim sbCriteria As New StringBuilder()
90:   Dim strAndOr As String = dropCriteria.SelectedItem.Value
91:   Dim strOp As String
92:
93:   strOp = dropID.SelectedItem.Text
94:   If strOp <> String.Empty Then
95:     If sbCriteria.Length > 0 Then
96:       sbCriteria.Append(" " & strAndOr & " ")
97:     End If
98:     If strOp.IndexOf("Between") <> -1 Then
99:       sbCriteria.Append( GenIntCriteria("CustomerID", strOp, "", txtFromID.Text, txtToID.Text) )
100:     Else
101:       sbCriteria.Append( GenIntCriteria("CustomerID", strOp, txtID.Text) )
102:     End If
103:   End If
       ・・・

141:   Dim sbScript As New StringBuilder()
142:   With sbScript
143:     .Append("<script language='javascript'>" & vbCrLf)
144:     .Append(vbTab & "window.opener.frmMain.txtMessage.value = '" & _
145:       sbCriteria.ToString() & "';" & vbCrLf)
146:     .Append("</" & "script>")
147:   End With
148:   RegisterClientScriptBlock("search", sbScript.ToString)
149: End Sub

Function GenIntCriteria()関数の処理

この関数は、SQLのWHERE句を生成して返します。この関数は、検索ボタンをクリックしたときにbtnSearch_Click()イベントから呼ばれます。GenIntCriteria()は、数値型のカラムのWHERE句を生成するときに使用します。

行161-186のIf…ElseIf…End Ifでは、比較演算子を調べて以下のようなWHERE句を生成します。

Equal to è CustomerID=999	Not Equal to è Not CustomerID=999
Less than è CustomerID<999	Not Less than è Not CustomerID<999
Greater than è CustomerID>999	Not Greater than è Not CustomerID>999
Between è CustomerID Between 1 and 2	Not Between è CustomerID Not Between 1 and 2
In è CustomerID In(1,2)	Not In è CustomerID Not In(1,2)
Is Null è CustomerID Is Null	Is Not Null è CustomerID Is Not Null

行187では、SQLのWHERE句を返します。

151: Function GenIntCriteria(strFieldName As String, strOp As String, _
152:   strValue As String, _
153:   Optional strValue1 As String = "", Optional strValue2 As String = "") As String
154:
155:   If strOp = String.Empty Then
156:     Return ""
157:   End If
158:
159:   Dim strCriteria As String
160:
161:   If strOp = "Equal to" Then
162:     strCriteria = "(" & strFieldName & "=" & strValue & ")"
163:   ElseIf strOp = "Less than" Then
164:     strCriteria = "(" & strFieldName & "<" & strValue & ")"
165:   ElseIf strOp = "Greater than" Then
166:     strCriteria = "(" & strFieldName & ">" & strValue & ")"
167:   ElseIf strOp = "Between" Then
168:     strCriteria = "(" & strFieldName & " Between " & strValue1 & " and " & strValue2 & ")"

169:   ElseIf strOp = "In" Then
170:     strCriteria = "(" & strFieldName & " In(" & strValue & "))"
171:   ElseIf strOp = "Is Null" Then
172:     strCriteria = "(" & strFieldName & " Is Null)"
173:
174:   ElseIf strOp = "Not Equal to" Then
175:     strCriteria = "(Not " & strFieldName & "=" & strValue & ")"

176:   ElseIf strOp = "Not Less than" Then
177:     strCriteria = "(Not " & strFieldName & "<" & strValue & ")"
178:   ElseIf strOp = "Not Greater than" Then
179:     strCriteria = "(Not " & strFieldName & ">" & strValue & ")"
180:   ElseIf strOp = "Not Between" Then
181:     strCriteria = "(" & strFieldName & " Not Between " & strValue1 & " and " & strValue2 & ")"
182:   ElseIf strOp = "Not In" Then
183:     strCriteria = "(" & strFieldName & " Not In(" & strValue & "))"
184:   ElseIf strOp = "Is Not Null" Then
185:     strCriteria = "(" & strFieldName & " Is Not Null)"
186:   End If
187:   Return " " & strCriteria
188: End Function

Function GenStrCriteria()関数の処理

この関数は、SQLのWHERE句を生成して返します。この関数は、検索ボタンをクリックしたときにbtnSearch_Click()イベントから呼ばれます。GenStrCriteria()は、文字型のカラムのWHERE句を生成するときに使用します。

行200-221のIf…ElseIf…End Ifでは、比較演算子を調べて以下のようなWHERE句を生成します。

Like è Ken=~県名~	Not Equal to è Not Ken=~県名~
Equal to è Ken=~県名~	Not Less than è Not Ken<~県名~
Between è Ken Between ~県名1~ and ~県名2~	Not Betweenè Ken Not Between ~県名1~ and ~県名2~
In è Ken In(~県名1~,~県名2~)	Not In è Ken Not In(~県名1~,~県名2~)
Is Null è Ken Is Null	Is Not Null è Ken Is Not Null

文字型のWHERE句を生成するときは、値を引用符（シングルクオテーション、ダブルクオテーション）で囲む必要があります。このサンプルでは、WHERE句を子ウィンドウから親ウィンドウに渡すときにJavaScriptを使用します。JavaScriptでWHERE句を渡すときに引用符が含まれるとエラーになるため、引用符をティルダ(~)で代用します。親ウィンドウでSQLのWHERE句を生成するときに、ティルダを引用符に置換します。

Ken = ~埼玉県~ è Ken = '埼玉県'

行222では、SQLのWHERE句を返します。

190: Function GenStrCriteria(strFieldName As String, strOp As String, _
191:   strValue As String, _
192:   Optional strValue1 As String = "", Optional strValue2 As String = "") As String
193:
194:   If strOp = String.Empty Then
195:     Return ""
196:   End If
197:
198:   Dim strCriteria As String
199:
200:   If strOp = "Like" Then
201:     strCriteria = "(" & strFieldName & " Like ~" & strValue & "~)"
202:   ElseIf strOp = "Equal to" Then
203:     strCriteria = "(" & strFieldName & "=~" & strValue & "~)"
204:   ElseIf strOp = "Between" Then
205:     strCriteria = "(" & strFieldName & " Between ~" & strValue1 & "~ and ~" & strValue2 & "~)"
206:   ElseIf strOp = "In" Then
207:     strCriteria = "(" & strFieldName & " In(" & SplitValue(strValue) & "))"
208:   ElseIf strOp = "Is Null" Then
209:     strCriteria = "(" & strFieldName & " Is Null)"
210:

211:   ElseIf strOp = "Not Like" Then
212:     strCriteria = "(" & strFieldName & " Not Like ~" & strValue & "~)"
213:   ElseIf strOp = "Not Equal to" Then
214:     strCriteria = "(Not " & strFieldName & "=~" & strValue & "~)"
215:   ElseIf strOp = "Not Between" Then
216:    strCriteria = "(" & strFieldName & " Not Between ~" & strValue1 & "~ and ~" & strValue2 & "~)"

217: ElseIf strOp = "Not In" Then
218: strCriteria = "(" & strFieldName & " Not In(" & SplitValue(strValue) & "))"

219:   ElseIf strOp = "Is Not Null" Then
220:     strCriteria = "(" & strFieldName & " Is Not Null)"
221:   End If
222:   Return " " & strCriteria
223: End Function

Function SplitValue()関数の処理

この関数は、コンマ区切りの文字列を分割してティルダで囲って返します。この関数は、GenStrCriteria()から比較演算子In()の値を取得するときに呼ばれます。

行226では、コンマ区切りの文字列を分割して配列変数に格納します。行230-235のFor…Nextでは、分割された文字列にティルダを付加して囲みます。行236では、分割した文字列を結合して返します。

埼玉県,千葉県 è ~埼玉県~,~千葉県~

225: Function SplitValue(strValue As String) As String
226:   Dim astrValue() As String = strValue.Split(",")
227:   Dim i As Integer
228:   Dim sbValue As New StringBuilder()
229:
230:   For i=0 To astrValue.Length - 1
231:     If i > 0 Then
232:       sbValue.Append(",")
233:     End If
234:     sbValue.Append("~" & astrValue(i) & "~")
235:   Next
236:   Return sbValue.ToString()
237: End Function

Function GetLogicalOperator()関数の処理

この関数は、検索条件の比較演算子をArrayListに格納して返します。この関数は、DropDownListのDataSourceプロパティにデータ連結式として記述されています。GetLogicalOperator()は、Page.DataBind()メソッドが実行されたときに呼ばれます。

この関数からは、数値型と文字型の2種類のArrayListを返します。行244-256では、ArrayListのAdd()メソッドで数値型のアイテムを追加しています。Add()メソッドの引数には、ListItemを指定します。ListItemの引数には、Text/Valueプロパティを指定します。このサンプルでは、Textプロパティに比較演算子、Valueプロパティに比較演算子の省略形を指定しています。

行258-268では、ArrayListに文字型のアイテムを追加しています。行271では、ArrayListを返しています。

239: Function GetLogicalOperator(strDataType As String) As ArrayList
240:   Dim arrOp As New ArrayList()
241:
242:   With arrOp
243:     If strDataType = "int" Then
244:       .Add(New ListItem("",""))
245:       .Add(New ListItem("Equal to","="))
246:       .Add(New ListItem("Less than","<"))
247:       .Add(New ListItem("Greater than",">"))
248:       .Add(New ListItem("Between","Bet"))
249:       .Add(New ListItem("In","In"))
250:       .Add(New ListItem("Is Null","Null"))
251:       .Add(New ListItem("Not Equal to","!="))
252:       .Add(New ListItem("Not Less than","!<"))
253:       .Add(New ListItem("Not Greater than","!>"))
254:       .Add(New ListItem("Not Between","!Bet"))
255:       .Add(New ListItem("Not In","!In"))
256:       .Add(New ListItem("Is Not Null","!Null"))
257:     Else
258:       .Add(New ListItem("",""))
259:       .Add(New ListItem("Like","Like"))
260:       .Add(New ListItem("Equal to","="))
261:       .Add(New ListItem("Between","Bet"))
262:       .Add(New ListItem("In","In"))
263:       .Add(New ListItem("Is Null","Null"))
264:       .Add(New ListItem("Not Like","!Like"))
265:       .Add(New ListItem("Not Equal to","!="))
266:       .Add(New ListItem("Not Between","!Bet"))
267:       .Add(New ListItem("Not In","!In"))
268:       .Add(New ListItem("Is Not Null","!Null"))
269:    End If
270:   End With
271:   Return arrOp
272: End Function

リスト PopupSearch.aspxのソースコード(コード編)

1: <%@ Page language="vb" SmartNavigation="False" %>
2:
3: <script language="vb" runat="server">
4: Sub Page_Load()
9: End Sub
10:
11: Sub dropID_SelectedIndexChanged(s As Object, e As EventArgs)
21: End Sub
22:
23: Sub dropCompanyName_SelectedIndexChanged(s As Object, e As EventArgs)
33: End Sub
34:
35: Sub dropContactTitle_SelectedIndexChanged(s As Object, e As EventArgs)
45: End Sub
46:
47: Sub dropKen_SelectedIndexChanged(s As Object, e As EventArgs)
57: End Sub
58:
59: Sub btnClear_Click(s As Object, e As EventArgs)
86: End Sub
87:
88: Sub btnSearch_Click(s As Object, e As EventArgs)
149: End Sub
150:
151: Function GenIntCriteria(strFieldName As String, strOp As String, _
188: End Function
189:
190: Function GenStrCriteria(strFieldName As String, strOp As String, _
223: End Function
224:
225: Function SplitValue(strValue As String) As String
237: End Function
238:
239: Function GetLogicalOperator(strDataType As String) As ArrayList
272: End Function
274: </script>

Tip

引用符が含まれるデータを渡すには

このサンプルでは、引用符が含まれるデータをJavaScriptで渡すときに引用符をティルダに置換してエラーとなるのを回避しています。JavaScriptで引用符を渡すには、「\'」のように記述するとエラーを回避することができます。

データの内容が不明なときは、Session変数にデータを格納して渡すとエラーを回避することができます。