サイト内検索: ナビゲーション リンクのスキップ

  昨日:6  本日:3  合計:80844


Visual Web Developerの操作(動的ページ1)

 いよいよ、本番です。
 簡単な動的ページ(asp,aspxの拡張子)を作ってみましょう。

■ テキストボックスの内容をラベルに表示する

1.VWD2008を起動して、Webサイトを作成(印)をクリックし、テンプレートから「ASP.NET Webサイト」を選択し、場所に「マイドキュメント\Visual Studio 2008\WebSites\WebSite1」と表示されている最後の「\WebSite1」を「aspxHomePage」に書き換えて[OK]ボタンをクリックします。
 なお同時に、言語が「Visual Vasic」になっていることも確認してください。
 

2.右側のソリューションエクスプローラに「App_Data」フォルダ、Default.aspx、web.configが作成され、Default.aspxというページがソースビューで表示されます。
 デザインビューに切り替えて、任意の場所にカーソルをセットし、左側ツールボックスの「標準」タブ、「TextBox」をダブルクリック、またはドラッグ&ドロップします。
 
※初期設定では、ページを開始するビューがソースビューに設定されています。上部メニューの[ツール]→[オプション]の「全般」より、デザインビューに設定しておくと便利です。
※もし、ソリューションエクスプローラやツールボックスが表示されていない場合は、上部メニューの[表示]から該当のウインドウ名を選択します。また、ツールボックス等を自動的に隠さないようにするには、ボックス内右上の画鋲のようなボタンで「常に表示」設定にできます。

3.左側ツールボックスの「標準」タブより、「TextBox」と「Button」、「Label」を下記のようにレイアウトしてください。
 次に、デザインビューにレイアウトされた「Button」をダブルクリックします。
 

4.右側ソリューションエクスプローラの「Default.aspx」が展開され、「Default.aspx.vb」ファイルが開きます。これがASP.NETのプログラム部分です。
 

 下記のように、Protected Sub Button1_Click・・・ ~ End Sub の間に、Label1.Text = TextBox1.Text と書き足します。
 これは、「Button1がクリックされたら、Label1の表示文字とTextBox1に入力された文字とを同じにしなさい。」という意味になります。

1
2
3
4
5
6
7
8
9
10

Partial Class _Default
  Inherits System.Web.UI.Page

  Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

    Label1.Text = TextBox1.Text
  End Sub
End Class

5.早速、実行([Ctrl]+[F5]キーを押すか、上部メニューから[デバッグ]→[デバッグなしで開始]を選択)してみましょう。
 テキストボックスに「こんにちわ」と入力し、ボタンをクリックしてみましょう。
 "Label"という文字が、"こんにちわ"と書き換わるのが確認できるはずです。
 

 このように、プログラムによって書き換えるページを動的ページといいます。
 今回はとても簡単な例でしたが、データベースと連動して検索をするようなページも比較的(PerlやPHP等と比べると)簡単に作ることができます。


Copyright (C) 2009-2009 ケンゾー
初版:2009年4月17日、最終更新:2009年4月21日
http://www.xox.bz/