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