Asp.net-basic-controls
ASP.NET-基本コントロール
この章では、ASP.NETで利用可能な基本的なコントロールについて説明します。
ボタンコントロール
ASP.NETは、3種類のボタンコントロールを提供します。
- ボタン:長方形の領域内にテキストを表示します。
- リンクボタン:ハイパーリンクのように見えるテキストを表示します。
- 画像ボタン:画像を表示します。
ユーザーがボタンをクリックすると、ClickとCommandの2つのイベントが発生します。
ボタンコントロールの基本構文:
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click"/>
ボタンコントロールの一般的なプロパティ:
Property | Description |
---|---|
Text | The text displayed on the button. This is for button and link button controls only. |
ImageUrl | For image button control only. The image to be displayed for the button. |
AlternateText | For image button control only. The text to be displayed if the browser cannot display the image. |
CausesValidation | Determines whether page validation occurs when a user clicks the button. The default is true. |
CommandName | A string value that is passed to the command event when a user clicks the button. |
CommandArgument | A string value that is passed to the command event when a user clicks the button. |
PostBackUrl | The URL of the page that is requested when the user clicks the button. |
テキストボックスとラベル
テキストボックスコントロールは通常、ユーザーからの入力を受け付けるために使用されます。 テキストボックスコントロールは、TextMode属性の設定に応じて、1行以上のテキストを受け入れることができます。
ラベルコントロールを使用すると、ページの実行ごとに変更できるテキストを簡単に表示できます。 変更しないテキストを表示する場合は、リテラルテキストを使用します。
テキストコントロールの基本構文:
<asp:TextBox ID="txtstate" runat="server" ></asp:TextBox>
テキストボックスとラベルの共通プロパティ:
Property | Description |
---|---|
TextMode | Specifies the type of text box. SingleLine creates a standard text box, MultiLIne creates a text box that accepts more than one line of text and the Password causes the characters that are entered to be masked. The default is SingleLine. |
Text | The text content of the text box. |
MaxLength | The maximum number of characters that can be entered into the text box. |
Wrap | It determines whether or not text wraps automatically for multi-line text box; default is true. |
ReadOnly | Determines whether the user can change the text in the box; default is false, i.e., the user can not change the text. |
Columns | The width of the text box in characters. The actual width is determined based on the font that is used for the text entry. |
Rows | The height of a multi-line text box in lines. The default value is 0, means a single line text box. |
ラベルコントロールに最もよく使用される属性は「テキスト」です。これは、ラベルに表示されるテキストを意味します。
チェックボックスとラジオボタン
チェックボックスには、ユーザーがチェックまたはチェック解除できる単一のオプションが表示され、ラジオボタンはユーザーが1つのオプションのみを選択できるオプションのグループを表示します。
ラジオボタンのグループを作成するには、グループ内の各ラジオボタンのGroupName属性に同じ名前を指定します。 1つのフォームで複数のグループが必要な場合は、グループごとに異なるグループ名を指定します。
フォームが最初に表示されるときにチェックボックスまたはラジオボタンを選択する場合は、Checked属性をtrueに設定します。 グループ内の複数のラジオボタンのChecked属性がtrueに設定されている場合、最後のボタンのみがtrueと見なされます。
チェックボックスの基本構文:
<asp:CheckBox ID= "chkoption" runat= "Server">
</asp:CheckBox>
ラジオボタンの基本構文:
<asp:RadioButton ID= "rdboption" runat= "Server">
</asp: RadioButton>
チェックボックスとラジオボタンの一般的なプロパティ:
Property | Description |
---|---|
Text | The text displayed next to the check box or radio button. |
Checked | Specifies whether it is selected or not, default is false. |
GroupName | Name of the group the control belongs to. |
リストコントロール
ASP.NETは次のコントロールを提供します
- ドロップダウンリスト、
- リストボックス、
- ラジオボタンリスト、
- チェックボックスリスト、
- 箇条書きリスト。
これらのコントロールにより、ユーザーはリストから1つ以上のアイテムを選択できます。 リストボックスとドロップダウンリストには、1つ以上のリストアイテムが含まれています。 これらのリストは、コードまたはListItemCollectionエディターによってロードできます。
リストボックスコントロールの基本構文:
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
</asp:ListBox>
ドロップダウンリストコントロールの基本構文:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
リストボックスとドロップダウンリストの一般的なプロパティ:
Property | Description |
---|---|
Items | The collection of ListItem objects that represents the items in the control. This property returns an object of type ListItemCollection. |
Rows | Specifies the number of items displayed in the box. If actual list contains more rows than displayed then a scroll bar is added. |
SelectedIndex | The index of the currently selected item. If more than one item is selected, then the index of the first selected item. If no item is selected, the value of this property is -1. |
SelectedValue | The value of the currently selected item. If more than one item is selected, then the value of the first selected item. If no item is selected, the value of this property is an empty string (""). |
SelectionMode | Indicates whether a list box allows single selections or multiple selections. |
各リストアイテムオブジェクトの共通プロパティ:
Property | Description |
---|---|
Text | The text displayed for the item. |
Selected | Indicates whether the item is selected. |
Value | A string value associated with the item. |
次のことに注意することが重要です。
- ドロップダウンリストまたはリストボックスのアイテムを操作するには、コントロールのItemsプロパティを使用します。 このプロパティは、リストのすべてのアイテムを含むListItemCollectionオブジェクトを返します。
- ユーザーがドロップダウンリストまたはリストボックスから別のアイテムを選択すると、SelectedIndexChangedイベントが発生します。
ListItemCollection
ListItemCollectionオブジェクトは、ListItemオブジェクトのコレクションです。 各ListItemオブジェクトは、リスト内の1つのアイテムを表します。 ListItemCollectionのアイテムには0から番号が付けられます。
lstcolor.Items.Add( "Blue")のような文字列を使用してリストボックスに項目が読み込まれると、リスト項目のTextプロパティとValueプロパティの両方が指定した文字列値に設定されます。 別の方法で設定するには、リストアイテムオブジェクトを作成してから、そのアイテムをコレクションに追加する必要があります。
ListItemCollectionエディターは、ドロップダウンリストまたはリストボックスにアイテムを追加するために使用されます。 これは、アイテムの静的リストを作成するために使用されます。 コレクションエディターを表示するには、スマートタグメニューから[アイテムの編集]を選択するか、コントロールを選択してから、プロパティウィンドウの[アイテム]プロパティから省略記号ボタンをクリックします。
ListItemCollectionの共通プロパティ:
Property | Description |
---|---|
Item(integer) | A ListItem object that represents the item at the specified index. |
Count | The number of items in the collection. |
ListItemCollectionの一般的なメソッド:
Methods | Description |
---|---|
Add(string) | Adds a new item at the end of the collection and assigns the string parameter to the Text property of the item. |
Add(ListItem) | Adds a new item at the end of the collection. |
Insert(integer, string) | Inserts an item at the specified index location in the collection, and assigns string parameter to the text property of the item. |
Insert(integer, ListItem) | Inserts the item at the specified index location in the collection. |
Remove(string) | Removes the item with the text value same as the string. |
Remove(ListItem) | Removes the specified item. |
RemoveAt(integer) | Removes the item at the specified index as the integer. |
Clear | Removes all the items of the collection. |
FindByValue(string) | Returns the item whose value is same as the string. |
FindByValue(Text) | Returns the item whose text is same as the string. |
ラジオボタンリストとチェックボックスリスト
ラジオボタンリストには、相互に排他的なオプションのリストが表示されます。 チェックボックスリストには、独立したオプションのリストが表示されます。 これらのコントロールには、コントロールのItemsプロパティを介して参照できるListItemオブジェクトのコレクションが含まれています。
ラジオボタンリストの基本構文:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
</asp:RadioButtonList>
チェックボックスリストの基本構文:
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>
チェックボックスとラジオボタンリストの一般的なプロパティ:
Property | Description |
---|---|
RepeatLayout | This attribute specifies whether the table tags or the normal html flow to use while formatting the list when it is rendered. The default is Table. |
RepeatDirection | It specifies the direction in which the controls to be repeated. The values available are Horizontal and Vertical. Default is Vertical. |
RepeatColumns | It specifies the number of columns to use when repeating the controls; default is 0. |
箇条書きと番号付きリスト
箇条書きリストコントロールは、箇条書きリストまたは番号付きリストを作成します。 これらのコントロールには、コントロールのItemsプロパティを介して参照できるListItemオブジェクトのコレクションが含まれています。
箇条書きの基本的な構文:
<asp:BulletedList ID="BulletedList1" runat="server">
</asp:BulletedList>
箇条書きの一般的なプロパティ:
Property | Description |
---|---|
BulletStyle | This property specifies the style and looks of the bullets, or numbers. |
RepeatDirection | It specifies the direction in which the controls to be repeated. The values available are Horizontal and Vertical. Default is Vertical. |
RepeatColumns | It specifies the number of columns to use when repeating the controls; default is 0. |
ハイパーリンク制御
HyperLinkコントロールは、HTML <a>要素に似ています。
ハイパーリンクコントロールの基本構文:
<asp:HyperLink ID="HyperLink1" runat="server">
HyperLink
</asp:HyperLink>
次の重要なプロパティがあります。
Property | Description |
---|---|
ImageUrl | Path of the image to be displayed by the control. |
NavigateUrl | Target link URL. |
Text | The text to be displayed as the link. |
Target | The window or frame which loads the linked page. |
画像制御
画像コントロールは、Webページに画像を表示するために使用されます。画像が使用できない場合は、代替テキストが使用されます。
画像コントロールの基本的な構文:
<asp:Image ID="Image1" runat="server">
次の重要なプロパティがあります。
Property | Description |
---|---|
AlternateText | Alternate text to be displayed in absence of the image. |
ImageAlign | Alignment options for the control. |
ImageUrl | Path of the image to be displayed by the control. |