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

 

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

  ReadOnly="True"

  Columns="20" />

 

 

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

 

このサンプルでは、支社の一覧をポップアップウィンドウに表示していますが、テキストボックスの右側にドロップダウンリストを表示して選択させる方法もあります。この場合、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では、LabelTextBoxを定義して社員レコードの支社を表示しています。行275-281ImageButtonでは、ルックアップボタンを定義しています。この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では、JavaScriptwindow.open()メソッドに指定するオプションを生成しています。行33では、window.open()に指定するurlを生成しています。行35では、OpenWindow()を呼び出して新規ウィンドウを開くJavaScriptを登録します。OpenWindowの引数には、urltargetfeaturesを指定します。

 

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-128With…End Withでは、StringBuilderAppend()メソッドで以下のJavaScriptを生成しています。

 

<script language='javascript'>
window.open('PopupBranch.aspx','_blank'," features ");

</script>

 

JavaScriptwindow.open()メソッドは、新規ウィンドウを開きます。Open()メソッドの引数には、urltargetfeaturesを指定します。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を設定していますので1アイテムのみ選択することができます。Rowsプロパティには、5行表示されるように設定しています。

 

ListBoxに支社を表示した例

 

 

71-78では、「選択」と「閉じる」のButtonを定義しています。選択ボタンには、OnClickイベントを登録しています。このOnClickイベントでは、ListBoxから選択した支社を、親ウィンドウに転記するJavaScriptを生成して登録します。閉じるボタンには、クライアント側で動作するonClickイベントを登録しています。クライアント側で動作するonClickイベントでは、JavaScriptwindow.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-11If…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から選択したアイテムを取得しています。ListBoxSelectedItem.Textには、選択したアイテム(ListItem)Textプロパティの値(支社名)が格納されています。

 

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

 

<script language='javascript'>" & vbCrLf)
   window.opener.frmPopupEmployee.txtBranch.value = '
支社名';

window.close();

</script>

 

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

 

23Page.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では、ListBoxItemsコレクションからListItemCollectionを作成しています。行29-35With…End Withでは、ListItemCollectionAdd()メソッドで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>

 

 

ASP.NET DataGrid3のホームへ戻る