【初心者用】ASP.NETのサーバーコントロールの種類をまとめてみた~その2~

ASP.NET Webフォームで使われるサーバーコントロールについてまとめてみたので、メモがてら記事にします。

それぞれのサーバーコントロールについて、固有のプロパティ等を具体例を交えてざっくり説明していきます。

(ID等の共通するプロパティは別記事で説明しているため、今回は取り上げません)


今回説明するサーバーコントロールは、以下になります。

・HyperLink コントロール

・CheckBox コントロール

・RadioButton コントロール


サンプルコードの開発環境は、

・Microsoft Visual Studio Community 2022

実行ブラウザは

・GoogleChrome


です。

1. HyperLink

HyperLinkコントロールは、設定したURLへのリンクを表示するためのコントロールです。

リンクさせる対象はテキストでも画像でも可能で、プロパティで指定します。

プロパティで指定できるので、プログラムにより動的にリンク先のURLやテキスト、画像を変更できます。


主なプロパティ

・ImageUrl
   リンクさせる画像のURL。

・NavigateUrl
リンク先のURL。

・Text
リンクさせるテキスト。

・Target
リンク先のページの表示させ方。
初期値(空白)のままだとリンク元のページからリンク先のページに遷移しますが、例えば「_blank」に設定すると、新たにタブを開き、リンク先のURLを開きます。


実用例

試しにGoogle Chromeへのリンクを貼ってみます。

プログラムコードとデザインは以下になります。

  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
  2.     
  3.     
  4.         
  5.             ハイパーリンクHyperLink
  6.     &

2. CheckBox

CheckBoxコントロールは、ユーザーの操作によるオンオフが切り替えられるチェックボックスを表示するコントロールです。


主なプロパティ

・Checked
   チェックのオン/オフ(True/False)。

・Text
表示するテキスト。

・TextAlign
チェックボックスに対するテキストの位置(左/右で選択できる)
初期値は右になっており、後述の実用例にあるプログラムコードを見るとわかりますが、左にしない限りは.aspxファイルにはTextAlignプロパティは記述されません。


実用例

試しにGoogle Chromeへのリンクを貼ってみます。

プログラムコードとデザインは以下になります。

  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
  2.     
  3.     
  4.         
  5.             
  6.         
  7.         
  8.  &nb

3. RadioButton

RadioButtonコントロールは、ユーザーの操作によるオンオフが切り替えられるラジオボタンを表示するコントロールです。


と説明するとCheckBoxコントロールとほぼ同じじゃないかと思われますが、見た目以外の違いは2点あります。

1点目は、ラジオボタンの特性としてユーザー側はクリック時にオフ→オンの切り替えはできてもオン→オフの切り替えはできないこと。

(後述のGroupNameプロパティでグループ化したラジオボタンが複数ある場合、別のラジオボタンをオンにすると元々オンだったラジオボタンはオフになります)


2点目は、GroupNameプロパティがあり、この値が同じラジオボタンは1つしかチェックできないようになっていることです。


主なプロパティ

・Checked
   チェックのオン/オフ(True/False)。

・Groupname
複数のラジオボタンをグループ分けする際のグループ名。
同一のGroupNameを持つラジオボタンはどれか一つしか選択できなくなる。

・Text
表示するテキスト。

・TextAlign
ラジオボタンに対するテキストの位置(左/右で選択できる)


実用例

試しに、アンケートのようなページを作ってみます。

まず、画面のプログラムコードとデザインは以下になります。

  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
  2.     
  3.     
  4.         好きな食べ物アンケート
  5.         
  6.    &nbs