RadioButton で画像を選択

C# ASP.NET で RadioButton で画像を選択して表示します。

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

プログラムの説明

  1. WebMatrix を起動して [ASP.NET ページ] のアイコンを選択して新しいページを作成します。
  2. 左側のツールボックスから [Image] をドラッグ&ドロップして、デザインウインドウに貼り付けて下さい。
    右下のプロパティウインドウから [ImageUrl] を選択して画像ファイル(img/jgu.gif)を設定します。
  3. 続いて、三個の [RadioButton] をデザインウインドウに貼り付けて下さい。
    三個の [RadioButton] に、右下のプロパティウインドウから GroupName(Group1) を設定します。
    これで三個の [RadioButton] から一個だけを選択できるようになります。
  4. 続いて [Button] をデザインウインドウに貼り付けて下さい。
    [Button] をダブルクリックすると、ソースコードが表示されるので、次のコードを追加して下さい。
    RadioButton で選択された画像ファイルの名前を Image に設定するコードです。
        // ページのコードをここに記述してください。
        void Button1_Click(object sender, EventArgs e)
        {
            if (RadioButton1.Checked)         Image1.ImageUrl = "../image/jgu.gif";
            else  if (RadioButton2.Checked)   Image1.ImageUrl = "../image/jchi.gif";
            else  if (RadioButton3.Checked)   Image1.ImageUrl = "../image/jpa.gif";
        }
        
  5. 下のタブを「すべて」に切り替えるとソースコードが表示されるので、名前を付けて保存して下さい。
  6. 保存したソースファイルと画像ファイルを ASP.NET サーバーにアップロードして下さい。
    私のプログラムでは、画像ファイルを img のフオルダにアップロードしています。
    jgu.gif, jchi.gif, jpa.gif の画像は、このページ先頭から取得して下さい。
  7. RadioButton をクリックして画像が切り替わることを確認して下さい。

【NOTE】

イベントには「ポストバック」と「非ポストバック」があります。
ボタンやリンクボタンをクリックすると「ポストバック」が発生してサーバーに制御が渡ります。
TEXT の入力や、チェックボックス,ラジオボタンの状態変更は「非ポストバック」でクライアント側で処理されます。

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

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

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