Image を表示

C# ASP.NET で Image を表示します。
.aspx から生成される .html に付いても説明します。

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

プログラムの説明

  1. WebMatrix を起動して [ASP.NET ページ] のアイコンを選択して新しいページを作成します。
  2. 左側のツールボックスから [Image] をドラッグ&ドロップして、デザインウインドウへ持って行って下さい。
    右下のプロパティウインドウから [ImageUrl] を選択して画像ファイルを設定します。
    ImageUrl="../image/cs.jpg"
  3. 下のタブを「すべて」に切り替えるとソースコードが表示されるので、名前を付けて保存して下さい。
  4. 保存したファイルと画像ファイルを ASP.NET サーバーにアップロードして下さい。
    私のプログラムでは、画像ファイル(cs.jpg)を img のフォルダにアップロードしています。
    cs.jpg はページ下部のリンク「image.aspx を呼び出す」から取得することが出来ます。
  5. ページ下部の「image.aspx を呼び出す」をクリックして正常に画像が表示されることを確認して下さい。
    ブラウザからソースの表示を選択して HTML のソースコードを表示して下さい。
    これが .aspx から生成された HTML のソースコードです。

生成された HTML の説明

image.aspx がサーバーで実行され、結果として生成された HTML のソースコードです。
ブラウザからソースの表示を選択するとソースコードが表示されます。
  1. form タグはユーザーがデータを入力して送信する「フォームを作成」する基本となるタグです。
    ここではサーバーで実行するプログラム(.aspx など)の URL と、プログラムに渡すデータを定義します。
    name オプションには、その入力フィールドに記入されたデータを、他のフィールドと区別するためのIDを指定します。
    method オプションには、ポストバックのときにデータを渡す方法で get と post があります。
    get は URL と共にデータを送るのに対して、post は URL とデータを別に送ります。
    一般的に秘匿性に優れた post が使われます。
    action オプションには、フォームに入力されたデータを処理する CGI などのプログラムの URL を指定します。
    ?S=blogid は、検索エンジンなどでよく見かける「クエリ」と呼ばれるもので、S の値として blogid を設定しています。
    id オプションには、name で記述された form のIDが設定されています。
    <form name="ctl00" method="post" action="image.aspx?S=blogid" id="ctl00">
  2. div は段落を設定するタグです。
    <div>
  3. input は行フィールドを設定するタグです。
    type オプションに "hidden" が設定されているので画面には表示されません。
    name と id オプションには、input のIDが設定されています。
    value は一般的には入力された値ですが、ここではポストバックでサーバーに渡すコントロールを復元する情報が暗号化されて格納されています。
    サーバーではポストバックが起こったときに、これらの情報を元に現在の状態(ページ)を復元します。
    ポストバックで渡される詳しい情報は、また後ほど調べてみましょう。
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTQ0OTY5OTIyOWRkhsgP/lqIyNX1PbNq7dlyRJnoYq0=" />
  4. img は画像を表示するタグです。
    id オプションには、img のIDを指定します。
    src オプションには、画像ファイルの名前を指定します。
    style オプションは、表示のスタイルを指定します。
    <img id="Image1" src="img/cs.jpg" style="border-width:0px;" />

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

生成された HTML のソースコード

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

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