第 2 章 Web サイト管理
5. DataLIst コントロールにフォルダ内のファイルを読み込む
む
「PuroductsUpload.aspx」のデザインビュー及びコードビューを並べて表示します
左列にツールボックスから「DataListコントロール」をドラッグドロップします（htmlコードビュー内に ドラッグアンドドロップしたほうがやりやすいです）、IDを「ImageList」にします。デザインビューの
「ImageList」を選択して、右肩のタスクメニューー＞「データソースの選択」－＞ドロップダウンリスト からー＞「新しいデータソース」、表示されたダイアログから、「オブジェクト」を選択します。「データソー スにIDを指定します」の入力欄に「ObjGetImages」にします。下図
「OK」ボタンクリック後、下図が表示されます。
「ビジネスオブジェクトの選択」をドロップダウンして、一覧が頭文字Aから、アルファベット順に表示さ
SkyOceanに戻る
れていますので、約50行目位の頭文字Bの次の「DataAccess」を選択します。次図
「次へ」ボタンをクリック、表示された「データメソッドの定義」の画面の、メソッドの選択のドロップダ ウンリストから「ListUpload(),、戻り値 ICollection」を選択します。 下図 （注：ListUpload()が表示さ れない場合、Webサイトを一度「プラウザーで表示」を実行して下さい。新しいクラスを作成した場合、コ ンパイルして、VSに認識させる事が必要です）
「完了」ボタンをクリック、終了します。。
SkyOceanに戻る
次に、「ImageList」の右肩のタスクメニューから、「テンプレートの編集」－＞「ItemTemplate」表示しま す、その空白の欄に、「Labelコントロールをドラッグドロップします。IDを「LblFile」にします、
「LblFile」を選択状態にして、右肩のタスクから、「DataBindingsの編集」をクリックします。
表示されたダイアログの「カスタムバインド」の入力欄に、「Container.DataItem」と入力します。次図
「OK」ボタンをクリックします。
次に、テンプレート編集の状態で、タスクメニューから、ドロップダウンを開いて、最下行の「区切り記号 テンプレート」を選択します。空白の部分に、日本語入力で、「しかく」と入力して、黒い■を入力して下さ い。下図
「テンプレート編集の終了」をします。
次に、DataListコントロールの「ImageList」を選択状態にして、プロパティウインドウを表示して、下表 のように設定します
ID名 プロパtィ名
ImageList RepeatDirection Horizontal
RepeatColumns ５
Width １００％
BorderColor Black
BorderStyle Solid
BorderW”idth 1px
SkyOceanに戻る
テーブルコントロールを挿入して、BootStrap のテーブルに変身する
次に、htmlビューで、「ImageList」の直下に<br />コードを追加して,次に「１行３列」のテーブルを挿入 して下さい
そして、BootstrapのCSS“table”クラス（class=”table table-striped”）に
変えます、次に、１列目にLabelコントロール」を配置して下さい、IDを“LblPrice”にします。
次に、２列目にTextBoxコントロールを配置して下さい。IDを“TextMyPrice”にします。
次に、３列目にButtonコントロールを配置して下さい、IDを“BtnNext”にします。
テーブル内の各コントロールのプロパティ表
コントロールID名 プロパティ名 値
LblPrice Text 価格
TextMyPrice TextMode Number
Width ５０ｐｘ
日本語入力(htmlコード) “style=”ime-mode: inactive”
BtnNext Text 次へ
次に、テーブルの１列目の上枠にカーソルを持っていき、下向きの↓出現させて、列全体が選択状態になっ ていることを確認して、プロパティウインドウの下から６行目の“style”プロパティをクリックして、右 側のボタンをクリックして、「スタイルの変更」ダイアログを表示します、「カテゴリの選択」の“ブロッ ク”を選択します、右側に表示された、「textalign」のドロップダウンをクリックして、“right”を選択し ます。そのままの状態で、「カテゴリの選択」欄の“配置”を選択して、Widthを１５０ｐｘにして下さ い。「OK」ボタンをクリックして、終了します。次に、テーブル全体を選択して、styleプロパティから、
「背景」を読者様で任意の色を選択して設定して下さい。そして下記の<tr>の部分に“class=”warning””
と言う文字を追加します。（赤色部分）。テーブルのhtmlコードは下記のようになっています。
<table class="table table-striped"" style="background-color: #FFCC99">
<tbody style="background-color: #FFCC99">
<tr class=”warning”>
<td style="text-align: right; width: 150px;">
<asp:Label ID="LblPrice" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="50px"></asp:TextBox>
</td>
<td>
<asp:Button ID="BtnNext" runat="server" Text="次へ" />
</td>
</tr>
</table>
次に、「TxtMyPrice」に、空白を許可しない、「RequiredFieldValidatorコントロール」を関連つけます。
ツールボックスの「検証」タブから、「RequiredFieldValidatorコントロール」を「BtnUp」の直後に配置 します。プロパティウインドウから、下図のように「ControlToValidate」「ErrorMessage」「ForeColor」の ３か所を設定してください。
SkyOceanに戻る
ここまでで、テーブルのデザインは、下図のようになっています。（テーブルの背景色は任意です）
上図のテーブルを「Panelコントロール」で抱合して下さい、IDを“PanelPrice”にします。Visibleプロパ ティは、Trueにします。下記htmlコードを参考にして下さい。赤のコード部分
<asp:Panel ID="PanelPrice" runat="server">
<table class="table table-striped" style="background-color: #E3FDC1">
<tr>
<td style="text-align: right; width: 150px">
<asp:Label ID="LblPrice" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:TextBox ID="TxtMyPrice" runat="server" TextMode="Number"
Width="50px" syle="ime-mode:inactive;"></asp:TextBox>
</td>
<td>
<asp:Button ID="BtnNext" runat="server" Text="次へ" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TxtMyPrice" ErrorMessage="数字で、価格を入力して下さい"
ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</asp:Panel>
ブラウザーで表示して、実行します。
「TxtMyPrice」に数字でなくて、文字を入力して「BtnUp」をクリックして、挙動を確認して下さい、エラ ーの表示がでます、そのままで「TxtMyPrice」が空白の状態で、「BtnUp」をクリックして挙動を確認して 下さい、続いて「TxtMyPrice」に数字を入力して、「BtnUp」をクリックして挙動を確認して下さい。
実行画面を閉じます
SkyOceanに戻る
Bootstrap の Panel で見栄えをよくする
次に、「ImageList」と先程のテーブルをBootStrapのCmponentsの「Panel」で抱合します。
上図のHtmlコード１８行目の「DataList」タグの直上にBootstrapの「Panel」のヘッダー部の下記の コードをを追加します。網掛け部分 （上図の行番号は、筆者の環境の場合であって読者様の場合とは 一致しない場合があります）
<h4>左列</h4>
<div class="panel panel-primary">
<div class="panel-heading"></div>
<div class="panel-body">
<asp:DataList ID="DataList1" runat="server" BorderColor="Black"
続いて、Bootstrapのフッター部分のコードをテーブルの終了タグ</table>の直下に追加します。下記の位置
</tr>
</table>
</div>
<div class="panel-footer">価格を入力して「次へ」ボタンをクリック</div>
</div>
下図は、BootstrapのPanelのコードを追加した、デザインビューの画面です。
次に、今、追加したBootstrapのPanelのヘッダー部のhtmコード部分に追加の作業をします。
下記のhtmコードのヘッダー部「<div class=”panel-heading”>と</div>の間に、ツールボックスから、「Label コントロール」をhtmlコード上で、ドラッグアンドドロップして下さい。
<h4>左列</h4>
<div class="panel panel-primary">
<div class="panel-heading"></div>
<div class="panel-body">
htmlコードは下記のようになります、「Labelコントロール」のIDを“LblDLCount”にして下さい。
<h4>左列</h4>
<div class="panel panel-primary">
<div class="panel-heading">
<asp:Label ID="LblDLCount" runat="server" Text="Label"></asp:Label></div>
<div class="panel-body">
SkyOceanに戻る
DataList コントロール「ImageList」にファイルがない場合のプログラム
次に、「Admin_ProductsUpload_Load」を選択、作成して、そのイベントハンドラー内に下記のコードを追 加します。網掛け部分（コピペ可能）
ソリューションエクスプローラの「UploadImages」フォルダが空であることを確認して下さい。
ブラウザーで表示、実行します。下図は、実行画面です。
まだ、「UploadImages」フォルダにはImageFileが一つもないので「LblDLCount」に“アップロードフォ ルダーは空ですUploadImagesフォルダにファイルを追加して下さい”と表示されています。
実行画面を閉じます。
Private Sub Admin_ProductsUpload_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then
If ImageList.Items.Count = 0 Then
LblDLCount.Text = "アップロードフォルダーは空です。 UploadImagesフォルダにファ イルを追加して下さい"
PanelPrice.Visible = False End If
End If End Sub
SkyOceanに戻る
DataList コントロール「ImageList」にファイルがある場合のプログラム
次に、アップロードフォルダーにファイルがある場合のプログラムをします。
プログラムコードファイルに移って「Admin_ProductsUpload_Load」に下記のコードを追加します。
赤いコードが追加コードです。
Private Sub Admin_ProductsUpload_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then
If ImageList.Items.Count = 0 Then
LblDLCount.Text = "アップロードフォルダーは空です。 UploadImagesフォルダにファ イルを追加して下さい"
PanelPrice.Visible = False
ElseIf ImageList.Items.Count > 0 Then
LblDLCount.Text = "アップロードフォルダーに " & ImageList.Items.Count.ToString()
& "個のファイルがあります"
End If End If End Sub
次に、ソリューションエクスプローラの「UploadImages」フォルダにCDの「TutoNo1」の「SportsPhotos」
の「BaseBall」フォルダの「安木小野球」のフォルダを開き、３個ほどファイルを追加して下さい。
そして、ブラウザーで表示して、実行します。
今度は、「UploadImages」フォルダにはImageFileが存在したので、下図のような表示になります。
実行画面を閉じます。
SkyOceanに戻る
次は、価格の入力と「次へ」ボタンのプログラムをします。
価格について、本サイトの場合大量のスポーツ写真を販売するので、１枚づつの写真に価格を設定するのは 現実的ではありません。スポーツの大会の知名度等によって、そのイベントのひとかたまりの写真群として １枚当たりの価格を考えた方が妥当だと思います。したがって本チュートリアルの場合ひとかたまりの中の 一枚の価格を設定します。
商品ごとに価格を設定することもできます、１個づつアップロードして、価格をその都度設定すればいいの です。
「次へ」ボタンの役割は、価格の入力を確認して、アップロード先のイベント名（大会名）を選択するため
のTreeViewを表示する役を利を担います。
価格の入力用の「TxtMyPrice」には、確実に価格データが入力されるように、検証コントロールが関連つけ られています。下記コードです。
“<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="TxtMyPrice" ErrorMessage="数字で、価格を入力して下さい"
ForeColor="Red"></asp:RequiredFieldValidator
同時に、「TxtMyPrice」の“TextMode”プロパティは、下図のように「Number」に設定しています。
検証コントロールについては、VSのヘルプ“検証コントロール”で検索、参照して下さい。
本チュートリアルでは、別章で検証コントロールの使用法を紹介しています。
「次へ」ボタンのクリックイベントのプログラムする前に、アップロード先を設定する、TreeViewを作成し ます。