LightSwitch HTML Client で画像ファイルをアップロードする方法

LightSwitch で画像ファイルをアップロードするのに Desktop Client (Silverlight Clieht) の力を借りる方法 を前に紹介しました。
とはいえやはり HTML Client からもアップロードしたいですよね。

残念ながら(少なくとも Preview 2 の段階では)デフォルトの状態では画像ファイルをアップロードすることはできません。表示は型を “Image” にするだけで問題ないのですが。

幸い HTML Client のチュートリアル に画像ファイルをアップロードする方法が含まれているので、それをそのまま使ってみます。
※ということで、チュートリアルを見ればやり方は全て分かる内容です。この記事は日本語で読めることとチュートリアル以外にもそのまま使えることが確認できたということだと考えてください。なおチュートリアルからもらってくるソースは VB なのですが、追加する先は Client (HTML / JavaScript のプロジェクト) なので C# プロジェクトにもそのまま使えます。

 


1. HTML Client チュートリアルをダウンロードして解凍する

こちらの HTML Client チュートリアル をダウンロードします。適当な場所に解凍してください。今回お世話になるファイルは “image-uploader.js” および “image-uploader-base64-encoder.aspx” の二つです。

image

 

2. 画像アップロード用のソースをソリューションに追加する

ソリューションエクスプローラーを “File View” に切り替えて、[Client] (HTML Client)–[Scripts]–[Add]–[Exist Items] で“image-uploader.js” および “image-uploader-base64-encoder.aspx” をソリューションに追加します。

image

 

3. index.htm の編集

index.htm を開いて body の末尾に image-uploader.jp の参照を追加します。

SNAGHTML889c888

 

4. 画像アップロード用ダイアログを追加

ソリューションを “Logical View” に戻して ”AddressDetail” 画面のデザイナー画面を表示します。
この後さらにダイアログの中身は変更するのですが、まずはここまで作成します。

image

 

5. 画像アップロード用のコントロールに変更

“Photo” を Custom Control に変更して “_render” メソッドを追加します。

image

前に “_postRender” を使いました。”_postRender” は DOM が完成した後にスタイルや属性などを変更する際などに使います。それに対して ”_render” メソッドは DOM を組み立てる際に呼び出されるメソッドです。ここで任意の要素を DOM に挿入する、つまりカスタムコントロールをここで自由に作れるということです。

なお、この状態だとダイアログがつぶれて表示されてしまうので、サイズを変更しておくとよいです。

image

 

“_render” メソッドの記述は簡単です。前の手順で追加した “image-uploader.js” で定義された “createImageUploader” を呼び出すだけです。これが 画像アップロード用の要素を追加してくれます。

SNAGHTML89a7693

 

6. 画像アップロードダイアログを呼び出すアクションを追加

詳細情報にボタンを追加し、先ほど作成したダイアログを呼び出すアクションを定義します。ボタンの Display Name は変更するのがよいでしょうね。

image

 

以上で完成です。
実際に動作させてみるとこんな感じです。

imageimage
imageimage

広告
カテゴリー: LightSwitch タグ: , パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中