Silverlight をインストールするには、ここをクリックします*
Japan変更|すべてのMicrosoft のサイト|サインイン
MSDN
|MSDN ライブラリ|デベロッパー センター|ダウンロード情報|開発ツール製品|コミュニティ|ご意見・ご要望|サイトマップ
MSDN Home > ステップ 7 > Visual Studio 2005 による分散アプリケーション開発編 > 第 4 回 プレゼンテーション層の開発 - その 1 : Web アプリケーション開発

ステップ 7 ハンズオン 「Visual Studio 2005 による分散アプリケーション開発編」

第 4 回 プレゼンテーション層の開発 - その 1

Web アプリケーション開発

マイクロソフト株式会社 デベロッパー&プラットフォーム統括本部
エバンジェリスト 辻郷 隆史

最終更新日 2006 年 1 月 25 日

目標 Visual Studio 2005 による Web アプリケーション開発
使用技術
  • Visual Studio 2005 / Visual Basic 2005
  • .NET Framework 2.0 / ASP.NET 2.0
  • Windows Server 2003 / IIS 6.0
取り上げるトピックス
  • Web サービスの利用方法
  • Web アプリケーションの作成方法
前提知識
関連記事

Web アプリケーション開発

図 1. サンプル アプリケーション / プレゼンテーション層アプリケーション

プレゼンテーション層の開発については、 Web アプリケーションと Windows アプリケーションの 2 つの種類のアプリケーションを実装します。

今回実装する Web アプリケーションとしては、「第 3 回 ビジネス層の開発」で作成したサービス コンポーネントを使用します。

図 2. サンプル アプリケーション / Web アプリケーション

Web アプリケーション内に "SessionEntry" クラスを作成し、 Web サービスを利用するための認証情報の設定や、データ操作に関する調整などを行います。

これらを使用し、各処理を実装します。

実装する処理SessionEntry クラスWeb サービス.メソッド
セッションリスト参照処理GetEntrySessionEntry.GetEntry
セッション参加登録処理UpdateEntryRow → UpdateEntrySessionEntry.UpdateEntry

前回のハンズオンにて作成した、サンプル アプリケーション用ソリューション "Event2005" を開きます。

Visual Studio 2005 を起動し、メニューより [ ファイル ] - [ 開く ] - [ プロジェクト/ソリューション ] の順に選択後、対象のソリューションファイル "Event2005.sln" を開きます。

ソリューションへ Web アプリケーション用の Web サイト "EventUIWeb" を追加します。

メニューより [ ファイル ] - [ 追加 ] - [ 新しい Web サイト ] の順に選択します。

[ 新しい Web サイトの追加 ] ダイアログにて、 "EventUIWeb" Web サイトを作成します。

テンプレート場所言語
ASP.NET Web サイトHTTPhttp://localhost/EventUIWebVisual Basic

図 3. Web サイト "EventUIWeb" の追加

なお、デフォルトで作成される "default.aspx" は使用しないため削除します。

EventUIWeb プロジェクトから、「第 3 回 ビジネス層の開発」 で作成した、 "SessionEntry" Webサービスを参照します。

メニューより [ Web サイト ] - [ Web 参照の追加 ] を選択します。

[ Web 参照の追加 ] ダイアログにて、[ このソリューションの Web サービス ] を選択後、 "SessionEntry" サービスを選択します。

図 4. Web サービス "SessionEntry" への参照の追加

Web 参照名へ "SessionEntryWS" を入力後、 [ 参照の追加 ] ボタンをクリックします。

図 5. Web 参照 "SessionEntryWS" の追加

Web サイト "EventUIWeb" へクラス "SessionEntry" を追加し、セッションリスト参照処理およびセッション参加登録処理のコードを実装します。

メニューより [ Web サイト ] - [ 新しい項目の追加 ] の順に選択後、クラス "SessionEntry"を追加します。

テンプレート名前言語
クラスSessionEntry.vbVisual Basic

図 6. クラス "SessionEntry" の追加

下記のダイアログにて [ はい ] を選択し、 "SessionEntry" クラスを App_Code フォルダ内に配置します。

図 7. App_Code フォルダへの配置

まず始めに、認証情報として使用する NetworkCredential クラスを使用する、下記の赤字のコードを記述します。

Public Class SessionEntry
    ' 認証情報
    Private nc As System.Net.NetworkCredential

    Public Sub New()
        ' 認証情報設定
        nc = New System.Net.NetworkCredential("user01", パスワード)
    End Sub

End Class

認証情報として使用する NetworkCredential クラスを Private フィールドとして宣言し、コンストラクタ内にてWeb サービスの認証情報へ基本認証を行うためのユーザー名およびパスワードを設定します。

※ユーザー名およびパスワードについては、 今回のサンプル用に認証専用のユーザーを作成するなど Web サービスが動作するマシンで認証が可能な任意のユーザー名およびパスワードを設定ください。

次に、"GetEntry" メソッドおよびメソッドコードを実装します。

Public Class SessionEntry
    …
    Public Function GetEntry(ByVal EventID As Integer) As SessionEntryWS.SessionEntryDataSet
        Dim ds As New SessionEntryWS.SessionEntryDataSet()
        Dim se As New SessionEntryWS.SessionEntry()

        ' 認証情報設定
        se.Credentials = nc

        ' セッションリスト取得
        ds = se.GetEntry(EventID)

        ' 取得したデータセットを返す
        Return ds
    End Function
End Class

認証情報を設定した後、 Web メソッド "GetEntry" よりセッションリストを取得し "SessinoEntryDataSet" を返します。

更に、セッション参加登録処理である "UpdateEntry" メソッドおよびメソッドコードを実装します。

Public Class SessionEntry
    …
    Public Function UpdateEntry(ByVal ds As SessionEntryWS.SessionEntryDataSet) As Integer
        Dim se As New SessionEntryWS.SessionEntry()

        ' 認証情報設定
        se.Credentials = nc

        ' セッション参加登録
        Return se.UpdateEntry(ds)
    End Function
End Class

認証情報を設定した後、 Web メソッド "UpdateEntry" にてセッション参加登録を行い、戻り値をそのまま呼び出し元へ返します。

最後に、 GridView コントロールよりオブジェクト データソースとして使用するために "UpdateEntryRow" メソッドおよびメソッドコードを実装します。

Public Class SessionEntry
    …
    Public Sub UpdateEntryRow(ByVal org_EventID As Integer, _
        ByVal org_ProfileID As Integer, _
        ByVal org_SessionID As String, _
        ByVal org_SessionTitle As String, _
        ByVal org_StartDate As DateTime, _
        ByVal org_EndDate As DateTime, _
        ByVal org_Entried As Boolean, _
        ByVal Entried As Boolean)
        Dim status As Integer
        Dim ds As New SessionEntryWS.SessionEntryDataSet()
        
        ' セッション参加登録データの対象行 DataRow 作成
        ds.SessionEntry.AddSessionEntryRow(org_EventID, org_ProfileID, org_SessionID, _
            org_SessionTitle, org_StartDate, org_EndDate, org_Entried)
        ds.AcceptChanges()  ' 更新扱いとするため、一旦受け入れ
        
        ' セッション登録情報変更
        CType(ds.SessionEntry.Rows(0), SessionEntryWS.SessionEntryDataSet.SessionEntryRow).Entried = Entried
        status = UpdateEntry(ds)
        
        ' ステータスが 0 以外はアプリケーション例外をスロー
        Select Case status
            Case 0
            Case 1
                Throw New ApplicationException("その他エラー")
            Case 2
                Throw New ApplicationException("同時実行制御エラー")
            Case Else
                Throw New ApplicationException("ステータス エラー")
        End Select
    End Sub
End Class

GridView コントロールでの行単位の更新処理に対応したパラメータとして、更新前の値 (全ての列) と更新後の値 ( Entried 列のみ) を定義します。

更新行を生成するために、パラメータより、更新前の値でデータセット "SessionEntryDataSet" を1行追加し、 AcceptChangesにより行への変更を受け入れた後で、更新後の値を設定し更新行 (RowState = DataRowState.Modified) を生成します。

セッション参加登録処理である、同じクラス内の "UpdateEntry" メソッドを呼び出し、戻り値が 0 以外の場合は、アプリケーション例外をスローします。

※上記の行単位の更新処理および例外でのステータス制御などは、 GridView コントロールにて更新およびエラーハンドリングの機能をそのまま利用するために実施しています。

次のステップでのオブジェクト データソースとして使用するために、"SessionEnrty.vb" ファイルを一度保存します。 (メニュー [ファイル] - [App_Code/SessionEntry.vb の保存])

Web フォームのデザインおよび上記 "SessionEntry" クラスへのデータソースの設定を行います。

まずは、Web フォーム "SessionEntryPage" を追加します。

メニューより [ Web サイト ] - [ 新しい項目の追加 ] の順に選択後、Web フォーム "SessionEntryPage" を追加します。

テンプレート名前言語
Web フォームSessionEntry.Page.aspxVisual Basic

図 8. Web フォーム "SessionEntryPage" の追加

追加した Web フォーム "SessionEntryPage" へ、 Label コントロールと GridView コントロールを下記の通り 1つずつ配置します。

Web フォームのデザインなどについては、 「 10 行でズバリ !! ASP.NET Web フォームによる Web アプリケーション開発 (VB)」を参照ください。

図 9. Web フォーム "SessionEntryPage" デザイン

GridView コントロールへのデータソースの設定を行います。

まず始めに、データソース構成ウィザードによるデータソースの作成および設定を実施します。

配置した GridView のスマート タグをクリックし、 [ データ ソースの選択 ] - [ 新しいデータ ソース ] を選択します。

図 10. GridView タスク / 新しいデータソースの追加

データ ソースの種類として [ オブジェクト ] を選択し、 ID へ "SessionEntryObjectDataSource" を入力後、 [ OK ] ボタンをクリックします。

図 11. オブジェクト データソース "SessionEntryObjectDataSource" の追加

ビジネス オブジェクトとして "SessionEntry" を選択後、 [ 次へ ] ボタンをクリックします。

図 12. ビジネス オブジェクト "SessionEntryObjectDataSource" の選択

SELECT 操作に対応するメソッドとして "GetEntry" を選択します。

図 13. データ メソッド "GetEntry" の選択 (SELECT)

続いて、 [ UPDATE ] タブをクリックし、UPDATE 操作に対応するメソッドとして "UpdateEntryRow" を選択後、 [ 次へ ] ボタンをクリックします。

図 14. データ メソッド "UpdateEntryRow" の選択 ( UPDATE )

パラメータとして "EventID" に対応する QueryString を下記の通り設定後、 [ 完了 ] ボタンをクリックします。

名前パラメータ ソースQueryStringFieldDefaultValue
EventIDQueryStringEventID2

図 15. パラメータ "EventID" 定義

ここまでで、下記の作業が完了しました。

  • オブジェクト データソース "SessionEntryObjectDataSource" の作成
  • GridView へのデータソース "SessionEntryObjectDataSource" の設定
  • データソースへのデータ メソッド定義
  • SELECT 操作 / GetEntry メソッド
    UPDATE 操作 / UpdateEntryRow メソッド

  • データソースへのパラメータ "EventID" の設定

次に、データソースへ同時実行制御のための設定を行います。

作成されたオブジェクトデータソース "SessionEntryObjectDataSource" を選択し、同時実行制御を行うためのプロパティを以下の通り設定します。

プロパティ設定値設定内容
ConflictDetectionCompareAllValuesデータ メソッド(UPDATE)へは、更新前と更新後の両方の値を渡す
OldValuesParameterFormatStringorg_{0}更新前の値には先頭に “org_” が付いたパラメータ名でデータ メソッド (UPDATE) へ渡す

更に、 GridView の編集を有効にします。

配置した GridView のスマート タグをクリック後、 [ 編集を有効にする ] をチェックし編集を行うための列 (CommandField) を追加します。

図 16. GridView タスク / 編集を有効にする

最後に、フィールドの設定を行い "EventID" と "ProfileID" フィールドを非表示に設定します。

配置した GridView のスマート タグをクリックし、 [ 列の編集 ] をクリックします。

[ フィールド ] ダイアログにて、 "EventID" および "ProfileID" のプロパティ "Visible" を "False" に設定します。

図 17. フィールドの設定

以上で、 Web フォームのデザインおよび "SessionEntry" クラスへのデータソースの設定が完了しました。

図 18. Web フォーム "SessionEntryPage"

GridView コントロールへエラーハンドリングを行うためのイベント ハンドラを作成します。

GridView のプロパティ ウィンドウにて、イベント ボタンをクリックしイベントを表示後、RowUpdated をダブルクリックし、イベント ハンドラのコードを実装します。

図 19. イベント "RowUpdated"

Protected Sub GridView1_RowUpdated(…) Handles GridView1.RowUpdated
    If e.Exception Is Nothing Then
        ' 正常終了
        Me.Label1.Text = "更新完了"
        Me.Label1.ForeColor = Drawing.Color.Blue
    Else
        ' 例外発生
        If TypeOf e.Exception Is ApplicationException Then
            Me.Label1.Text = e.Exception.InnerException.Message
        Else
            Me.Label1.Text = e.Exception.Message
        End If
        Me.Label1.ForeColor = Drawing.Color.Red
        ' イベントパラメータへ例外処理実施済みを設定
        e.ExceptionHandled = True
    End If
End Sub

RowUpdated イベント ハンドラでは、更新処理時に発生した例外などについてのハンドリングを行うことが出来ます。

ここでは、例外が発生した場合は Label コントロールへ例外メッセージを設定し、イベントパラメータへ例外が処理済みであることを通知しています。 (処理済みであることを通知しないとハンドリングされていない例外となり、アプリケーションが終了します。)

以上で、実装は完了です。

作成した Web アプリケーションから実行させるために "EventUIWeb" をスタートアップ プロジェクトへ設定します。

ソリューション エクスプローラ上で、 " EventUIWeb" Web サイトを選択後、メニューより [ Web サイト ] - [ スタートアップ プロジェクトに設定 ] を選択し、 "EventUIWeb" をスタートアップ プロジェクトへ設定します。

更に、 Web フォーム "SessionEntryPage.aspx" をスタート ページへ設定します。

ソリューション エクスプローラ上で、 " SessionEntryPage.aspx" を選択後、メニューより [ Web サイト ] - [ スタート ページに設定 ] を選択し、 "SessionEntryPage.aspx" をスタート ページへ設定します。

最後に、 "EventUIWeb" をビルドします。

メニューより [ ビルド ] - [ Web サイトのビルド ] を選択し、正しくビルド出来ることを確認します。

作成した Web アプリケーションを実行します。

"EventUIWeb" の実行 (デバックなしで開始) を実施し、Web アプリケーションを実行します。

実行すると、セッションリストが表示されます。

図 20. セッションリスト参照

セッションリスト参照については、以下の流れで実施されます。

図 21. セッションリスト参照

次に、任意の行の [ 編集 ] をクリックし登録情報を変更します。

図 22. セッション参加登録変更

登録情報変更後、 [ 更新 ] をクリックしセッション参加登録を実施します。

図 23. セッション参加登録

セッション参加登録については、以下の流れで実施されます。

図 24. セッション参加登録

なお、同じセッションに対して編集を行うと例外処理により、同時実行制御エラーが表示されます。

図 25. 同時実行制御エラー

例外処理については、以下の流れで実施されます。

図 26. 例外処理

ここまでで、サンプル アプリケーション "イベント 2005" の Web アプリケーション開発が完了しました。

次は「その 2 : Windows アプリケーション開発」 について説明します。


Top of Page Top of Page

Microsoft