ComboBox コントロール操作方法使用しますか? (VB)
ComboBox は、TextBox の柔軟性と、ユーザーが選択できるオプションのリストを組み合わせた ASP.NET AJAX コントロールです。
このチュートリアルの目的は、AJAX Control Toolkit ComboBox コントロールについて説明することです。 ComboBox は、標準の ASP.NET DropDownList コントロールと TextBox コントロールの組み合わせと同様に機能します。 項目の既存のリストから選択するか、新しい項目を入力できます。
ComboBox はオートコンプリート コントロール エクステンダーに似ていますが、コントロールはさまざまなシナリオで使用されます。 オートコンプリート エクステンダーは、Web サービスに対してクエリを実行して、一致するエントリを取得します。 これに対し、ComboBox コントロールは一連の項目で初期化されます。 オートコンプリート エクステンダーを使用すると、大量のデータ セット (何百万もの自動車パーツ) を操作しているときに、ComboBox コントロールを使用すると、小さなデータ セット (数十個の自動車パーツ) を操作する場合に意味があります。
項目の静的リストからの選択
ComboBox コントロールを使用する簡単なサンプルから始めましょう。 ドロップダウン リストに項目の静的リストを表示するとします。 ただし、リストが完全ではない可能性を開いたままにしておく必要があります。 ユーザーがリストにカスタム値を入力できるようにする場合。
新しい ASP.NET Web Forms ページを作成し、そのページで ComboBox コントロールを使用します。 新しい ASP.NET ページをプロジェクトに追加し、[デザイン] ビューに切り替えます。
ページで ComboBox コントロールを使用する場合は、ScriptManager コントロールをページに追加する必要があります。 ScriptManager コントロールを[AJAX Extensions]\(AJAX 拡張機能\) タブの下から Designer サーフェスにドラッグします。 ページの上部に ScriptManager コントロールを追加する必要があります。開くサーバー側 <のフォーム> タグのすぐ下に追加できます。
次に、ComboBox コントロールをページにドラッグします。 ComboBox コントロールは、[ツールボックス] で、他の AJAX Control Toolkit コントロールとコントロール エクステンダーと共に見つけることができます (図 1 を参照)。
図 01: ツールボックスから ComboBox コントロールを選択する (クリックするとフルサイズの画像が表示されます)
ComboBox コントロールを使用して、選択肢の静的なリストを表示します。 ユーザーは、3 つの選択肢の一覧から、食べ物の特定のレベルの辛さを選択できます(図 2 を参照)。
図 02: 項目の静的リストからの選択 (フルサイズの画像を表示する をクリックします)
これらの選択肢を ComboBox コントロールに追加するには、2 つの方法があります。 まず、デザイン ビューでコントロールの上にマウス ポインターを置いたときに [オプションの編集] タスク オプションを選択し、アイテム エディターを開きます (図 3 を参照)。
図 03: ComboBox アイテムの編集 (フルサイズの画像を表示する 場合はクリックします)
2 番目のオプションは、ソース ビューの asp:ComboBox> タグを開くタグと閉じる<タグの間に、 内の項目の一覧を追加することです。 リスト 1 のページには、アイテムのリストを含む更新された ComboBox が含まれています。
リスト 1 - Static.aspx
<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
lblSelection.Text = "You picked " & ComboBox1.SelectedItem.Text
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Static</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Describe how spicy you like your food:
<br />
<cc1:ComboBox ID="ComboBox1" runat="server">
<asp:ListItem Text="Mild" Value="0" />
<asp:ListItem Text="Medium" Value="1" />
<asp:ListItem Text="Hot" Value="2" />
</cc1:ComboBox>
<asp:Button
ID="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label
ID="lblSelection"
Runat="server" />
</div>
</form>
</body>
</html>
リスト 1 でページを開くと、ComboBox から既存のオプションのいずれかを選択できます。 つまり、ComboBox は DropDownList コントロールと同じように動作します。
ただし、既存のリストにない新しい選択肢 (例: スーパースパイシー) を入力することもできます。 そのため、ComboBox は TextBox コントロールと同様に動作します。
既存のアイテムを選択するか、カスタムアイテムを入力するかに関係なく、フォームを送信すると、選択内容がラベル コントロールに表示されます。 フォームを送信すると、btnSubmit_Click ハンドラーが実行され、ラベルが更新されます (図 4 を参照)。
図 04: 選択した項目を表示する (クリックするとフルサイズの画像が表示されます)
ComboBox は、フォームの送信後に選択したアイテムを取得するための DropDownList コントロールと同じプロパティをサポートしています。
- SelectedItem.Text - 選択したアイテムの Text プロパティの値を表示します。
- SelectedItem.Value - 選択したアイテムの Value プロパティの値を表示するか、ComboBox に入力されたテキストを表示します。
- SelectedValue - SelectedItem.Value と同じですが、このプロパティを使用すると、既定の (初期) 選択された項目を指定できます。
ComboBox にカスタム選択肢を入力すると、SelectedItem.Text プロパティと SelectedItem.Value プロパティの両方にカスタム選択肢が割り当てられます。
データベースから項目の一覧を選択する
ComboBox に表示される項目の一覧は、データベースから取得できます。 たとえば、ComboBox を SqlDataSource コントロール、ObjectDataSource コントロール、LinqDataSource、または EntityDataSource にバインドできます。
ComboBox にムービーの一覧を表示するとします。 Movies データベース テーブルからムービーの一覧を取得する場合。 次の手順のようにします。
- Movies.aspx という名前のページを作成する
- [ツールボックス] の [AJAX 拡張機能] タブからページに ScriptManager をドラッグして、ScriptManager コントロールをページに追加します。
- ComboBox コントロールをページに追加するには、ComboBox をページにドラッグします。
- デザイン ビューで、ComboBox コントロールの上にマウス ポインターを合わせ、[ データ ソースの選択 ] タスク オプションを選択します (図 5 を参照)。 データ ソース構成ウィザードが起動します。
- [ データ ソースの選択] ステップで 、[新しいデータ ソース] オプションを <選択します> 。
- [ データ ソースの種類の選択 ] ステップで、[データベース] を選択します。
- [ データ接続の選択] ステップで、データベース (MoviesDB.mdf など) を選択します。
- [ 接続文字列をアプリケーション構成ファイルに保存 する] ステップで、接続文字列を保存するオプションを選択します。
- [ ステートメントの選択の構成] ステップで、Movies データベース テーブルを選択し、すべての列を選択します。
- [クエリのテスト] ステップで、[完了] ボタンをクリックします。
- [ データ ソースの選択 ] ステップに戻り、表示するフィールドの [タイトル] 列とデータ フィールドの [ID] 列を選択します (図を参照)。
- [OK] ボタンをクリックしてウィザードを閉じます。
図 05: データ ソースの選択 (クリックするとフルサイズの画像が表示されます)
図 06: データ テキストフィールドと値フィールドの選択(フルサイズの画像を表示する場合はクリックします)
上記の手順を完了すると、ComboBox は Movies データベース テーブルのムービーを表す SqlDataSource コントロールにバインドされます。 ページのソースはリスト 2 のようになります (書式設定を少しクリーンアップしました)。
リスト 2 - Movies.aspx
<%@ Page Language="VB" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
Select your favorite movie:
<br />
<cc1:ComboBox
ID="ComboBox1"
DataSourceID="SqlDataSource1"
DataTextField="Title"
DataValueField="Id"
MaxLength="0"
runat="server" >
</cc1:ComboBox>
<asp:SqlDataSource
ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Movies]"
runat="server">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
ComboBox コントロールには、SqlDataSource コントロールを指す DataSourceID プロパティがあることに注意してください。 ブラウザーでページを開くと、データベースのムービーの一覧が表示されます (図 7 を参照)。 リストからムービーを選択するか、コンボ ボックスにムービーを入力して新しいムービーを入力できます。
図 07: ムービーの一覧を表示する (フルサイズの画像を表示する をクリックします)
DropDownStyle の設定
ComboBox DropDownStyle プロパティを使用すると、ComboBox の動作を変更できます。 このプロパティは、使用可能な値を受け入れます。
- DropDown - (既定値) コンボ ボックスには、矢印をクリックするとドロップダウン リストが表示され、カスタム値を入力できます。
- Simple - ComboBox にはドロップダウン リストが自動的に表示され、カスタム値を入力できます。
- DropDownList - ComboBox は DropDownList コントロールと同じように機能します。
DropDown と Simple の違いは、項目の一覧が表示される場合です。 Simple の場合、フォーカスを ComboBox に移動するとすぐにリストが表示されます。 DropDown の場合は、矢印をクリックして項目の一覧を表示する必要があります。
DropDownList 値を指定すると、ComboBox コントロールは標準の DropDownList コントロールと同じように動作します。 ただし、ここでは重要な違いがあります。 以前のバージョンのインターネット エクスプローラーは、無限の z インデックスを持つ DropDownList コントロールを表示するため、コントロールはその前に配置されたコントロールの前に表示されます。 ComboBox は HTML select> タグではなく HTML <div> タグを<レンダリングするため、ComboBox は Z オーダーを正しく考慮します。
AutoCompleteMode の設定
ComboBox AutoCompleteMode プロパティを使用して、誰かが ComboBox にテキストを入力したときの動作を指定します。 このプロパティは、次の可能な値を受け入れます。
- None - (既定値) ComboBox では、オートコンプリート動作は提供されません。
- Suggest - ComboBox にリストが表示され、リスト内の一致する項目が強調表示されます (図 8 を参照)。
- Append - ComboBox はリストを表示せず、リストから入力した項目に一致する項目を追加します (図 9 を参照)。
- SuggestAppend - ComboBox は両方ともリストを表示し、一致する項目をリストから入力した項目に追加します (図 10 を参照)。
図 08: ComboBox が提案を行う (フルサイズの画像を表示する場合はクリックします)
図 09: ComboBox は、一致するテキストを追加します (フルサイズの画像を表示するには、ここをクリックします)
図 10: ComboBox の提案と追加 (フルサイズの画像を表示するには、ここをクリックします)
まとめ
このチュートリアルでは、ComboBox コントロールを使用して固定の項目セットを表示する方法について説明しました。 ComboBox コントロールを静的な項目セットとデータベース テーブルの両方にバインドしました。 最後に、DropDownStyle プロパティと AutoCompleteMode プロパティを設定して、ComboBox の動作を変更する方法について説明しました。
フィードバック
近日公開予定: 2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub イシューを段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、以下を参照してください: https://aka.ms/ContentUserFeedback。
フィードバックの送信と表示