第 2 章 Web サイト管理
2. Image ファイル格納用のフォルダを作成
3. 「App_Code]フォルダにクラスファイルを作成して関数を作る
4. TreeViewの生成を関数化する
5. DataLIstコントロールでフォルダ内のファイルを読み込む
6. ページの右列にWebServerコントロールを配置する 7. アップロード用フォルダにファイルをコピーする 8. Treeクリックのイベントをプログラムする
9. データテーブルにImage(写真)を登録する関数（プロシージャ）を作成する 10. クリックイベントで、登録（アップロード）する
11. 登録（アップロード）した商品（写真）を編集状態にして、表示する。
12. Imageファイル格納用のフォルダを空にする
次ページのワークフロー図を参照して下さい。(印刷すれば、チュートリアル進行も早くなります)
SkyOceanに戻る
SkyOceanに戻る
1. 商品登録（アップロード）ページを作成する
ソリューションエクスプローラの「Admin」フォルダ内に、「Site.master」をマスターページとする
「ProductsUpload」という「Webフォーム(マスターあり)」を作成して、下さい。
「ProductsUpload.aspx」のレイアウトを下記のようにして下さい。前図のレイアウトを作成するための htmlコードです。
選択部分コピペ可能
さらに、<div>Jumbo…の中に、“BootStrap”の「タブメニュー」を下記のようにｈｔｍｌコードで追加し ます。
ブラウザーで表示、実行します。タブメニューを確認します。
実行画面を閉じます。
正しく表示されていたら、上記の<ul>~</ul>までをコピーして、「AdminMenu.aspx」と
「CreateCategory.aspx」の<div>Jumbotronの同じ<ul>~</ul>の部分と差し替えします。そしてそれぞれ のページ部分をアクティブにして下さい。
ソリューションエクスプローラから、ブラウザーで表示、実行して、メニューによるページ遷移を確認して 下さい。
実行画面を閉じます。
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<div class="jumbotron">
<h4>商品アップロード</h4>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<h4>左列</h4>
</div>
<div class="col-md-3 col-sm-3">
<h4>右列</h4>
</div>
<div class="col-md-3 col-sm-3">
<h4>右列</h4>
</div>
</div>
</asp:Content>
<div class="jumbotron">
<h4>商品アップロード</h4>
<ul class="nav nav-tabs">
<li role="presentation"><a href="AdminMenu.aspx">管理メニュー</a></li>
<li role="presentation"><a href="CreateCategory.aspx">カテゴリー管理</a></li>
<li role="presentation" class="active"><a href="ProductsUpload.aspx">商品登録（アップロ ード）</a></li>
</ul>
</div>
SkyOceanに戻る
2. Image ファイル格納用のフォルダを作成
商品（写真）を登録する場合は、一度に複数の商品のImage(写真)を登録（アップロード）出来る事が必要 です、そのためにWebサイト内（プロジェクト内）の特定のフォルダに複数、あるいは1個のファイルを格 納しておいて、ワンクリックで登録（アップロード）します。
ソリューションエクスプローラのルート上に「UploadImages」というフォルダを作成して下さい、下図
3. 「App_Code]フォルダにクラスファイルを作成して関数を作る
1213「ProductUpload.aspx」がロードされたときに「DataListコントロール」に表示するためのプログラムで す。
ソリューションエクスプローラの「App_Code」フォルダを右クリックー＞「追加」」―＞「クラス」と進み、
「DataAccess」と入力して、「OK」ボタンをクリックします。
表示されたファイルの「Import」セクションに下記の網掛けの部分のImportFileを追加して下さい
そして、DataAccessクラス内に、下記のFunctionプロシージャ（関数）を作成します。
ここで、一度ソリューションエクスプローラからー＞Webサイト（WebShop）－＞ブラウザーで表示、実行 しておいてください。新しく作成した、クラスをコンパイルして、プロジェクトに認識させるためです。後 ほどこの関数を使用します。
VSではソリューション（Webサイト）内のどのページからでも利用できるクラス、（関数群の集合）を
APP_Codeフォルダに作成する事を推奨しています。
12 ヘルプキーワード “コンピュータが行う処理の記述 : 初めてのプロシージャの作成”
13 ヘルプキーワード “ASP.NET Web サイト内の共有コード フォルダ”
Imports Microsoft.VisualBasic Imports System.Data
Imports System.Data.SqlClient Imports System.IO
Public Class DataAccess End Class
Public Class DataAccess
'/////////////////////////////////////////////////////////////////////////////////////////////////////////
'サイト内のフォルダーを指定して、フォルダ内のイメージファイルをすべて取得して、コレクションに 格納する
Public Shared Function ListUpload() As ICollection Dim d As DirectoryInfo = New
DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("~/UploadImages")) Return d.GetFileSystemInfos("*")
End Function End Class
SkyOceanに戻る 実行画面を閉じます。