ボタンをクリック

 C# ASP.NET で、ボタンをクリックすると "Button Click!!" と表示します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

ソースコード

  1. button.aspx のソースコードです。
    ホームページ上に HTML のソースコードを掲載するのは手間なので、以降は TEXT 形式でリンクします。
    <%@ Page Language="C#" %>
<script runat="server">

    // ページのコードをここに記述してください。
    //
    
    void Button1_Click(object sender, EventArgs e) {
    
           TextBox1.Text = "Button Click!!";
     }

</script>
<html>
<head>
</head>
<body>
    <form runat="server">
        <asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Click"></asp:Button>
        <asp:TextBox id="TextBox1" runat="server" Width="174px"></asp:TextBox>
        <!-- コンテンツをここに配置してください。 -->
    </form>
</body>
</html>
  2. <%@ Page Language="C#" %> で、Ｃ＃を使うことを宣言します。
    <script runat="server"> からが、Ｃ＃のソースコード(プログラム本体)です。
    ボタンがクリックされたときに、void Button1_Click(object sender, EventArgs e) が呼び出されます。
  3. 呼び出された Button1_Click では TextBox1 の Text 領域に "Button Click!!" を設定します。
  4. </script> で、Ｃ＃の記述を終わります。
  5. <html> から実際に視覚的に表示される HTML の部分です。
    ボタンをクリックすると、Button1_Click() 関数を呼び出します。
    onclick="Button1_Click" runat="server"

プログラムの作成

  1. ボタンをクリックすると、テキストボックスに "Button Click!!" を表示するページを作ります。
  2. WebMatrix を起動して [ASP.NET ページ] のアイコンを選択して新しいページを作成します。
  3. 下のタブで「デザイン」が選択されていることを確認します。
    左側のツールボックスに「Web コントロール」があります。
    その中の [Button] と [TextBox] をドラッグ＆ドロップして、デザインウインドウへ持って行って下さい。
  4. [Button1] をクリックすると、右下の「プロパティウインドウ」が切り替わります。
    プロパティウインドウから Text プロパティを見つけ出して "Click" に変更して下さい。
    Text プロパティを変更すると Button に表示されている文字も変更されます。
  5. [Button1] をダブルクリックすると、ソースコードが表示されるので、次のコードを追加して下さい。
    TextBox1.Text は TextBox に表示するメッセージの領域です。
        void Button1_Click(object sender, EventArgs e) {
    
           TextBox1.Text = "Button Click!!";
     }
  6. 下のタブを「すべて」に切り替えるとソースコードが表示されるので、名前を付けて保存して下さい。
  7. WebMatrix で保存すると UTF-8 で保存されるので、そのまま ASP.NET サーバーにアップロードして下さい。

【ＮＯＴＥ】

  1. サーバーにアップロードした *.aspx を呼び出して、Wev 上のボタンをクリックするとイベントが発生します。
    イベントによりサーバープログラムが再び呼び出されることを「ポストバック」と呼びます。
  2. サーバー上のページインスタンスはクライアントに出力された段階で破棄されます。
    ポストバックが発生すると、再びサーバー上にインスタンスが生成され処理されます。
  3. このように wev(HTTP)は、サーバー上に現在の状態を維持することはありません。
    そこで Network Game のように、ステージ(ページ)が変更されても現在の情報を引き継ぐには何らかの工夫が必要になります。
    その辺りが Network Game の最も解りにくい(難しい)所では無いでしょうか。 (^_^;)
  4. ポストバックが発生すると当然ながらレスポンスタイムがかかります。
    素早く応答しなければならない場合は、クライアントサイドスクリプトなどを使ってクライアント側で処理します。
  5. 情報を引き継ぐ仕組みや、クライアントサイドで処理する方法も順を追って説明して行きましょう。

ソースコードが表示されない場合は、ブラウザのメニューから「ソースの表示」を選択して下さい。
button.aspx のソースコード

残念ながら2007年末でサーバーのサービスが終わり、接続出来なくなっているので悪しからず。 (；_；)
button.aspx を呼び出す

超初心者のプログラム入門(Ｃ＃ on-line game)