ASP.NET Webフォーム サーバーコントロール

Literalコントロール

Text属性
<asp:Literal ID="myLiteral" runat="server" Text="Text属性"></asp:Literal>

Labalコントロールとの違い
コンパイル後はText属性のみになる。
(CSS等で装飾できない)

Labelコントロール

Text属性
<asp:Label ID="myLabel" runat="server" Text="Text属性"></asp:Label>

Literalコントロールとの違い
・コンパイル後、Text属性で出力される。
(CSS等で装飾可能)

TextBoxコントロール

<asp:TextBox ID="TextBox1" TextMode="SingleLine" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" TextMode="MultiLine" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" TextMode="Password" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" TextMode="Date" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" TextMode="DateTimeLocal" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox6" TextMode="Month" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox7" TextMode="Number" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox9" TextMode="Range" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox10" TextMode="Search" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox11" TextMode="Phone" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox12" TextMode="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox13" TextMode="Time" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox14" TextMode="Url" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox15" TextMode="Color" runat="server"></asp:TextBox>

※.Net Framework4.5以上で動作

RadioButtonコントロール

<asp:RadioButtonList
　　ID="RadioButtonList1" runat="server"
　　RepeatDirection="Vertical">
　　<asp:ListItem Selected="True">A型</asp:ListItem>
　　<asp:ListItem>B型</asp:ListItem>
　　<asp:ListItem>O型</asp:ListItem>
　　<asp:ListItem>AB型</asp:ListItem>
</asp:RadioButtonList>

<asp:RadioButtonList
　　ID="RadioButtonList2" runat="server"
　　RepeatDirection="Horizontal">
　　～
</asp:RadioButtonList>

<asp:RadioButtonList
　　ID="RadioButtonList3" runat="server"
　　RepeatColumns="2">
　　～
</asp:RadioButtonList>

<asp:RadioButtonList
　　ID="RadioButtonList4" runat="server"
　　RepeatDirection="Horizontal"
　　TextAlign="Left">
　　～
</asp:RadioButtonList>

<asp:RadioButtonList
　　ID="RadioButtonList5" runat="server"
　　RepeatLayout="Table"
　　CellSpacing="20"
　　RepeatColumns="2">
　　～
</asp:RadioButtonList>

HyperLinkコントロール

HyperLink
<asp:HyperLink ID="HyperLink1" runat="server"
　　NavigateUrl="https://office-yone.com/ProProgramer/index.html"
　　Target="_blank"
　　Text="HyperLink">
</asp:HyperLink>

LinkButtonコントロール

LinkButton
<asp:LinkButton
　　ID="LinkButton1" runat="server"
　　PostBackUrl="https://office-yone.com/">
　　LinkButton
　　</asp:LinkButton>

<asp:LinkButton
　　ID="LinkButton2" runat="server"
　　OnClientClick="fnJump()">JavaScript実行</asp:LinkButton>
<script type="text/javascript">
　　function fnJump() {
　　　　window.alert('Hello World');
　　}
</script>
HyperLinkとの違い
・OnClientClickイベントを設定できる
・ソース画面でイベント処理できる

Buttonコントロール

～.aspx
<asp:Button
　　runat="server" id="astButton" text="aspText"
　　OnClick="astButton_click"
　　OnClientClick="clientClick()"
/>
<script type="text/javascript">
　　function clientClick() {
　　　　window.alert('Hello World');
　　}
</script>
～.aspx.cs
protected void aspButton_click(object sender, EventArgs e) {
　Console.WriteLine(sender.ToString());
}
※OnClientClick → OnClickの順で処理される

<asp:Button
　　runat="server" id="astButton" text="aspText"
　　OnClick="astButton_click"
　　OnClientClick="return clientClick()"
/>
<script type="text/javascript">
　　function clientClick() {
　　　　～
　　　　return true/false;
　　}
</script>
clientClick()の処理結果がfalseの場合はastButton_clickが処理されない

非同期通信コントロール

ポストバックを発生させずにサーバ側処理を行う為のコントロール
・AJAX Extensionsコントロール
　ScriptManagerコントロール
　UpdatePanelコントロール
　UpdateProgressコントロール
・AJAX Control Toolkit
　ToolkitScriptManagerコントロール
　UpdatePanelAnimationExtenderコントロール
「ASP.NET Webフォーム Ajax利用」参照
ポストバックとは？
「ポストバックを発生させない方法」参照
「ポストバックを発生させる方法」参照

JavaScript用ID設定

<asp:Content
　ID="Content1"
　ContentPlaceHolderID="ContentPlaceHolder1"
　Runat="Server">
　　<asp:TextBox
　　　ID="aspText1"
　　　runat="server" /><br/>
　　<asp:TextBox
　　　ID="aspText2"
　　　runat="server"
　　　ClientIdMode="Static" /><br/>
</asp:Content>
↓
<input
　name="～"
　type="text"
　IDが自動的に変更される
　id="ContentPlaceHolder1_aspText1" /><br/>
<input
　name="～"
　type="text"
　設定したIDが維持される
　id="aspText2" /><br/>