1.1.2 ASP.NET(Web Devloper 2005 Express)

ここでは、1.1.1 システムをASP.NETで構築したらどうなるかについて説明する。
なお、本ページの最後に、作成したASP.NETのファイルとダウンロードファイルを用意している。必要に応じて参照されたい。

ASP.NETは、aspxがサフィックスファイルとなるファイルをWebサーバー上に格納し、ASP.NETがこれを解釈してHTMLを生成することでWebシステムが動作する。

このaspxファイルには、通常のhtml形式であるが、以下の太字で示すようなASP.NET独特のタブが存在する。これらASP.NET独特のタブがASP.NETサーバーで解釈され処理が施される。

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" 
     Style="z-index: 100; left: 36px; position: absolute;top: 66px"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" 
     Style="z-index: 102; left: 76px; position: absolute;top: 106px" Text="Button" />
        <br />
        テスト</div>
    </form>
</body>
</html>

これらの特別なタグをWebサーバー上で処理を行いデータベースなどの値を表示するのがASP.NETである。内部的には、このようなタグ形式のファイルであるが、Web設計画面を通じて簡単に作成できるのがASP.NETの特徴である。
また、Webアプリケーション開発に便利なタグ(カレンダー、ツリーメニュー、ログイン)が用意されており、生産性の高い点も特徴の一つとなっている。

Web画面上のボタンなどをクリックするとイベントが発生するが、これらイベント発生時の処理をVBやC++を使ってコーディングを行うことができる。

ASP.NETでは、Web開発のツールになる機能が沢山あり、これらの機能を利用して「1.1.1 典型システム」開発をトライした。
しかしながら、ASP.NETが想定しているWebシステム向けた機能が用意されているので、これを利用することがASP.NET開発の特徴が良く分かる。そこで、ASP.NETの標準の機能で「1.1.1 典型システム」開発を行い、出来たところ・出来なかったところを明確にする。Product.zipとして添付したので利用されたい。


1.Webシステムの構築方法
ASP.NETでは、複数のWebページから構成されるWebサイトを作成し、Webサイト内のWebページを設計することによりWebシステムを構築する。Webページには、以下に示すように画面に左にツールボックスがあり、真ん中に設計するWebページ画面がある。ツールボックス中のツールを真ん中のWebページにドラッグして設計する。



データベースの内容を表示するためには、まず、SQLデータベースの部品であるSqlDataSource部品をツールボックスから選び、Webページにドラッグする。


次に、Webページ上のSqlDataSourceツールのSqlDataSource1の右上にある矢印部分で左ボタンをクリックして、接続のデータベースやクエリコマンドを、次にようにして指定する。データソースの構成画面では、①→②→③の順に指定する。


データベースのクエリ指定は、②で行っており、SQLコマンドを発行する必要がない点が特徴である。

データソースが定義できたので、あとは、GridViewをツールボックスからドラッグして、GridViewのデータソースとして、今作成したデータソースを指定する、すると、クエリ結果がWeb画面に表示される。




2. 典型システム構築実施例
ここでは、上記の開発手法に従って、「1.1.1 典型システム」を構築してみた結果を説明する。


このように「1.1.1 典型システム」とほぼ同様のWebシステムを設計することができたが、商品一覧にIDというデータベースのプライマリインデックスフィールドを表示せざるおえない。

上記のシステムを構築するには、
まず、商品一覧表示するaspxファイルとしてDefault.aspxを記述しました。このDefault.aspxでは、ルールボックスから以下のツールを利用しています。
  • SqlDataSource1
    1. ツールボックスに存在するSqlDataSourceを取り出し、「データソースの構成」を選ぶ、次に「Selectステートメントの構成」でテーブルを選び、「列」として全てを表す「*」を選ぶ

    2. 「Selectステートメントの構成」画面の「詳細設定」ボタンをクリックし、「INSERT、UPDATE、および DELETEステートメントの生成」をオンした後、「オプティミスティック同時実行制御」をオンにする。

※ これにより、GridViewで用意されているSQL実行ツールが利用できるようになる。
※ データーベースに、プライマリキーが存在していない場合には「INSERT、UPDATE、および DELETEステートメントの生成」
  • GridView1
    1. ツールボックスに存在するGirdViewを取り出し、プロパティ上の「DataKeyNames」の値としてプライマリキーである「id」を指定する。
    2. データソースをSqlDataSourceのデータ名を指定する。
    3. 「列の編集」を選び、表示列として 「編集」ボタン<ButtonField>, 「削除」ボタン<CommandField>,「ID」<id>,「商品コード」<code>,「商品名」<name>,「金額」<price> を定義する

    4. ButtonFieldの「編集」をクリックした際には、以下の手続きを書いておく。GridView1_RowCommand手続きが呼び出されるので、以下のコードを予めコーディング指定おく。
Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As    System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
        Dim row As GridViewRow
        Dim i As Integer
        If e.CommandName = "myButton1" Then
            With e.CommandSource
                row = .Rows.Item(CInt(e.CommandArgument))
                For i = 0 To .Columns.Count
                    If .Columns.Item(i).HeaderText = "ID" Then
                        Exit For
                    End If
                Next i
            End With
            Server.Transfer("update.aspx?id=" + row.Cells(i).Text, False)
        End If
    End Sub

このこーディングでは、RowComanndイベントが起動された、そのコマンド名(CommandName)を調べて、編集ボタンがクリックされたことにより起動されたのかどうか判断する。編集ボタンの名前である「myButton1」の場合には、選択された行(row)から、ラベル名としてIDの付くセルを探しだし、その値がプライマリインデックス値であるので、これをupdate.aspx画面を開く際のパラメータとして指定する。

        Server.Transfer("update.aspx?id=" + row.Cells(i).Text, False)

なお、選択行の中でIDを見つけ出す際に、IDセルを非表示にすると、正しくIDセルの値を取り出すことができない。ASP.NETでGridViewから選択行の値を取り出す際には、必ず、その値がGridView値として表示されていることが必要となる。

だけで、以下の画面を作成しています。
また、Buttonは「新規作成」ボタンとなりますが、別のWeb画面に移動する場合には、Server.Transferを利用してジャンプしています。
サブページ (1): 1.1.2.1 ソースコード
ċ
Product.zip
(137k)
dirac paul,
2010/01/09 0:37
Comments