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.net_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コントロール

RadioButtonList
<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/>