サーバーコントロールを使う

サーバーコントロール

ASP.netにはTextBoxやButtonなど、WPFやSilverlightなどで使われるXAMLコントロールと共通の多くのコントロールを使うことができます。

基本的にはWPFやSilverlightと同じようにコントロールをドラッグアンドドロップで配置して、イベントハンドラを取得してコードビハインドにロジックを追加するという形になります。

 

サーバーコントロールを配置する

デフォルトのままではHTMLコードのみの表示なのでデザイナーを表示させましょう。

aspxファイルを開いている状態で下の方にある[並べて表示]を押します。

6

これでデザイナーが表示されるので[ツールボックス]からコントロールをデザイナーにドラッグアンドドロップしましょう。

 

7

 

 

今回はTextBox2つとLabelとButtonを1つずつ配置します。

 

プロパティはプロパティウインドウから変更しましょう。

8

以下の4つのコントロールを配置しましょう。

コントロール Id Text
TextBox TextBox_Value1
TextBox TextBox_Value2
Label Label_Result
Button Button_Calc 計算

 

ソースコードはこのようになります。

<!--bodyタグだけ抜粋-->
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="値1"></asp:Label>
        <asp:TextBox ID="TextBox_Value1" runat="server"></asp:TextBox> 
        <asp:Label ID="Label2" runat="server" Text="値2"></asp:Label>
        <asp:TextBox ID="TextBox_Value2" runat="server"></asp:TextBox>
    </div>
        <p>
            <asp:Label ID="Label_Result" runat="server" Text="Label"></asp:Label>
        </p>
        <asp:Button ID="Button_Calc" runat="server" OnClick="Button_Calc_Click" Text="計算" />
    </form>
</body>

 

イベントハンドラを登録する

次に、Buttonをクリックした状態でプロパティウインドウから、雷のようなマークをクリックします。

9

 

これでイベントハンドラを登録できるのでClickの右のテキストボックスをダブルクリックします。

10

 

コードビハインドにClick時に呼ばれるメソッドが生成されました。

11

 

Button_Calc_Clickメソッドをこのようにします。

protected void Button_Calc_Click(object sender, EventArgs e)
{
    int result=int.Parse(TextBox_Value1.Text) + int.Parse(TextBox_Value2.Text);
    Label_Result.Text =string.Format("{0}",result);
}

サーバーコントロールはIDプロパティ値によってコードビハインドから参照することができます。

なのでIDがTextBox_Value1なTextBoxにアクセスするには、TextBox_Value1と入力してTextプロパティを取得します。

2つのTextBoxを足した値をLabelのTextプロパティに代入しましょう。

 

サーバーコントロールをつかうことできました。

12

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.