ASP.NET コントロール: チェックBox、ラジオボタン、リストBox

Web フォームへの ASP.Net コントロールの追加

ASP.Netには、テキストボックスやラベルなどのコントロールをフォームに追加する機能があります。

Webフォームで利用できるその他のコントロールを見て、それらの共通する特性をいくつか確認してみましょう。

この例では、次の機能を備えたフォームを 1 つ作成します。

1. ユーザーが自分の名前を入力できる機能。
2. ユーザーが居住する都市を選択できるオプション。
3. ユーザーが性別のオプションを入力できる機能。
4. ユーザーが学びたいコースを選択するオプション。 どちらにも選択肢はあるだろう C# そしてASP.Net。

各コントロールを詳しく見てみましょう。 これらを追加して、上記の機能を備えたフォームを構築しましょう。

ステップ1） 最初のステップは、デモウェブフォームのフォームデザイナーを開くことです。これを実行すると、ツールボックスからコントロールをドラッグできるようになります。 Webフォーム.

デザイナー向けウェブフォームを開くには：

• ソリューションエクスプローラーで Demo.aspx ファイルを右クリックし、
• メニュー オプションの [デザイナーの表示] を選択します。

上記の手順を実行すると、以下に示すようにフォーム デザイナーが表示されるようになります。

それでは、コントロールを一つずつ追加していきましょう。

ラベル コントロール

ラベル コントロールは、フォーム上でユーザーにテキストやメッセージを表示するために使用されます。ラベル コントロールは通常、他のコントロールと組み合わせて使用​​されます。よくある例としては、テキスト ボックス コントロールと一緒にラベルを追加する場合が挙げられます。ラベルは、テキスト ボックスに何を入力する必要があるかをユーザーに示します。以下の例で、これをどのように実装できるかを見てみましょう。「名前」という名前のラベルを使用します。これは、後ほど追加するテキスト ボックス コントロールと組み合わせて使用​​します。

ステップ1） 最初のステップは、下図に示すように、ツールボックスから「ラベル」コントロールをWebフォームにドラッグすることです。

ステップ2） ラベルを追加したら、次の手順に従います。

1. ラベルコントロールを右クリックしてプロパティウィンドウを開きます。
2. 「プロパティ」メニューオプションを選択してください。

ステップ3） プロパティウィンドウから、[Text] プロパティの値を [Name] に変更します。

同様に、コントロールの ID プロパティ値も lblName に変更します。 コントロールに意味のある ID を指定すると、コーディング段階でコントロールにアクセスしやすくなります。 これを以下に示します。

上記の変更を行うと、以下の出力が表示されます。

出力：-

Web フォームに名前ラベルが表示されることがわかります。

テキストボックス

テキスト ボックスは、Web フォーム アプリケーションでユーザーがテキストを入力できるようにするために使用されます。以下に示す例を使用して、これをどのように実装するかを見てみましょう。ユーザーが名前を入力できるテキスト ボックスを 1 つフォームに追加します。

ステップ1） 最初のステップは、下図に示すように、ツールボックスからテキストボックスコントロールをWebフォームにドラッグすることです。

テキストボックス コントロールがフォーム上に配置された後のフォーム デザイナーでの表示例を以下に示します。

ステップ2） テキストボックスを追加したら、ID プロパティを変更する必要があります。

• テキストボックス コントロールを右クリックしてプロパティ ウィンドウを開き、
• プロパティを選択し、
• テキストボックスのIDプロパティをtxtNameに変更してください。

上記の変更を行うと、次の出力が表示されます。

出力：-

リストボックス

リストボックスは、Web フォーム上の項目のリストを表示するために使用されます。以下に示す例を使用して、これをどのように実装するかを見てみましょう。都市の場所をいくつか保存するために、フォームにリスト ボックスを追加します。

ステップ1） 最初のステップは、下図に示すように、ツールボックスからリストボックスコントロールをWebフォームにドラッグすることです。

ステップ2） リストボックスをフォームにドラッグすると、別のサイドメニューが表示されます。このメニューから「アイテムの編集」を選択してください。

ステップ3） リスト項目をリストボックスに追加できるダイアログ ボックスが表示されます。

1. 「追加」ボタンをクリックしてリスト項目を追加します。
2. リスト項目のテキスト値に名前を付けます。この例では「ムンバイ」とします。手順1と2を繰り返して、マンガロールとハイデラバードのリスト項目を追加します。
3. [OK]ボタンをクリックします。

ステップ4） プロパティウィンドウを開き、コントロールのIDプロパティの値をlstLocationに変更してください。

上記の変更を行うと、以下の出力が表示されます。

出力：-

出力結果から、リストボックスがフォームに追加されたことがはっきりとわかります。

ラジオボタン

ラジオ ボタンは、ユーザーが項目を選択できるリストを表示するために使用されます。 以下に示す例でこれを実装する方法を見てみましょう。 男性/女性オプションのラジオボタンを追加します。

ステップ1） 最初のステップは、ツールボックスから「ラジオボタン」コントロールをWebフォームにドラッグすることです（下の画像を参照）。「男性」と「女性」のオプション用に、ラジオボタンを2つ追加してください。

ステップ2） ラジオボタンを追加したら、「text」プロパティを変更します。

• 「ラジオボタン コントロール」をクリックしてプロパティ ウィンドウに移動します。
• ラジオボタンのテキストプロパティを「男性」に変更します。
• 同じ手順を繰り返して、「女性」に変更してください。
• また、それぞれのコントロールの ID プロパティを rd Male と rd Female に変更します。

上記の変更を行うと、以下の出力が表示されます。

出力：-

出力結果から、ラジオボタンがフォームに追加されたことがはっきりとわかります。

チェックボックス

チェックボックスは、ユーザーが複数の選択肢を選べるオプションのリストを提供するために使用されます。以下の例で、これをどのように実装できるかを見てみましょう。Webフォームに2つのチェックボックスを追加します。これらのチェックボックスは、ユーザーが学習したいかどうかを選択するオプションを提供します。 C# またはASP.Net。

ステップ1） 最初のステップは、下図に示すように、ツールボックスからチェックボックスコントロールをWebフォームにドラッグすることです。

ステップ2） チェックボックスを追加したら、チェックボックスのIDプロパティを変更します。

• チェックボックス コントロールをクリックして、プロパティ ウィンドウに移動します。
• それぞれのコントロールの ID プロパティを「chkC」および「chkASP」に変更します。

また、チェックボックス コントロールのテキスト プロパティを 'C#' に変更します。他のチェックボックス コントロールでも同じ操作を行い、'ASP.Net' に変更します。

1. チェックボックスのIDプロパティを「chkASP」に変更してください。

2. チェックボックスのIDプロパティをchkCに変更します。

上記の変更を行うと、以下の出力が表示されます。

出力：-

出力結果から、チェックボックスがフォームに追加されたことがはっきりとわかります。

ボタン

ボタンは、ユーザーがボタンをクリックすることでフォームの処理を開始できるようにするために使用されます。以下に示す現在の例で、これをどのように実装できるかを見ていきましょう。「送信」ボタンというシンプルなボタンを追加します。このボタンは、フォーム上のすべての情報を送信するために使用されます。

ステップ1） 最初のステップは、下図に示すように、ツールボックスからボタンコントロールをWebフォームにドラッグすることです。

ステップ2） ボタンを追加したら、ボタン コントロールをクリックしてプロパティ ウィンドウに移動します。 ボタン コントロールの text プロパティを Submit に変更します。 また、ボタンの ID プロパティを「btnSubmit」に変更します。

上記の変更を行うと、以下の出力が表示されます。

出力：-

出力から、ボタンがフォームに追加されたことが明確にわかります。

ASP.Netのイベントハンドラー

Web フォームを操作する場合、コントロールにイベントを追加できます。 イベントとは、アクションが実行されたときに発生するものです。 おそらく最も一般的なアクションは、フォーム上のボタンをクリックすることです。

Web フォームでは、対応する aspx.cs ファイルにコードを追加できます。 このコードを使用すると、フォーム上のボタンが押されたときに特定のアクションを実行できます。 これは通常、Web フォームで最も一般的なイベントです。 どうすればこれを達成できるかを見てみましょう。

これを簡単にしていきます。 ボタン コントロールにイベントを追加するだけで、ユーザーが入力した名前が表示されます。 これを達成するには、以下の手順に従ってください。

ステップ1） まず、Web フォーム上のボタンをダブルクリックする必要があります。これにより、Visual Studio にボタンのイベント コードが表示されます。

btnSubmit_Click イベントは、Web フォーム デザイナーでボタンをダブルクリックすると、Visual Studio によって自動的に追加されます。

ステップ2） 次に、送信イベントにコードを追加して、名前テキスト ボックスの値とユーザーが選択した場所を表示してみましょう。

protected void btnSubmit_Click(object sender, EventArgs e)
{
	Response.Write(txtName.Text + "<br/>");

	Response.Write(lstLocation.SelectedItem.Text + "<br/>");

	lblName.Visible = false;
	txtName.Visible = false;
	lstLocation.Visible = false;
	chkC.Visible = false;
	chkASP.Visible = false;
	rdFemale.Visible = false;
	btnSubmit.Visible = false;
}

Code 説明：-

1. 上記のコードは最も単純なことを行います。名前テキストボックスコントロールの値を取得し、Response オブジェクトを介してクライアントに送信します。したがって、文字列「Guru名前テキストボックスに「99」と入力すると、txtName.Text の値は「Guru99 '。
2. 次のコード行は、プロパティ「lstLocation.SelectedItem.Text」を介してリストボックスの選択値を取得します。そして、Response.Write メソッドを使用してこの値をクライアントに書き込みます。
3. 最後に、フォーム上のすべてのコントロールを非表示にします。これをしないと、すべてのコントロールと応答値が一緒に表示されてしまいます。通常、ユーザーが名前、場所、性別などの情報をフォームに入力すると、次に表示されるページには入力されていない情報のみが表示されるはずです。ユーザーは名前、性別、場所のコントロールを再度表示したくありません。しかし、ASP.Net はこのことを認識していないため、デフォルトでは、ユーザーが [送信] ボタンをクリックするとすべてのコントロールが再び表示されます。したがって、ユーザーが目的の出力のみを表示できるように、すべてのコントロールを非表示にするコードを記述する必要があります。

上記の変更を行うと、以下の出力が表示されます。

出力：-

出力画面で、以下の手順を実行してください。

1. 名前を言ってください Guru名前入力欄に99と入力してください。
2. リストボックスからバンガロールの場所を選択してください。
3. [送信] ボタンをクリックします。

これを実行すると、次のようになります。Guruページには「99」と場所「バンガロール」が表示されます。

よくあるご質問