【初心者用】ASP.NETのサーバーコントロールの種類をまとめてみた~ボタン系編~
公開日: 2022/9/19
更新日: 2022/9/19
ASP.NET Webフォームで使われるサーバーコントロールについてまとめてみたので、メモがてら記事にします。
それぞれのサーバーコントロールについて、固有のプロパティ等を具体例を交えてざっくり説明していきます。
(ID等の共通するプロパティは別記事で説明しているため、今回は取り上げません)
今回説明するサーバーコントロールは、以下になります。
・Button コントロール
・LinkButton コントロール
・ImageButton コントロール
サンプルコードの開発環境は、
・Microsoft Visual Studio Community 2022
実行ブラウザは
・GoogleChrome
です。
それぞれのサーバーコントロールについて、固有のプロパティ等を具体例を交えてざっくり説明していきます。
(ID等の共通するプロパティは別記事で説明しているため、今回は取り上げません)
今回説明するサーバーコントロールは、以下になります。
・Button コントロール
・LinkButton コントロール
・ImageButton コントロール
サンプルコードの開発環境は、
・Microsoft Visual Studio Community 2022
実行ブラウザは
・GoogleChrome
です。
1. Button
Buttonコントロールは、画面上に、クリックによる動作が可能なボタンを配置するコントロールです。
他のボタン系コントロール(後述するLinkButton、ImageButton)もそうですが、ポストバックを発生させます。
ポストバックとは、Webページにおいてデータを送信する際、別ページのURLではなくボタンを押したページと同じURLを指定する方式のことで、これによりボタンを押した後も同一ページをユーザーに使わせたい場合、再度同じページソースを作成する手間が省けます。
後述するものも含めて、こういったボタン系コントロールを使用することで、ユーザー側が入力した値をWebサーバーに送信し、処理を行わせるための「引き金」となるボタンを作成することができます。
ボタンに表示させるテキスト。
ページのプログラムコードとデザインは以下になります。
ページ内の処理は以下になります。
以上のうち、赤字表記した箇所がボタンを押した際の動作になります。
赤字表記一行目にある「Handles Button1.Click」が、「Button1(ボタン名)をクリックしたら動く」という意味になります。
今回は、ラベルのテキストを「ボタン押したよ」と変化させるだけのシンプルなものです。
実際に起動すると、以下のようになります。
ボタンを押すと、以下のようになります。
他のボタン系コントロール(後述するLinkButton、ImageButton)もそうですが、ポストバックを発生させます。
ポストバックとは、Webページにおいてデータを送信する際、別ページのURLではなくボタンを押したページと同じURLを指定する方式のことで、これによりボタンを押した後も同一ページをユーザーに使わせたい場合、再度同じページソースを作成する手間が省けます。
後述するものも含めて、こういったボタン系コントロールを使用することで、ユーザー側が入力した値をWebサーバーに送信し、処理を行わせるための「引き金」となるボタンを作成することができます。
主なプロパティ
・Textボタンに表示させるテキスト。
実用例
試しにページに簡単な処理を行うボタンを配置してみます。ページのプログラムコードとデザインは以下になります。
- <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm3.aspx.vb" Inherits="WebApplication1.WebForm3" %>
-
-
-
-
-
-
-
ページ内の処理は以下になります。
- Public Class WebForm3
- Inherits System.Web.UI.Page
- Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
- End Sub
- Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
- Label1.Text = "ボタン押したよ"
- End Sub
- End Class
以上のうち、赤字表記した箇所がボタンを押した際の動作になります。
赤字表記一行目にある「Handles Button1.Click」が、「Button1(ボタン名)をクリックしたら動く」という意味になります。
今回は、ラベルのテキストを「ボタン押したよ」と変化させるだけのシンプルなものです。
実際に起動すると、以下のようになります。
ボタンを押すと、以下のようになります。
2. LinkButton
LinkButtonコントロールは、Buttonコントロールと同じく、画面上に、クリックによる動作が可能なボタンを配置するコントロールです。
他のボタンコントロール系との違いとして、外観がラベルなどと同じ「文字列」であるという点があります。
(他サイトへのリンクとなるHyperLinkと酷似していますが、あちらがイベントを発生させずに他URLに遷移させるものに対し、こちらは同URL内でイベントを発生させているという違いがあります)
ボタンに表示させるテキスト。
ページのプログラムコードとデザインは以下になります。
ページ内の処理は以下のようになります。
Buttonコントロール時と同じく、赤で強調した箇所がLinkButton1(リンクボタン名)をクリックした際の処理になります。
実行すると、以下のようになります。
ボタンをクリックすると、以下のようにラベル部分が変わります。
他のボタンコントロール系との違いとして、外観がラベルなどと同じ「文字列」であるという点があります。
(他サイトへのリンクとなるHyperLinkと酷似していますが、あちらがイベントを発生させずに他URLに遷移させるものに対し、こちらは同URL内でイベントを発生させているという違いがあります)
主なプロパティ
・Textボタンに表示させるテキスト。
実用例
試しにページに簡単な処理を行うボタンを配置してみます。ページのプログラムコードとデザインは以下になります。
- <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm3.aspx.vb" Inherits="WebApplication1.WebForm3" %>
-
-
-
-
このリンクボタン
-
-
-
ページ内の処理は以下のようになります。
- Public Class WebForm3
- Inherits System.Web.UI.Page
- Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
- End Sub
- Protected Sub LinkButton1_Click(sender As Object, e As EventArgs) Handles LinkButton1.Click
- Label1.Text = "を押したな?"
- End Sub
- End Class
Buttonコントロール時と同じく、赤で強調した箇所がLinkButton1(リンクボタン名)をクリックした際の処理になります。
実行すると、以下のようになります。
ボタンをクリックすると、以下のようにラベル部分が変わります。
3. ImageButton
ImageButtonコントロールは、Button、LinkButtonコントロールと同じく、画面上に、クリックによる動作が可能なボタンを配置するコントロールです。
他のボタンコントロール系との違いとして、外観が画像になっています。
ページ内の処理は以下のようになります。
Buttonコントロール時と同じく、赤で強調した箇所がLinkButton1(リンクボタン名)をクリックした際の処理になります。
実行すると、以下のようになります。
ボタンをクリックすると、以下のようにラベル部分が変わります。
主なプロパティ
・AlternationText 画像が表示されない際に代わりに表示されるテキスト。 ・ImageAlign ボタンに表示させる画像の位置(右、左、中央など指定)。 ・ImageUrl ボタンに表示させる画像のURL。実用例
試しにページに簡単な処理を仕込んだボタンを配置してみます。 画面のプログラムとデザインは以下になります。
- <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm3.aspx.vb" Inherits="WebApplication1.WebForm3" %>
-
-
-
-
-
-
-
-
-
ページ内の処理は以下のようになります。
- Public Class WebForm3
- Inherits System.Web.UI.Page
- Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
- End Sub
- Protected Sub LinkButton1_Click(sender As Object, e As EventArgs) Handles LinkButton1.Click
- Label1.Text = "を押したな?"
- End Sub
- End Class
Buttonコントロール時と同じく、赤で強調した箇所がLinkButton1(リンクボタン名)をクリックした際の処理になります。
実行すると、以下のようになります。
ボタンをクリックすると、以下のようにラベル部分が変わります。
4. さいごに
今回はボタンについて、3種類を説明しましたが、「クリックすることで処理をスタートさせる引き金にする」という点はどれも同じで、違いは外観のみです。
基本はニーズに応じて選ぶとよいでしょう。
基本はニーズに応じて選ぶとよいでしょう。