ルックアップテーブルを表示するサンプル

図ルックアップテーブルを表示するサンプル

このサンプルは、Webページに表示されている社員を編集するとき、支社のルックアップテーブルを表示して選択することができます。DataGridから社員を選択して、編集ボタンをクリックすると、新規ウィンドウに社員が表示されます。社員の支社を変更するときは、支社の右側に表示されているルックアップボタンをクリックします。

ルックアップボタンをクリックすると、新規ウィンドウが開いてリストボックスに支社の一覧が表示されます。リストボックスから支社を選択したら、[選択]ボタンをクリックして確定します。[閉じる]ボタンをクリックすると、支社を選択しないでウィンドウを閉じます。

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

¶ポイント１　手入力とリストボックスからの選択を許可するには

このサンプルでは、支社を変更するとき手入力とリストボックスの２種類を許可しています。通常、支社はマスター化するのが一般的です。この場合、TextBoxのReadOnlyプロパティにTrueを設定して手入力を禁止して、リストボックスからのみ選択できるように設計します。

<asp:TextBox id="txtBranch" runat="server"

ReadOnly="True"

Columns="20" />

¶ポイント２　リストボックスの代わりにドロップダウンリストを使用するには

このサンプルでは、支社の一覧をポップアップウィンドウに表示していますが、テキストボックスの右側にドロップダウンリストを表示して選択させる方法もあります。この場合、PanelコントロールでDropDownListを非可視状態にしておいて、ルックアップボタンをクリックしたときに可視状態に切り替えます。

<asp:ImageButton id="ibtnLookup" runat="server"

OnClick="ibtnLookup_Click"

ImageUrl="../img/lookup.gif"

ImageAlign="Middle" />

<asp:Panel id="pnlBranch" runat="server" Visible="False">

<asp:DropDownList id="dropBranch" runat="server"

AutoPostBack="True"

OnSelectedIndexChanged="dropBranch_SelectedIndexChanged" />

</asp:Panel>

◆プログラムPopupEmployee.aspxの解説(HTML編)

PopupEmployee.aspxでは、DataGridから選択した社員をTextBoxに表示します。行267-274では、LabelとTextBoxを定義して社員レコードの支社を表示しています。行275-281のImageButtonでは、ルックアップボタンを定義しています。このImageButtonには、OnClickイベントを登録しています。OnClickイベントでは、新規ウィンドウを開いて支社の一覧をリストボックスに表示します。

図 ImageButtonでルックアップボタンを表示した例

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

219: <html>
225: <body>
226: <form id="frmPopupEmployee" runat="server">

・・・
267: <asp:Label id="lblBranch" runat="server"
268:   CssClass="label"
269:   Text="支社" />
272: <asp:TextBox id="txtBranch" runat="server"
273:   CssClass="textBox"
274:   Columns="20" />
275: <asp:ImageButton id="ibtnLookup" runat="server"
276:   OnClick="ibtnLookup_Click"
277:   ImageUrl="../img/lookup.gif"
278:   Title="Lookup Table"
279:   CssClass="imageOn"
280:   Enabled="True"
281:   ImageAlign="Middle" />
       ・・・

376: </form>
377: </body>
377: </html>

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

PopupEmployee.aspxは、ルックアップボタンをクリックしたとき新規ウィンドウを開いて支社の一覧を表示します。

Sub ibtnLookup_Click()イベントの処理

このイベントは、ルックアップボタンをクリックしたときに発生します。このイベントでは、新規ウィンドウを開くJavaScriptを生成して登録します。

行30-32では、JavaScriptのwindow.open()メソッドに指定するオプションを生成しています。行33では、window.open()に指定するurlを生成しています。行35では、OpenWindow()を呼び出して新規ウィンドウを開くJavaScriptを登録します。OpenWindowの引数には、url、target、featuresを指定します。

29: Sub ibtnLookup_Click(s As Object, e As ImageClickEventArgs)
30:   Dim strFeatures As String = "height=160,width=165,left=50,top=50," & _
31:     "dependent=yes,location=no,menubar=no,resizable=yes,scrollbars=no," & _
32:     "status=no,titlebar=yes,toolbar=no"
33:   Dim strUrl As String = "PopupBranch.aspx"
34:
35:   OpenWindow(strUrl, "_blank", strFeatures)
36: End Sub

Sub OpenWindow()の処理

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

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

</script>

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

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

122: Sub OpenWindow(strUrl As String, strTarget As String, strFeatures As String)
123:   Dim sbScript As New StringBuilder()
124:   With sbScript
125:     .Append("<script language='javascript'>" & vbCrLf)
126:     .Append(vbTab & "window.open('" & strUrl & "','" &

strTarget & "','" & strFeatures & "');" & vbCrLf)
127:     .Append("</" & "script>")
128:   End With
129:   RegisterClientScriptBlock("openWindow", sbScript.ToString)
130: End Sub

リスト PopupEmployee.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 mdt As DataTable
7:
29: Sub ibtnLookup_Click(s As Object, e As ImageClickEventArgs)
36: End Sub
37:
122: Sub OpenWindow(strUrl As String, strTarget As String, strFeatures As String)
130: End Sub
217: </script>

◆プログラムPopupBranch.aspxの解説(HTML編)

PopupBranch.aspxでは、ListBoxに支社の一覧を表示して選択できるようにしています。行59-61では、ListBoxを定義しています。このListBoxには、SelectionModeプロパティにSingleを設定していますので１アイテムのみ選択することができます。Rowsプロパティには、5行表示されるように設定しています。

図 ListBoxに支社を表示した例

行71-78では、「選択」と「閉じる」のButtonを定義しています。選択ボタンには、OnClickイベントを登録しています。このOnClickイベントでは、ListBoxから選択した支社を、親ウィンドウに転記するJavaScriptを生成して登録します。閉じるボタンには、クライアント側で動作するonClickイベントを登録しています。クライアント側で動作するonClickイベントでは、JavaScriptのwindow.close()メソッドでウィンドウを閉じます。

図「選択」と「閉じる」のボタンを表示した例

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

40: <html>
46: <body>
47: <form id="frmPopupBranch" runat="server">
59: <asp:ListBox id="lstBranch" runat="server"
60:   SelectionMode="Single"
61:   Rows="5" />
71: <asp:Button id="btnSelect" runat="server"
72:   Text="選択"
73:   Style="vertical-align:middle"
74:   OnClick="btnSelect_Click" />
75: <asp:Button id="btnClose" runat="server"
76:   CausesValidation="False"
77:   Text="閉じる"
78:   Style="vertical-align:middle" />
84: </form>
85: </body>
85: </html>

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

PopupBranch.aspxでは、ListBoxから選択した支社を親ウィンドウに転記します。

Sub Page_Load()イベントの処理

このイベントは、ページがロードされたときに実行されます。このイベントでは、ListBoxに支社をバインドして表示します。

行8-11のIf…End Ifでは、ページが最初にロードされたか調べています。ページが最初にロードされたときは、閉じるボタンにクライアント側で動作するonClickイベントを追加します。Buttonにクライアント側で動作するイベントを追加するには、AttributesコレクションのAdd()メソッドを使用します。Add()メソッドの引数には、イベント名とイベント処理を記述します。次に、BindListBox()を呼び出してListBoxに支社をバインドして表示します。

7: Sub Page_Load()
8:   If Not IsPostBack Then
9:     btnClose.Attributes.Add("onclick", "window.close();")
10:     BindListBox()
11:   End If
12: End Sub

Sub btnSelect_Click()イベントの処理

このイベントは、Webページから選択ボタンをクリックしたときに発生します。このイベントでは、ListBoxから選択した支社を、親ウィンドウに転記するJavaScriptを生成して登録します。

行15では、ListBoxから選択したアイテムを取得しています。ListBoxのSelectedItem.Textには、選択したアイテム(ListItem)のTextプロパティの値（支社名）が格納されています。

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

window.close();

</script>

JavaScriptのwindow.opener.frmPopupEmployee.txtBranch.value=では、ListBoxから選択した支社名を親ウィンドウのTextBoxに転記します。window.close()メソッドは、ウィンドウを閉じます。

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

14: Sub btnSelect_Click(s As Object, e As EventArgs)
15:   Dim strBranch As String = lstBranch.SelectedItem.Text
16:   Dim sbScript As New StringBuilder()
17:   With sbScript
18:     .Append("<script language='javascript'>" & vbCrLf)
19:     .Append(vbTab & "window.opener.frmPopupEmployee.txtBranch.value = '" &

strBranch & "';" & vbCrLf)
20:     .Append(vbTab & "window.close();" & vbCrLf)
21:     .Append("</" & "script>")
22:   End With
23:   RegisterClientScriptBlock("insert", sbScript.ToString)
24: End Sub

Sub BindListBox()の処理

このサブプロシージャでは、ListBoxに支社名をバインドします。BindListBoxは、Page_Loadイベントから呼ばれます。

行27では、ListBoxのItemsコレクションからListItemCollectionを作成しています。行29-35のWith…End Withでは、ListItemCollectionのAdd()メソッドでListItemを追加しています。ListItemには、引数としてText/Valueプロパティを指定します。このサンプルでは、Valueプロパティを省略してTextプロパティのみ指定しています。

26: Sub BindListBox()
27:   Dim items As ListItemCollection = lstBranch.Items
28:
29:   With items
30:     .Add(New ListItem("北海道支社"))
31:     .Add(New ListItem("東北支社"))
32:     .Add(New ListItem("東京支社"))
33:     .Add(New ListItem("大阪支社"))
34:     .Add(New ListItem("九州支社"))
35:   End With
36: End Sub

リスト PopupBranch.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:
7: Sub Page_Load()
12: End Sub
13:
14: Sub btnSelect_Click(s As Object, e As EventArgs)
24: End Sub
25:
26: Sub BindListBox()
36: End Sub
38: </script>