目次 >  第3章 サンプルアプリケーション構築 > 3.4 通信処理機能 > 3.4.2 ファイルアップロード通信

3.4.2 ファイルアップロード通信

概要

本節ではClient Frameworkが提供するイベント処理機能及びファイルアップロード処理機能を用いて、クライアント・サーバ間でファイルアップロードを行う方法を説明する。
ファイルアップロード処理を行う場合は、画面からClient Frameworkが提供するファイルアップロード用のビジネスロジックを実行する。ファイルアップロード用のビジネスロジックは、ビジネスロジック入力データセットの情報をもとに、マルチパート形式でファイルをサーバにアップロードし、サーバから受信したXML電文をビジネスロジック出力データセットに変換する。 詳細は、機能説明書『FB-02 データセット変換機能』、『CM-04 ビジネスロジック生成機能』、『FC-02 ファイルアップロード機能』を参照のこと。

動作イメージ

ファイルアップロード機能3.4-1
図3.4.2-1 ファイルアップロード動作イメージ

  • 対象画面
    • ファイルアップロード画面(FileUploadForm.cs)
  • 処理概要
  1. (クライアント)アップロードボタンを押下して、イベント処理機能を実行する。
  2. (クライアント)イベント処理機能は、マルチパート名とファイルパスをビジネスロジック入力データセットにコピーし、ファイルアップロード用ビジネスロジックを実行する。
  3. (クライアント)ファイルアップロード用ビジネスロジックは、ビジネスロジック入力データセットに設定されたファイルパスに保存されたファイルを、マルチパート形式でサーバにアップロードする。
  4. (サーバ)サーバのビジネスロジックは、アップロードされたファイルをサーバのローカル領域に保存する。
  5. (サーバ)サーバのビジネスロジックは、アップロードの成否をクライアントへ送信する。
  6. (クライアント)ファイルアップロード用ビジネスロジックは、受信したXMLをビジネスロジック出力データセットに変換する。
  7. (クライアント)イベント処理機能は、ビジネスロジック出力データセットに格納された情報を画面データセットにコピーする。
  8. (クライアント)アップロードの成否をポップアップ画面で表示する。

クライアントが送信するリクエストの仕様

リクエストヘッダにはリクエスト名"multipartUpload"を設定する。リクエスト名によって実行するサーバのビジネスロジックが決定する。リクエストボディには、アップロードするファイルデータをマルチパート形式で設定する。1つのリクエストで複数のファイルデータを送信することも可能である。

  • リクエストヘッダ

表3.4.2-1 リクエストヘッダの内容

Key値 Value値 内容
RequestName multipartUpload サーバで実行するビジネスロジックを特定するためのリクエスト名。

クラアントが受信するレスポンスの仕様

アップロードの成否をXMLとして受信する。

  • レスポンスボディ
    <FileUploadDs xmln="http://com.example.dotnet/FileUploadDs.xsd">
      <ReseultTable>
        <Result>true</Result>
      </ResultTable>
    </FileUploadDs>
    

作業手順

  • 作成イメージ

ファイルダウンロード機能3.4-2
図3.4.2-2 ファイルアップロード通信作業イメージ

  1. 業務画面の確認
  2. 画面データセットの作成
  3. 画面項目と画面データセットのバインド
  4. データセット変換設定ファイルの設定
  5. ビジネスロジック設定ファイルの設定
  6. EventControllerコンポーネントのプロパティの追加
  7. EventControllerコンポーネントのプロパティの設定
  8. EventControllerコンポーネントの実行

1. 業務画面の確認

ファイルアップロード画面(FileUploadForm.cs)がVisualStudioデザイナに表示されることを確認する。また、ファイルアップロード画面が拡張フォーム(FormBase)を継承していることを確認する。

ファイルアップロード画面イメージ
図3.4.2-3 ファイルアップロード画面の確認

FileUploadForm.cs

namespace TutorialClient
{
    /// <summary>
    /// ファイルアップロードを行う画面です。
    /// </summary>
    /// <remarks>
    /// サーバへアップロードするファイルを複数選択しアップロードします。
    /// </remarks>
    public partial class FileUploadForm : FormBase
    {
        /// <summary>
        /// <see cref="FileUploadForm"/>クラスの新しいインスタンスを初期化します。
        /// </summary>
        /// <remarks>
        /// デフォルトコンストラクタです。
        /// </remarks>
        public FileUploadForm()
        {
            InitializeComponent();
        }
     }
}

2. 画面データセットの作成

2.1 画面データセットの新規作成

ファイルアップロード画面の画面データセット(FileUploadDs.xsd)を作成する。 第3章 3.1 画面作成時のポイントを参考にすること。
画面データセットには、FileテーブルとResultテーブルを追加する。Fileテーブルはファイルアップロード用に、ResultテーブルはXML受信用に使用する。
FileテーブルにはNameカラムとFilePathカラムを追加する。Nameカラムにはマルチパート要素名を、FilePathカラムにはファイルパスを設定する。マルチパート要素名についての詳細は、機能説明書『FC-02 ファイルアップロード機能』を参照のこと。 ResultTableテーブルにはResultカラムを追加する。Resultカラムには、サーバから返却されたアップロード成否フラグが格納される。

表3.4.2-2 データセットの格納場所とファイル名

ファイル格納場所ファイル名
\TutorialClient\ViewDataFileUploadDs.xsd

表3.4.2-3 作成するデータセットの名前空間

Namespacehttp://com.example.dotnet/FileUploadDs.xsd

表3.4.2-4 作成するデータセットのテーブル、カラム、データ型の一覧

Table名Column名DataType(型)
File
NameSystem.String
FilePathSystem.String
ResultTable
ResultSystem.Boolean

ファイルアップロード機能3.5-4
図3.4.2-4 画面データセットの完成形

2.2 画面データセットがツールボックスに表示されることの確認

画面データセットの作成が完了したら保存し、ビルドする。ビルド後に作成したデータセットがツールボックスに表示され、コンポーネントとして利用できるようになっていることを確認する。

ファイルアップロード機能3.5-5
図3.4.2-5 データセットがコンポーネントに追加されている例

3. 画面項目と画面データセットのバインド

3.1 画面データセットのインスタンスの追加

ツールボックスからデータセット「fileUploadDs」のインスタンスをファイルアップロード画面へ追加する。追加したデータセットのインスタンスのNameプロパティを「fileUploadDs1」から「fileUploadDs」に変更する。

データセットの初期化(FileUploadDs)
図3.4.2-6 画面データセットの追加

3.2 画面項目と画面データセットのバインド

ファイルアップロード画面のDataGridViewと画面データセットをバインドする。

表3.4.2-5 画面項目と画面データセットの対応一覧

画面項目名コントロール種別DataTable名Column(列)名
ファイルパス DataGridView File FilePath
  • DataGridViewと画面データセットをバインドするため、DataGridViewのプロパティを変更する。以下に設定項目を示す。

表3.4.2-6 DataGridViewプロパティ変更一覧

プロパティ名 設定内容 詳細
DataMember File データセットのデータテーブル名
DataSource fileUploadDs 画面データセットのインスタンス

ファイルアップロードグリッドビューのプロパティ
図3.4.2-7 DataGridViewのプロパティ

  • DataGridViewの列にDataGridViewで設定したデータテーブル(File)の列が追加されているため、表示情報として不要なName列を削除する。

グリッドビューの列の編集方法(1)
図3.4.2-8 DataGridViewタスク画面

グリッドビューの列の編集方法(2)
図3.4.2-9 Name列の削除

  • FilePath列を選択後、FilePath列のプロパティを変更し、OKボタンを押下する。設定項目を以下に示す。

表3.4.2-7 FilePath列のプロパティ変更一覧

プロパティ名 設定内容 詳細
AutoSizeMode Fill 列のサイズを指定します。
HeadertText ファイルパス 列の表示名を指定します。

グリッドビューの列の編集方法(3)
図3.4.2-10 FilePath列のプロパティ

4. データセット変換設定ファイルの設定

データセット変換設定ファイル(ConversionConfiguration.config)に、画面データセットとビジネスロジック入出力データセットの変換仕様を定義する。 コンバートIDには"upload"を、param要素にはサーバに送信する画面データセットのカラム(NameおよびFilePath)を記述する。データセット変換設定ファイルの設定に関する詳細は、機能説明書『FB-02 データセット変換機能』を参照のこと。

ConversionConfiguration.config

<?xml version="1.0" encoding="utf-8" ?>
<!-- データセット変換設定ファイル -->
<conversionConfiguration xmlns="http://www.terasoluna.jp/schema/ConversionSchema.xsd">

  ・・・省略・・・  
  
  <convert id="upload">
    <param>
      <column src="File.Name"/>
      <column src="File.FilePath"/>
    </param>
    <result>
    </result>
  </convert>

</conversionConfiguration>

5. ビジネスロジック設定ファイルの設定

ビジネスロジック設定ファイル(BLogicConfiguration.config)に、ファイルアップロードを実行するビジネスロジックを定義する。 ビジネスロジック名(name属性)には"multipartUploadBLogic"を、type属性にはClient Frameworkが提供するファイルアップロード用ビジネスロジッククラス(MultipartUploadBLogic)のアセンブリ修飾名を定義する。ビジネスロジック設定ファイルの設定に関する詳細は、機能説明書『CM-04 ビジネスロジック生成機能』を参照のこと。

BLogicConfiguration.config

<?xml version="1.0" encoding="utf-8"?>
<!-- ビジネスロジック設定ファイル -->
<blogicConfiguration xmlns="http://www.terasoluna.jp/schema/BLogicSchema.xsd">

  <!-- ユーザー定義ビジネスロジック -->
  <blogic name="logonBLogic" type="TutorialClient.BLogic.LogonBLogic, TutorialClient" />

  <!-- XML通信を行うビジネスロジック -->
  <blogic name="communicateBLogic" type="TERASOLUNA.Fw.Client.BLogic.DataSetXmlCommunicateBLogic`1, TERASOLUNA.Fw.Client" />

  <!-- ファイルアップロードを行うビジネスロジック -->
  <blogic name="multipartUploadBLogic" type="TERASOLUNA.Fw.Client.BLogic.MultipartUploadBLogic`1, TERASOLUNA.Fw.Client" />

</blogicConfiguration>

6. EventControllerコンポーネントのプロパティの追加

ツールボックスからEventControllerコンポーネントを追加する。

ファイルアップロード機能3.5-9
図3.4.2-11 EventControllerコンポーネント

7. EventControllerコンポーネントのプロパティの設定

ファイルアップロード画面クラスに追加したEventControllerコンポーネントのプロパティを設定する。 BLogicNameプロパティに 5.ビジネスロジック設定ファイルの設定 で設定したビジネスロジック名"multipartUploadBLogic"を指定することで、ファイルアップロードを行うことができる。

ファイルアップロード機能3.5-10
図3.4.2-12 uploadEventのプロパティの設定例

表3.4.2-8 uploadEventのプロパティの設定例

プロパティ名 設定値 備考
Name uploadEventインスタンスの名前。
ConvertId upload 4.データセット変換設定ファイルの設定 でデータセット変換設定ファイルに設定したコンバートID。
BLogicName multipartUploadBLogic 5.ビジネスロジック設定ファイルの設定 でビジネスロジック設定ファイルに設定した、ファイルアップロードを行うビジネスロジック名。
RequestName multipartUploadサーバで実行するビジネスロジックを特定するためのリクエスト名。
ErrorHandlerFileUploadFormIErrorHandler実装クラスのインスタンス。
ViewDatafileUploadDs画面データセットのインスタンス。

8. EventControllerコンポーネントの実行

ファイルアップロード画面(FileUploadForm.cs)に配置された3つのボタンのクリックイベントハンドラを実装する。

8.1 追加ボタンのクリックイベントハンドラ

追加ボタンのクリックイベントハンドラには、アップロードするファイルを選択し、画面データセットにマルチパート要素名とファイルパスをバインドするロジックを実装する。

FileUploadForm.cs

/// <summary>
/// 追加ボタン押下時に実行されるイベントハンドラです。
/// </summary>
/// <remarks>アップロードするファイルのファイルパスを選択します。</remarks>
/// <param name="sender">イベントのソース。</param>
/// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param>      
private void addButton_Click(object sender, EventArgs e)
{
   if (openFileDialog.ShowDialog() == DialogResult.OK)
   {
      int count = fileUploadDs.File.Rows.Count + 1;
      string name = "file"+ count.ToString("00");
      fileUploadDs.File.AddFileRow(name, openFileDialog.FileName);
      fileUploadDs.AcceptChanges();
   }
}

ファイルアップロード用データセットのマルチパート要素(nameカラム)には「"File"+連番」を、ファイルパス(FileNameカラム)にはユーザがダイアログボックスで選択したファイルパスを設定する。

8.2 クリアボタンのクリックイベントハンドラ

クリアボタンのクリックイベントハンドラには、画面データセットの内容を削除するロジックを実装する。

FileUploadForm.cs

/// <summary>
/// クリアボタン押下時に実行されるイベントハンドラです。
/// </summary>
/// <remarks>参照先のファイルパスをクリアします。</remarks>
/// <param name="sender">イベントのソース。</param>
/// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param>
private void clearButton_Click(object sender, EventArgs e)
{
   fileUploadDs.File.Clear();
   fileUploadDs.AcceptChanges();
}

8.3 アップロードボタンのクリックイベントハンドラ

アップロードボタンのクリックイベントハンドラには、 5.ビジネスロジック設定ファイルの設定 でプロパティ設定を行ったEventControllerを実行するロジックを実装する。

FileUploadForm.cs

/// <summary>
/// アップロードボタン押下時に実行されるイベントハンドラです。
/// </summary>
/// <remarks>ファイルアップロード処理を実行します。</remarks>
/// <param name="sender">イベントのソース。</param>
/// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param>       
private void uploadButton_Click(object sender, EventArgs e)
{
    // ファイルが0個でないことのチェック
    if (fileUploadDs.File.Count == 0)
    {
        MessageBox.Show(Properties.Resources.UPLOAD_SELECT);
        return;
    }

    // ファイルアップロード処理の実行
    ExecutionResult result = uploadEvent.Execute();

    //サーバとの通信成功         
    if (result.Success)
    {
        FileUploadDs resultDs = result.BLogicResultData as FileUploadDs;
        if (resultDs.ResultTable[0].Result)
        {
            //サーバビジネスロジック正常終了
            MessageBox.Show(Properties.Resources.UPLOAD_SUCCESS, Properties.Resources.UPLOAD_FORM_SUCCESS);
        }
        else
        {
            //サーバビジネスロジック業務エラー
            MessageBox.Show(Properties.Resources.UPLOAD_FAILURE, Properties.Resources.UPLOAD_FORM_FAILURE);
        }
    }
}

EventControllerのExecuteメソッドを実行して、サーバにファイルを送信する。サーバとの通信が成功した場合、Executeメソッドの戻り値ExecutionResultにSUCCESSが格納される。通信が成功してさらに、サーバのビジネスロジックも正常終了して、戻り値としてtrueが返ってきた場合は、メッセージボックスに成功メッセージを表示する。ファイルが1つも選択されなかった場合は、サーバのビジネスロジックの業務エラーとし、メッセージボックスにエラーメッセージを表示する。

動作確認

  1. 通信先URLの確認を行う。

通信先URLがアプリケーション構成ファイル(App.config)に指定されていることを確認する。アプリケーション構成ファイルのadd要素のkey属性に「BaseUrl」、value属性に「http://localhost/TutorialServerRich/Request.aspx」と設定されていることを確認する。

App.config

<?xml version="1.0" encoding="utf-8" ?>
<configuration>

 ・・・ 省略 ・・・

  <appSettings>
    <!-- 通信先URL設定 -->
    <add key="BaseUrl" value="http://localhost/TutorialServerRich/Request.aspx"/>
  </appSettings>

</configuration>
  1. クライアントアプリケーションを起動する(デバッグ⇒デバッグなしで開始)。
  2. ユーザID "tera"、パスワード "soluna" と入力し、ログオンボタンを押下する。

ログオン画面⇒メニュー画面
図3.4.2-13 ログオン画面⇒メニュー画面

  1. ファイルアップロード画面ボタンを押下する。

メニュー画面⇒ファイルアップロード画面
図3.4.2-14 メニュー画面⇒ファイルアップロード画面

  1. 追加ボタンをクリックし、送信するファイルを選択する。(複数選択可能)

ファイルアップロード画面(ファイル追加)
図3.4.2-15 ファイルアップロード画面(ファイル追加)

  1. ファイルアップロードボタンを押下し、アップロード成功画面がポップアップすることを確認する。

ファイルアップロード画面⇒アップロード成功画面
図3.4.2-16 ファイルアップロード画面⇒アップロード成功画面

  1. サーバにアップロードしたファイルが "C:\Inetpub\wwwroot\TutorialServerRich\Work" に存在することを確認する。

次節:3.4.3 ファイルダウンロード通信