ASP.NETを使ってみよう

なせばなる。なさねばならぬ。何事も

Hello, World !

1. Visual Web Developer 起動

VWD起動画面

起動時に、どのディレクトリをサーバルートにするのか質問されるだろう。

IIS が入っているはずなので、c:\Inetpub\wwwroot にしておこう。それは IIS のルート・ディレクトリだ。

誰かが http//オレのドメイン/ って打ったときに、IIS は c:\Inetpub\wwwroot にある Default.asp や Default.html を探してファイルがあればその中身をレスポンスするということ。

2. Default.aspx の作成

右ペインのソリューションエクスプローラーから、c:\Inetpub\wwwroot を選択して青く反転させておく。つまり、今反転しているディレクトリに、新たにファルを作成するということだ。

ソリューションエクスプローラ

その後、[ ファイル ] - [ 新しいファイル ] を選択すると以下の画面になる。

ファイルの新規追加

名前は Default.aspx のままで OK。好みの問題ではあるが、言語は Visual C# にする。今後 C# でやっていくので、Visual Basic がいいという人にはすまんと謝っておく。

追加ボタンを押すと、Default.aspx ができあがる。

3. タイトルの記入

このようなソースが表示されているはずだ。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        ここに本文を記入していく
    </div>
    </form>
</body>
</html>

とりあえず、タイトル部分は変更しよう。

タグが変なところでインデントしている。しかも空白 4 文字なので Dreamweaver 派の私は生理的に受け付けないが、VWD を使う以上、我慢することにする。

ちなみに、CTRL +A でソースを全て選択し、右クリックすれば「選択範囲のフォーマット」というメニューが表示される。それは VWD にあわせたインデントをしてくれるコマンドである。

4. ソースからデザインビューへ変更

今見ているのがソース・ビューなので、これをデザイン・ビューに変える。

デザインの方に切り替えればいいだけ。

その前に、[ ツール ] - [ オプション ] - [ HTML デザイナ ] - [ 表示 ] から、「非可視要素の詳細を表示」にチェックをつけておこう。

デザインビューで <br /> や <form> や <div> タグが表示されないのは、精神衛生上良くない。知らないところに空タグが入っているなど、想像しただけで寒気がする。

VWD だけに限らないが、HP 作成ソフトは、<p> で段落されているのか、<br /> で改行されているのかはっきりしないことがままあるので、上記チェックは欠かせない。

5. Hello, World ! を ASP.NET で入れてみる

Hello, World ! と表示させたいだけなら、そのまま「Hello, World !」と入力すれば良さそうなものだが、それでは芸がない。というかこの 1 ページ作ったオレが馬鹿みたいである。

従ってここは、あえて ASP.NET を使って表示させてみる。

一番上に、<h1> タグで「ASP.NET 実験室」と見出しを入れた。タイトルくらいは必要だろう。

次に、段落（ P タグ）を入れてある。

デザイン・ビュー

左側のツールボックスにある Label を D&D で BODY 部分（ P タグの間）に持ってくる。

するとこうなる。

見づらいかもしれないが、段落と段落の間に Label が入っているのである。

ソース・ビューで見るとはこんなカンジ。

<p><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></p>

見てもらえば分かるように、ASP.NET の悩ましいタグがある。これがサーバで処理され、span タグとして HTML 出力されるのである。

この状態でプレビューすると、

<p><span なんたら>Label</span></p>

と出力されることになる。Label なんて表示されてもうれしくないのである。

では、この Label という文字を別の言葉に変更してみよう。

画面右下にプロパティというペインがある。先ほど D&D した Label を選択した状態で、プロパティ・ペインをスクロールさせてみると、Text と書かれたプロパティが出てくる。

プロパティ・ペイン

今、Label となっているのを Hello,World ! に変更しよう。

6. 出力

実際このページでその動作を確認してほしい。