ASP.NET コントロール: チェックBox、ラジオボタン、リストBox、テキストボックス、ラベル
ジェイコブ・リー
Web フォームへの ASP.Net コントロールの追加
ASP.Net には、テキスト ボックスやラベルなどのコントロールをフォームに追加する機能があります。
Web フォームで使用できる他のコントロールを見て、それらの共通プロパティのいくつかを見てみましょう。
この例では、次の機能を備えたフォームを 1 つ作成します。
- ユーザーが自分の名前を入力できる機能。
- ユーザーが居住する都市を選択するオプション
- ユーザーが性別のオプションを入力できる機能。
- ユーザーが学びたいコースを選択するオプション。 どちらにも選択肢はあるだろう C# とASP.Net
各コントロールを詳しく見てみましょう。 これらを追加して、上記の機能を備えたフォームを構築しましょう。
ステップ1） 最初のステップは、デモウェブフォームのフォームデザイナーを開くことです。これを実行すると、ツールボックスからコントロールをドラッグできるようになります。 Webフォーム.
デザイナー Web フォームを開くには、
- ソリューション エクスプローラーで Demo.aspx ファイルを右クリックし、
- メニュー オプションの [デザイナーの表示] を選択します。
上記の手順を実行すると、以下に示すようにフォーム デザイナーが表示されるようになります。
それでは、コントロールを XNUMX つずつ追加していきましょう
ラベル コントロール
ラベル コントロールは、フォーム上でユーザーにテキストやメッセージを表示するために使用されます。ラベル コントロールは通常、他のコントロールと一緒に使用されます。一般的な例としては、テキスト ボックス コントロールと一緒にラベルが追加されます。ラベルは、テキスト ボックスに入力する内容をユーザーに示します。以下に示す例を使用して、これを実装する方法を見てみましょう。「名前」というラベルを使用します。これは、後のセクションで追加されるテキスト ボックス コントロールと一緒に使用されます。
ステップ1） 最初のステップは、以下に示すように、ツールボックスから「ラベル」コントロールを Web フォームにドラッグすることです。
ステップ2） ラベルを追加したら、次の手順に従います。
- ラベル コントロールを右クリックしてプロパティ ウィンドウに移動します。
- 「プロパティ」メニューオプションを選択します
ステップ3） プロパティ ウィンドウで、Text プロパティの名前を Name に変更します。
同様に、コントロールの ID プロパティ値も lblName に変更します。 コントロールに意味のある ID を指定すると、コーディング段階でコントロールにアクセスしやすくなります。 これを以下に示します。
上記の変更を行うと、次の出力が表示されます。
出力：-
Web フォームに名前ラベルが表示されることがわかります。
テキストボックス
テキスト ボックスは、Web フォーム アプリケーションでユーザーがテキストを入力できるようにするために使用されます。以下に示す例を使用して、これをどのように実装するかを見てみましょう。ユーザーが名前を入力できるテキスト ボックスを 1 つフォームに追加します。
ステップ1） 最初のステップは、以下に示すように、ツールボックスからテキストボックスコントロールをWebフォームにドラッグすることです。
以下は、テキストボックスコントロールがフォームに配置された後のフォームデザイナーでの表示です。
ステップ2） テキストボックスを追加したら、ID プロパティを変更する必要があります。
- テキストボックスコントロールを右クリックしてプロパティウィンドウに移動し、
- 次にプロパティを選択します
- テキスト ボックスの id プロパティを txtName に変更します。
上記の変更を行うと、次の出力が表示されます。
出力：-
リストボックス
リストボックスは、Web フォーム上の項目のリストを表示するために使用されます。以下に示す例を使用して、これをどのように実装するかを見てみましょう。都市の場所をいくつか保存するために、フォームにリスト ボックスを追加します。
ステップ1） 最初のステップは、以下に示すように、ツールボックスからリストボックスコントロールをWebフォームにドラッグすることです。
ステップ2） リストボックスをフォームにドラッグすると、別のサイド メニューが表示されます。このメニューで、[アイテムの編集] メニューを選択します。
ステップ3） リスト項目をリストボックスに追加できるダイアログ ボックスが表示されます。
- 「追加」ボタンをクリックしてリスト項目を追加します。
- リスト項目のテキスト値に名前を付けます (この場合はムンバイ)。 手順 1 と 2 を繰り返して、マンガロールとハイデラバードのリスト項目を追加します。
- [OK]ボタンをクリックします
ステップ4） プロパティ ウィンドウに移動し、コントロールの ID プロパティ値を次のように変更します。 最初の場所.
上記の変更を行うと、次の出力が表示されます。
出力：-
出力から、リストボックスがフォームに追加されたことが明確にわかります。
ラジオボタン
ラジオ ボタンは、ユーザーが項目を選択できるリストを表示するために使用されます。 以下に示す例でこれを実装する方法を見てみましょう。 男性/女性オプションのラジオボタンを追加します。
ステップ1） 最初のステップは、ツールボックスから「ラジオボタン」コントロールを Web フォームにドラッグすることです (下の画像を参照)。必ず 2 つのラジオ ボタンを追加してください。XNUMX つは「男性」のオプション用、もう XNUMX つは「女性」のオプション用です。
ステップ2） ラジオボタンを追加したら、「text」プロパティを変更します。
- 「ラジオボタン コントロール」をクリックしてプロパティ ウィンドウに移動します。
- ラジオボタンのテキストプロパティを「男性」に変更します。
- 同じ手順を繰り返して「女性」に変更します。
- また、それぞれのコントロールの ID プロパティを rd Male と rd Female に変更します。
上記の変更を行うと、次の出力が表示されます。
出力：-
出力から、ラジオ ボタンがフォームに追加されたことがはっきりとわかります。
チェックボックス
チェックボックスは、ユーザーが複数の選択肢から選択できるオプションのリストを提供するために使用されます。以下に示す例を使用して、これをどのように実装するかを見てみましょう。Webフォームに2つのチェックボックスを追加します。これらのチェックボックスは、ユーザーに学習するかどうかのオプションを提供します。 C# またはASP.Net。
ステップ1） 最初のステップは、以下に示すように、ツールボックスからチェックボックスコントロールをWebフォームにドラッグすることです。
ステップ2） チェックボックスを追加したら、チェックボックス ID プロパティを「chkASP」に変更します。
- チェックボックス コントロールをクリックして、プロパティ ウィンドウに移動します。
- それぞれのコントロールの ID プロパティを「chkC」および「chkASP」に変更します。
また、チェックボックス コントロールのテキスト プロパティを 'C#' に変更します。他のチェックボックス コントロールでも同じ操作を行い、'ASP.Net' に変更します。
- チェックボックスのIDプロパティを「chkASP」に変更します。
- チェックボックスのIDプロパティをchkCに変更します。
上記の変更を行うと、次の出力が表示されます。
出力：-
出力から、チェックボックスがフォームに追加されたことが明確にわかります。
ボタン
ボタンは、ユーザーがボタンをクリックしてフォームの処理を開始できるようにするために使用されます。 以下に示す現在の例でこれを実装する方法を見てみましょう。 「送信」ボタンというシンプルなボタンを追加します。 これは、フォーム上のすべての情報を送信するために使用されます。
ステップ1） 最初のステップは、以下に示すように、ツールボックスからボタンコントロールをWebフォームにドラッグすることです。
ステップ2） ボタンを追加したら、ボタン コントロールをクリックしてプロパティ ウィンドウに移動します。 ボタン コントロールの text プロパティを Submit に変更します。 また、ボタンの ID プロパティを「btnSubmit」に変更します。
上記の変更を行うと、次の出力が表示されます。
出力：-
出力から、ボタンがフォームに追加されたことが明確にわかります。
ASP.Netのイベントハンドラー
Web フォームを操作する場合、コントロールにイベントを追加できます。 イベントとは、アクションが実行されたときに発生するものです。 おそらく最も一般的なアクションは、フォーム上のボタンをクリックすることです。
Web フォームでは、対応する aspx.cs ファイルにコードを追加できます。 このコードを使用すると、フォーム上のボタンが押されたときに特定のアクションを実行できます。 これは通常、Web フォームで最も一般的なイベントです。 どうすればこれを達成できるかを見てみましょう。
これを簡単にしていきます。 ボタン コントロールにイベントを追加するだけで、ユーザーが入力した名前が表示されます。 これを達成するには、以下の手順に従ってください。
ステップ1） まず、Web フォーム上のボタンをダブルクリックする必要があります。これにより、Visual Studio にボタンのイベント コードが表示されます。
Web フォーム デザイナーでボタンをダブルクリックすると、Visual Studio によって btnSubmit_Click イベントが自動的に追加されます。
ステップ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;
}
コードの説明:-
- 上記のコード行は最も単純な処理を行います。名前テキスト ボックス コントロールの値を取得し、Response オブジェクトを介してクライアントに送信します。したがって、名前テキスト ボックスに文字列「Guru99」を入力する場合、txtName.A の値は「Guru99」になります。
- 次のコード行は、プロパティ 'lstLocation.SelectedItem.text' を介してリストボックスの選択値を取得します。次に、この値を Response.Write メソッドを介してクライアントに書き込みます。
- 最後に、フォーム上のすべてのコントロールを非表示にします。これを行わないと、すべてのコントロールと応答値が一緒に表示されます。通常、ユーザーがフォームに名前、場所、性別などのすべての情報を入力すると、ユーザーに表示される次のページには、入力されなかった情報のみが表示されます。ユーザーは、名前、性別、場所のコントロールを再度表示したくありません。しかし、ASP.Net はこれを認識せず、そのため、既定では、ユーザーが [送信] ボタンをクリックすると、すべてのコントロールが再度表示されます。したがって、ユーザーが希望する出力だけを表示できるように、すべてのコントロールが非表示になるようにコードを記述する必要があります。
上記の変更を行うと、次の出力が表示されます。
出力：-
出力画面で、次の手順を実行します。
- 名前テキストボックスにGuru99という名前を入力してください
- バンガロールのリストボックスから場所を選択してください
- 「送信」ボタンをクリックします
これを実行すると、ページに「Guru99」と場所「Bangalore」が表示されます。
要約
- In ASP.Netラベル、テキスト ボックス、リスト ボックスなどの標準コントロールをフォームに追加できます。
- 各コントロールにはイベントを関連付けることができます。 最も一般的なイベントはボタンのクリック イベントです。 これは、情報を Web サーバーに送信する必要がある場合に使用されます。