スポーツ写真販売サイト作成（１）

Transcription

1 0 SkyOcean スポーツ写真販売サイト作成 (1) サイト管理の作成

2 1 内容スポーツ写真販売サイト作成 (1)... 0 初めに... 2 対象読者について... 2 アプリケーションの概要... 2 共通事項... 3 本チュートリアルでの表記... 3 プロパティウインドウでの色の設定... 3 テーブルの列等のプロパティ設定例... 3 ストアドプロシージャの作成方法... 4 kk... 6 便利なコーディング支援... 7 参照リスト... 7 販売サイト構築... 8 第 1 章 Web サイトの作成... 8 VS(VisualStudio2015) で Web サイトの作成... 8 Image フォルダの作成... 9 マスターページ Site.master の構造を変更します Default.aspx のデザインを変更します 管理者用フォルダの作成 第 2 章 Web サイト管理 新しいデータベースの作成 VS で新規にデータベースを作成する方法 WebConfig ファイルの確認 作成するデータベースの概要 管理作業用メニューページの作成 AdminMenu.aspx ページの作成 マスターページのメニューを変更する カテゴリー名登録 編集ページの作成 作成の概要 作成の手順 カテゴリー名登録ページのレイアウト TreeView コントロールの配置 TreeView 用の DataSource の作成 TreeView にノードを表示する FormView コントロールと DataSource の配置 FVParent に DataSource を関連つける... エラー! ブックマークが定義されていません 7. 親カテゴリー名の登録をプログラムする 子カテゴリー名の登録 カテゴリー名の追加 編集 削除 好奇心が大事 BootStrap の Panel 削除したカテゴリー名の復活 カテゴリー別に商品を登録 ( アップロード ) する プログラムの手順 ページの基本レイアウト... エラー! ブックマークが定義されていません 1. 商品登録 ( アップロード ) ページを作成する Image ファイル格納用のフォルダを作成 App_Code] フォルダにクラスファイルを作成して関数を作る どのページからでも使用できる TreeView の生成を関数化する DataLIst コントロールにフォルダ内のファイルを読み込む この項で行った作業を今後の作業に共通する説明 イベント選択のための TreeView の作成 写真 ( 商品 ) を myproducts テーブルに登録する イベント別にサムネイルを表示 イベントのサムネイル表示 終了

3 2 初めに本書は VisualStudio2015 の VisualBasic 言語を使用します Web アプリケーションプログラマのために短期間で上級レベルにステップアップできるためのお力添いになれればと思って書きました 本書では Web アプリ作成の題材として スポーツ写真の販売をサンプルとして取り上げています が 他の商品を取り扱っても全体のシステムを変更することなくこのアプリがテンプレートとして使用できるように考えて作成しました 筆者は 独学でこのような 商品販売用の Web のページ群を作成し グローバルな Web サイトから Web アプリケーションとして 公開するという 作ってから公開するまでのノウハウ ( 知識 ) を得ました IT といっても非常に範囲が広く クラウドやスマートフォン等のプログラミングのプラットホームは多様化していますがこのチュートリアルを読者様が終了することによって クラウド スマートフォンのプログラミングの基礎以上のものを築くことが出来ます 私が独学で習得したことによって 習得の早道 抑えどころ等 読者様に有益な情報が提供できると思います 対象読者について このチュートリアルを実行するには VisualBasic 言語を見たことある方 VisualStudio2015 で基本的な使用法を経験されている方を対象にしています 例えば VS(VisualStudio) 上で DataBase を作成して その DataBase にテーブルを作成することを経験された方 また aspx ページに付属している VB ファイルにコードを記入された経験がある方 また BootStrap という CSS の名前を聞いたことのある方 以上のようなレベルの方を対象にしています 全くプログラムの経験のない方でも 本チュートリアルシリーズの前版 1~4 までを経験されて 本チュートリアルを実践されれば 短期間で立派なプログラマーになることが出来ると思います 小学生以上の方で 急がずに こつこつやれる方ならだれでも IT の基礎は習得可能です 学歴は関係ありません アプリケーションの概要 このアプリケーションは スポーツというジャンルに特化した写真を販売するのが目的です ユーザーが解りやすく スポーツの種類を親として それぞれの試合 ( 大会 ) を子とする関係を作ります 親のカテゴリーの下に子のカテゴリーとしてダイナミック ( 動的 ) にシステムを構築するには データベースを活用することが必須です ( 注 : ここでの 動的 の意味は 親のカテゴリー ( スポーツの種類 ) が増えても 親に従属する子のカテゴリー ( 試合名 ( 大会名 )) が増えても データベースを利用したプログラミング手法では 簡単に対応出来ます

4 3 共通事項本チュートリアルでの表記 VisualStudio 2015 のことを VS と表現します VS の作業画面を VS の IDE または IDE と表現します 作業画面の html コードビューは コードビュー デザイン画面は デザインビュー また aspx ページに付属している vb ファイルのことを プログラムコードファイル そのファイル内のコードのことを プログラムコード と表記します カテゴリーについて スポーツの種類 例えば 野球 バレーボール 等のスポーツ名を 親のカテゴリー 表現します そして 野球 の配下には 大会 とか 試合 があります その他のスポーツの種類 バレーボール の配下にも 大会 とか 試合 があります その 大会 試合等を 子のカテゴリー として 表現します また 子のカテゴリー のことを イベント として表現する場合もあります ドラッグ と表した場合は ドラッグアンドドロップ の意味を表します ブラウザーで表示 実行 と表示した場合 該当する デザインビュー またはコードビューから右クリックメニューの ブラウザーで表示 を実行することです ページ末のヘルプキーワードについてページ末に表示してあるヘルプキーワードとは VS の IDE の最上部にある ヘルプ メニューをクリックすると表示されるドロップダウンのメニューから ヘルプの表示 を選択して 表示される Developper Network の検索 欄に入力するキーワードのことです プログラムのスキルが上がる毎にこのヘルプを利用する頻度が増えます 是非活用して下さい プロパティウインドウでの色の設定本チュートリアルで頻繁に使用するプロパティウインドウでの 色の設定する場合 共通して行う手順で 赤 (Red) を選択する場合を下図のようにします 白枠が選択した色です 赤 青 その他の色等 特に指定しない限り 読者様の判断で濃淡の違いの範囲内で 選択して下さい テーブルの列等のプロパティ設定例例 1 テーブルを選択状態にして 上の枠線にマウスを持っていき 下向き矢印 を出現させて style プロパティで ブロック -> text-align > center にします 上記の赤で示した style プロパティをクリックすることによって テーブルに対して 様々な設定が出来ま

5 4 す ストアドプロシージャの作成方法作成するストアドプロシージャの CREATE 文 を用意しておきます サンプル下記コード CREATE PROCEDURE int AS = 1 SELECT [Small] FROM [myproducts] WHERE [myproducts].[pid] ELSE = 2 SELECT [Poster] FROM [myproducts] WHERE [myproducts].[pid] ELSE SELECT [Small] FROM [myproducts] WHERE [myproducts].[pid] RETURN サーバーエクスプローラのデータ接続を開いて ストアドプロシージャのフォルダを右クリックします 下図 新しいストアドプロシージャの作成 メニューを選択します 下図の CREATE PROCEDURE が表示されます 上記の CREATE PROCEDURE から RETURN 0 までのコードを全て削除して 白紙の状態にします 冒頭に用意しておいた CREATE 文 を白紙の左上にコピペします 下図 上図の状態で 左上の 更新 ボタンをクリックします 下図の データベース更新のプレビュー ダイアログが表示されます

6 5 上図の データベースの更新 ボタンをクリックします 作業画面 (IDE) の下に 下図のような 更新が正常に完了しました という結果の表示が出たことを確認して IDE の dbo.procedure.sql タブを閉じて サーバーエクスプローラの ストアドプロシージャ フォルダを右クリックして 最新の情報に更新 をクリックして 作成されていることを確認します

7 6 kk

8 7 便利なコーディング支援 本チュートリアルでも 行番号 を指定しますので 必ずこの設定を行って下さい ツール -> オプション で オプションダイアログを開き テキストエディター > を選択して Basic を選択します 右側の 行番号 にチェックを入れます 参照リスト TextBox を日本語入力にする UpdateProgress に Image を設定する方法 BootStrap の Panel コンポーネントでオブジェクトを包む <div class="panel panel-primary"> <div class="panel-heading"> Some String <div class="panel-body"> Sone Object <div class="panel-footer">sone String

9 8 販売サイト構築 スポーツ写真の販売用のサイトを考えました 他の商品の販売サイトにも適用できるような汎用性のあるプロジェクトテンプレートにしたいと思います 第 1 章 Web サイトの作成 VS(VisualStudio2015) で Web サイトの作成 VS2015 を立ち上げます スタートページ で ファイル のメニューから 新しい Web サイト を選択します 網掛け部の ASP.NET Web フォームサイト を選択して 一番下の ファイルシステム の入力欄 の WebSite1 を変更して WebShop にします 1 Web の場所の WebShop がサイト名になります ( 作成するフォルダについては 読者様の環境に合わせて 決定して下さい ) OK ボタンをクリック しばらくすると Default.aspx の html コードビューになります デザイン画面と並べて表示しましょう 1 WebSite1 の前のディレクトリの表示はそれぞれのコンピュータの環境に依存して表示されますので読者様の環境にあわせて表示されると思います 要は Web サイト名 が WebShop であるということです このチュートリアルは そのサイト名 WebShopp で進めます )

10 9 Default.aspx の 並べて表示 画面 上図のようになっています Html ビューの左側に行番号が表示されていない場合は 本書の 便利なコーディング支援 を参照して 実行して下さい Image フォルダの作成 ソリューションエクスプローラを表示して WebShop のルート上に 新規に Images フォルダを作成して下さい そのフォルダの中 にもう一つフォルダを作成して フォルダ名を Default にします CD ドライブに付属の CD をセットしておいて下さい Default フォルダを選択して 右クリック ^-> 追加 -> 既存の項目 -> 表示される画面で 画面の一番下に Web ファイル を選択するようになっているので ドロップダウンから 全てのファイル に変更して下さい そして画面左列のエクスプローラから CD が入っている ドライブを選択して CD の Images フォルダから ajax-looader mycart SportsTop SportsLogo1 写真販売サイト の 5 個のイメージをコピーして下さい 結果下図

11 10

12 11 マスターページ Site.master の構造を変更しますソリューションエクスプローラから Site.master を選択して html ビューを開きます 下図の 42 行の部分から 76 行までの部分を削除します 行番号が表示されていない場合は 本書の 便利なコーディング支援 を参照して 実行して下さい 削除後の html コード 下図 <asp:scriptreference Name="WebFormsBundle" /> <%-- サイトスクリプト --%> </Scripts> </asp:scriptmanager> この空白部分を削除しました <div class="container body-content"> <asp:contentplaceholder ID="MainContent" runat="server"> </asp:contentplaceholder>

13 12 下記の html コードを挿入します html コード 1 選択部分の Image に注目して下さい <%--コピペの開始位置 --%> <div class="nvbar-fixed-top"> <div class="container" style="padding: 3px"> <asp:imagebutton ID="ImageButton1" runat="server" ImageUrl="~/Images/Default/SportsLogo1.png" PostBackUrl="~/Shops/BestShot.aspx" /> <asp:image ID="Image2" runat="server" ImageUrl="~/Images/Default/ 写真販売サイト png" /> <div class="navbar-right"> <a runat="server" href="~/account/register"> <asp:image ID="Image1" runat="server" ImageUrl="~/Images/Default/myCart.png" /></a> <asp:loginview runat="server" ViewStateMode="Disabled"> <AnonymousTemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/account/register"> 登録 </a></li> <li><a runat="server" href="~/account/login"> ログイン </a></li> </ul> </AnonymousTemplate> <LoggedInTemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/account/manage" title="manage your account">hello, <%: Context.User.Identity.GetUserName() %>!</a></li> </ul> </LoggedInTemplate> </asp:loginview> <div class="navbar navbar-inverse navbar-fixed"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" runat="server" href="~/">skyocean Shop</a> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a runat="server" href="~/"> ホーム </a></li> <li><a runat="server" href="~/about"> 詳細 </a></li> <li><a runat="server" href="~/contact"> 問い合わせ </a></li> <li><a runat="server" href="~/admin/admin"> 管理 </a></li> </ul> <%--コピペの終了位置 --%> Default.aspx をブラウザーで表示 実行して下さい

14 13 この時点での Default.aspx の実行画面 カート 登録 ログイン ボタンについては まだプログラムしていません 実行画面を閉じます

15 14 Default.aspx のデザインを変更します 次に Default.aspx の html コードの下記の部分を削除します 網掛け部分 <asp:content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div class="jumbotron"> <h1>asp.net</h1> <p class="lead">asp.net is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p> <p><a href=" class="btn btn-primary btn-lg">learn more»</a></p> <div class="row"> <div class="col-md-4"> <h2>getting started</h2> <p> ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model. A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access. </p> <p> <a class="btn btn-default" href=" more»</a> </p> <div class="col-md-4"> <h2>get more libraries</h2> <p> NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects. </p> <p> <a class="btn btn-default" href=" more»</a> </p> <div class="col-md-4"> <h2>web Hosting</h2> <p> You can easily find a web hosting company that offers the right mix of features and price for your applications. </p> <p> <a class="btn btn-default" href=" more»</a> </p> </asp:content>

16 15 削除後の Default.aspx の html コード 下記コードの 左列 中列 右列 のコード部分を追加して下さい <asp:content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> ブラウザーで表示 実行します 実行画面 <div class="jumbotron"> <div class="row"> <div class="col-md-4"> <h4> 左列 </h4> <div class="col-md-4"> <h4> 中列 </h4> <div class="col-md-4"> <h4> 右列 </h4> </asp:content> 実行画面を閉じます 次に Default.aspx の html ビューの Jumbotron の下記の場所にツールボックスから Image コントロール をドラッグアンドドロップして下さい 続けて その Image を選択して プロパティウインドウを表示して Url プロパティを ソリューションエクスプローラの Images フォルダの配下にある ChutorialNo2 フォルダの ShopTop png にして下さい 網掛け部分 Image1 のプロパティ Width =100% に設定を忘れないようにして下さい html コード 2 <%@ Page Title="" Language="VB" MasterPageFile="~/Shops/Shops.master" AutoEventWireup="false" CodeFile="BestShot.aspx.vb" Inherits="Shops_BestShot" %> <asp:content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"> <div class= jumbotron > <asp:image ID="Image1" runat="server" ImageUrl="~/Images/Default/ShopTop png" Width="100%" />

17 16 <div class="row"> <div class="col-md-4 col-sm-4"> <h4> 左列 </h4> <div class="col-md-4 col-sm-4"> <h4> 中列 </h4> <div class="col-md-4 col-sm-4"> <h4> 右列 </h4> </asp:content> html ビュー画面を右クリックー >ブラウザーで表示 実行します 実行画面 実行画面を閉じます 管理者用フォルダの作成 次に ネットショップ等では 公開したサイトのページに 頻繁に商品を追加したり 変更したりする作業が必要になります 顧客 ( ユーザー ) には見えないところでの作業になります ソリューションエクスプローラのルートに新しいフォルダ Admin フォルダを作成します 下図 後ほど この Admin フォルダに Web ページ を追加します

18 17 第 2 章 Web サイト管理新しいデータベースの作成 VS で新規にデータベースを作成する方法 2 ソリューションエクスプローラの App_Data フォルダーを右クリックします 追加 >SQL サーバーデータベース を選択します 右図のダイアログウインドウが表示されます 右図のように 項目名 を skyocean_db と入力して OK ボタンをクリックします しばらくすると ソリューションエクスプローラのサーバーエクスプローラのデータ接続のツリー表示が下図のように変わります 経験メモ SQL サーバーが存在して 機能しているかを確認するシーンが開発途中にたびたびありました SQL サーバーが機能しておりませんというようなエラーが出現したら 次の要領で確認して下さい コントロールパネルー > 全てのコントロールパネル項目ー > 管理ツールー > サービスー > 一覧から SQL サーバー (SQLEXPRESS) を探します ありましたら選択して 下図のような表示であれば機能しています 上図のような表示になるように SQL サーバーを設定して下さい 2 筆者の場合 VS をインストールしただけでは データベースが作成出来ませんでした 原因は SQLServerExpress がインストールされていなかったためでした Microsoft のダウンロードサイトから無料でダウンロードしたらデータベースの作成が可能になりました ) 作成の詳細は Tutorial1_4 VS によるデータべー作成方法を参照して下さい

19 18 WebConfig ファイルの確認 この時点で ソリューションエクスプローラの一番下の WebConfig ファイルを開きます WebConfig ファイルの 13 行目の ConnectionString に注目して下さい 下記コード網掛け部分 requirepermission="false"/> </configsections> <connectionstrings> <add name="defaultconnection" connectionstring="datasource=(localdb) MSSQLLocalDB;Initial Catalog=aspnet-WebShop-d391bf2b-75cc-426c-b4a7-d0932aadcf23;AttachDbFilename= DataDirectory aspnet-webshop-d391bf2b-75cc-426c-b4a7-d0932aadcf23.mdf;integrated Security=SSPI" providername="system.data.sqlclient"/> </connectionstrings> <system.web> <authentication mode="none"/> <compilation debug="true" targetframework="4.6.1"/> WebConfig ファイルを閉じます 作成するデータベースの概要 作成するテーブルの概要 テーブルの用途 商品を大きく分ける親カテゴリー名を格納する 親のカテゴリに属する子のカテゴリー名を格納する子のカテゴリーに属する 商品 ( 写真付き ) を格納する ProdCate テーブル ProdSubCate テーブル myproducts テーブル テーブル名

20 19 下記の T-SQL 文で skyocean_db に テーブルを作成して下さい ( 作成方法は skyocean サイトから無料でダウンロード出来る Tutorial1_3 の データベースの中に テーブル を作成 を参照してください ) データベーステーブルの T-Sql 下記の TSQL 文をコピペして実行できます ProdCate テーブル Create SQL 1 CREATE TABLE [dbo].[prodcate] ( [PCID] INT IDENTITY (1, 1) NOT NULL, [CateName] NVARCHAR (30) NOT NULL, [Deleted] BIT NOT NULL, PRIMARY KEY CLUSTERED ([PCID] ASC) ) ProductSubCate テーブル Create SQL 2 CREATE TABLE [dbo].[prodsubcate] ( [SPCID] INT IDENTITY (1, 1) NOT NULL, [PCID] INT NOT NULL, [SubCateName] NVARCHAR (50) NOT NULL, [Keyword] NVARCHAR (10) NULL, [Deleted] BIT NOT NULL, PRIMARY KEY CLUSTERED ([SPCID] ASC) ) myproducts テーブル Create SQL 3 CREATE TABLE [dbo].[myproducts] ( [PID] INT IDENTITY (1, 1) NOT NULL, [PCID] INT NOT NULL, [SPCID] INT NOT NULL, [ProductName] NVARCHAR (50) NOT NULL, [FileName] NVARCHAR (50) NOT NULL, [Price] INT NULL, [Descrip] NVARCHAR (200) NOT NULL, [Small] IMAGE NOT NULL, [Poster] IMAGE NOT NULL, [RegiDate] DATE NOT NULL, [Scheck] BIT NULL, [Deleted] BIT NOT NULL, PRIMARY KEY CLUSTERED ([PID] ASC) ); 上記の 3 個の T-SQL を 1 個づつ実行して テーブルを skyocean_db.mdf のテーブルフォルダに作成し て下さい 作成後は サーバーエクスプローラの テーブル フォルダを右クリックして 最新の情報に更新 をクリ ックして下さい 作成後のフォルダの内容 下図

21 20 これで データベースとテーブルが出来ました

22 21 管理作業用メニューページの作成 AdminMenu.aspx ページの作成 ソリューションエクスプローラの Admin フォルダを右クリックして 追加 -> Web フォーム ( マスターあり ) -> AdminMenu という名前の Site.master をマスターページとする Web ページを作成して下さい 下図 OK ボタンをクリック このページは管理作業全体のメニューを備えたページとして 機能します AdminMenu.aspx のレイアウト AdminMenu.aspx の基本になるレイアウトの html コードを入力します Html コード入力前の AdminMenu.aspx のデフォルトの html コード <%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="AdminMenu.aspx.vb" Inherits="Admin_AdminMenu" %> <asp:content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"> </asp:content> asp:content の中にレイアウトの基本になる html コードを入力します 網掛け部分 コピペ可能です html コード 3 <asp:content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"> <div class="jumbotron"> <div class="row"> <div class="col-md-12 col-sm-12"> </asp:content>

23 22 上記の基本レイアウトの jumbotron<div> の中に BootStrap のタブ式メニューを挿入します その他のコード共 網掛け部分のhtmlコードを追加入力して下さい コピペでも OK です html コード 4 <div class="jumbotron"> <h4> 管理者ページ </h4> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="admin.aspx"> 管理メニュー </a></li> <li role="presentation"><a href="#"> カテゴリー管理 </a></li> </ul> <div class="row"> <div class="col-md-12 col-sm-12"> <%--'BootStrap のパネルです --%> <div class="panel panel-default"> <div class="panel-heading"> <h3> サイト管理 </h3> <div class="panel-body"> <h4> 下記の項目を選択して管理作業をして下さい </h4> <div class="list-group"> <div class="list-group-item"> <h4 class="list-group-item-heading"><strong> 販売用商品管理 </strong></h4> <ul> <li><a href="#"><strong> カテゴリ 管理 </strong> カテゴリ およびサブカテゴリ追加する </a></li> </ul> <div class="panel-footer"> パネルのフッター ブラウザーで表示 実行します 下図 この時点では 各メニュー リストのアイテムには ページ遷移の機能が備わっていいません

24 23 実行画面を閉じます html コードと実行画面との感覚に慣れるのもプログラミング習得の早道です

25 24 マスターページのメニューを変更するソリューションエクスプローラから Site.msster ページを選択して html コードの下記の網掛け部分に Admin/AdminMenu というコードに変更して下さい <ul class="nav navbar-nav"> <li><a runat="server" href="~/"> ホーム </a></li> <li><a runat="server" href="~/about"> 詳細 </a></li> <li><a runat="server" href="~/contact"> 問い合わせ </a></li> <li><a runat="server" href="~/admin/adminmenu"> 管理 </a></li> </ul> Default.aspx のコードビューから ブラウザーで表示 実行して 黒いバーのメニューから 管理 をクリックして下さい AdminMenu.aspx が表示されていることを確認して 実行画面を閉じてください

26 25 カテゴリー名登録 編集ページの作成完成画面をここに表示

27 26 作成の概要 親カテゴリー名の登録及び子カテゴリー名の登録 そして両カテゴリー名の編集が目的ですので 視覚的にも解りやすく作業が出来るように TreeView コントロールを使用しました データの登録 編集は FormView コントロールの機能がすぐれています データベースを操作するには SqlDataSource コントロール 及び ObjectDataSource コントロールの使用になります 作成の手順 1. 親 子カテゴリー名登録ページのレイアウト 2. TreeView コントロールの配置 3. TreeView 用の DataSource の作成 4. TreeView にノードを表示する 5. FormView コントロールと DataSource の配置 6. FVParent に DataSource を関連つける 7. 親カテゴリー名の登録をプログラムする 8. 子カテゴリー名の登録 9. カテゴリー名の追加 編集 削除

28 27 1. カテゴリー名登録ページのレイアウト Admin フォルダに Site.master をマスターページとして CreateCategory.aspx を作成して下さい CreateCategory.aspx の基本レイアウトです 網掛け部分を追加して下さい ( 下記のコードはコピペ可能です ) <asp:content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"> <div class="jumbotron"> <h4><strong> カテゴリ管理 </strong></h4> <br /> <ul class="nav nav-tabs"> <li role="presentation"><a href="adminmenu.aspx"> 管理メニュー </a></li> <li role="presentation" class= active ><a href="createcategory.aspx"> カテゴリー管理 </a></li> </ul> <div class="row"> <div class="col-md-4 col-sm-4"> <h4> 左列 </h4> <div class="coo-md-4 col-sm-4"> <h4> 中列 </h4> <div class="col-md-4 col-sm-4"> <h4> 右列 </h4> </asp:content> ブラウザーで表示 実行します 下図 これ以後 解説の中で 列の位置をそれぞれ 左列 中列 右列 と表記して 位置の指定をします 実行画面を閉じます BootStrap については読者の皆様自身で 学習して下さい 詳しいサイトがあります 本家サイト 基礎習得用サイト日本語

29 TreeView コントロールの配置 ツールボックスの ナビゲーションタブ から TreeView コントロール をドラッグドロップして左列に配置します ツールボックスからページへの配置は html ビューの任意の位置でも デザインビューの任意の位置にでもドラッグアンドドロップして配置することができます 現状の場合 html コードビュー内の <h4> 左列 </h4> の下に配置して下さい 下表配置後の html コード <div class="row"> <div class="col-md-4 col-sm-4"> <h4> 左列 </h4> <asp:treeview ID="TreeView1" runat="server"></asp:treeview> <div class="coo-md-4 col-sm-4"> <h4> 中列 </h4> ID を Tree にします デザインビューとコードビューを並べて表示して Tree のプロパティを設定し て下さい プロパティウインドウを表示して TreeView1 のプロパティを設定します 下表に TreeView コントロールのプロパティ コントロール名 コントロールの ID 名 プロパティ名 値 TreeView Tree NodeIndent 50 SelectedNodeStyle Red( 赤色 ) BorderColor 同上 BorderStyle Solid 同上 BorderWidth 1px ShowLines True これ以後 この TreeView コントロールを ID 値である Tree と表現します 3. TreeView 用の DataSource の作成 次に デザインビューで Tree を選択状態にして Tree の右隣に SqlDataSource をドラッグアンドドロップして配置します ID は sdsparent にします 下図は配置後 ID を sdsparent にした直後のデザインビューです sdsparent を選択して 右肩のタスクメニューから データソースの構成 を選択します下図が表示されます 3 TreeView コントロールはツールボックスのナビゲーションタブの中にあります

30 29 ドロップダウンリストの中から skyocean_db.mdf を選択します 次へ ボタンをクリックします 下図が表示されます 上図の入力欄に次図のように SiteSqlServer と 入力します

31 30 次へ ボタンをクリックします VS は少しの時間内部で様々な設定をしています しばらく待っていてください 表示されたダイアログで 下図のように コンピュータ という表示のドロップダウンリストから ProdCate テーブルを選択します WHERE ボタンをクリックします 下記のように設定します 列 =Deleted ソース =None [ パラメータのプロパティ ] 値 =False

32 31 上図の 追加 ボタンをクリックして WHERE 句を確認します OK ボタンがアクティブになります OK ボタンをクリックします 下図のダイアログの表示に戻ります 上図の 次へ をクリックします ( 詳細設定 はしません ) 次図が表示されます

33 32 SELECT ステートメント SELECT * FROM [ProdCate] WHERE ([Deleted] を確認したら 完了 ボタンをクリックします 次に デザインビューの sdsparent を選択して プロパティウインドウを表示して DataSourceMode プロパティを下図のように DataSet から DataReader に変更します 4 4 ヘルプキーワード SqlDataSource.DataSourceMode プロパティ解りやすく解説してあります あわせて キーワード DataReader によるデータの取得も是非検索して下さい

34 33 4. TreeView にノードを表示する Tree に親ノードを表示する ここで 以後のプログラムを進める前準備として ProdCate テーブルに手入力で データを挿入しておきます サーバーエクスプローラのテーブルフォルダを開いて ProdCate を右クリックして テーブルデータの表示 を選択します 下図が表示されます 上図の 2 列目の CateName に 野球 と入力して Deleted 列に False ( 英字 ) と入力して どこかの列をクリックして 下図のようにして下さい テーブルデータの画面を閉じます sdsparent は Teable ProdCate から Deleted の列の値が False ( 0) の値をフィルターにしてデータを抽出する機能を持った SqlDataSource です DataSourceMode は DataReader です 前頁の脚注を参照して下さい プログラマーには 必須の知識です ASP.NET の予約イベントを利用する CreateCategory.aspx のデザインビュー またはコードビューの空白の部分を右クリックして コードの表示 メニューをクリックして のプログラムコードファイル画面を表示して下さい ページの最上部の真ん中の列のドロップダウンリストを開いて (Admin_CreateCategory イベント ) を選択します すぐ右列に選択したオブジェクトに関連した イベント名のドロップダウンが表示されます そのドロップダウンリストを開いて Load イベントを選択して下さい 下図を参考にして下さい ( 例えば FormView1 を選択すれば FormView1 だけに関連したイベント名が表示されます ) 以後 この作業のことを本チュートリアルでは ページの Load イベントを選択 表示して下さい とか FormView1 の イベントを選択 表示して下さい という表現で解説します 下記のように 瞬時にプログラムコードファイル上にページの Load イベントのプロシージャが書き込まれます Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load End Sub プログラムコードファイルの Import セクションに System.Data.Common を Import しておいてください 下記網掛け部分のコード Imports System.Data.Common Partial Class Admin_CreateCategory Inherits System.Web.UI.Page

35 34 ページの Load イベントに下記のように コードを追加します 網掛けの部分 コピペ出来ます Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' ツリーノードを作成 表示する Tree.Nodes.Add(node) Loop ノードをすべて開きます Tree.ExpandAll() reader.close() End If End If End Sub CreateCategory.aspx ページから ブラウザーで表示 実行します ProdCate テーブルには CateName 列に 1 語だけ 野球 というカテゴリー名が登録されているので 下図の Tree の表示になります 現在表示されている 野球 を親ノードと呼び本チュートリアルを進めていきます 実行画面をとじます ( キーワード DataReader) 5 5 ヘルプキーワード DataReader

36 35 親ノードに属する 子ノードを表示する 次に サーバーエクスプローラの SiteSqlServer のフォルダを開いて テーブル フォルダを開きます テーブル ProdSubCate を右クリックして テーブルデータの表示 を選択します 下図 PCID の列に英数文字で ProdCate テーブルの 野球 の PCID 列の値を入力します SubCaeName の列に日本語で 小学生大会 と入力し Deleted 列に英数字で False と入力します 下図 注意 : PCID の値は tbl_prodcate の CateName 野球 の ID である PCID の値と整合性を保ってください 例えば tbl_prodcate の CateName の 野球 の PCID 列の値が 3 であれば 上図の PCID 列の値を 3 にして下さい 次に SPCID 列の 2 行目の NULL をクリックします 下図のようになります SPCID の値は 必ず上図のような値 (2) にならない場合があります テーブルの環境 ( データを削除したりした場合等 )SQL サーバーが自動で付与する ID 値です テーブルのデータ表示画面を閉じます

37 36 子ノード ( 子カテゴリー ) 表示用の DataSource を作成する CreateCategory.aspx の中列 sdsparent の sqldatasouce コントロールの右側に新しい SqlDataSource コントロールを配置して下さい ID を sdschild にします 下図 右肩のタスクメニューから データソースの構成 を選択します sdschild のデータソースの構成 ドロップダウンリストから SiteSqlServer を選択 次へ ボタンをクリクします テーブルは ProdSubCate を選択して

38 37 WHERE 句を設定します 下図 OK ボタンをクリックして 表示される SELECT ステートメントの構成 ダイアログの 次へ ボタンをクリックして 下図の SELCT ステートメント を確認して 完了 ボタンをクリックして 終了します sdschild のプロパティ DataSourceMode を DataReader に変更して下さい

39 38 子ノードを表示するプログラム 次に プログラムコードファイルに移ります 現在ページロードイベントの Admin_CreateCategory_Load は 下記のようにプログラムしてあります Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' ツリーノードを作成 表示する Tree.Nodes.Add(node) Loop ' ノードをすべて開きます Tree.ExpandAll() reader.close() End If End If End Sub 上記のコードはテーブル ProdCate のデータを Tree のノードとして 表示するプログラムコードです TreeView で何かを表示する意義は 複雑な相関関係を一目でわかりやすくする目的でもあります したがって親のカテゴリー名に属する子のカテゴリー名を 視覚的に解りやすく表示するようにプログラムしていきます プログラムの手順として 理論的には 複数の親のカテゴリー名をひとつづつ取得する度に その親に属する子のカテゴリー名 ( 複数 ) を取得していき Tree ノードとして表示するという事です 子のカテゴリー名はテーブル ProdSubCate に登録されています sdschild はそのテーブルの内容を含んでいます 下記のコードは 親のカテゴリー ID をパラメータにした sdschild のカテゴリー名を読み取ります sdschild.selectparameters.add(("pcid"), 親のカテゴリー ID))) 親の ID を持つ 子のデータ行が複数あれば 複数の行を返します 上記のコードを利用して 下記の 追加するコード を既存のコード内に追加します わかりやすく 追加する位置を表示してあります ( 赤色の位置 ) 既存のコード Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename"))

40 39 End If ' ツリーノードを作成 表示する '//////// 追加位置ここから '//////////////////////////////////// ここまで Tree.Nodes.Add(node) Loop Tree.ExpandAll() End If Tree.ExpandAll() reader.close() End Sub 追加位置の中に 下記のコードを追加して下さい 追加するコード コメントの行もコピーして下さい ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop ( 注 : 上記の赤のコード CInt(reader("PCID") が 親のカテゴリー ID です 追加後の Admin_CreateCategory_Load プロシージャ Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' ツリーノードを作成 表示する '//////// 追加位置ここから ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty)

41 40 End If ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop '//////////////////////////////////// ここまで ' ツリーノードを作成 表示する Tree.Nodes.Add(node) Loop Tree.ExpandAll() End If Tree.ExpandAll() reader.close() End Sub CreateCategory.aspx のデザインビュー コードビューに戻り ブラウザーで表示して 実行して下さい 下図のようになります TreeView の部分 実行画面を閉じます

42 41 5. FormView コントロールと DataSource の配置 この FormView コントロールン役割は 親カテゴリーを編集 ( 追加 変更 ) することです CreateCategory.aspx のコードビューで 中列 の下に FormView コントロールを配置して下さい ID を FVParent にします Visible プロパティを False にします その下に SqlDataSource コントロールを配置 (FVParent の右にドラッグアンドドロップ ) して ID を sdseditparentcate] にします [sdseditparentcate] のデータソースの構成 デザインビューの sdseditparentcate を選択して タスクメニューから データソースの構成 を選択します 下図が表示されます ドロップダウンから SiteSqlServer を選択して 次へ ボタンをクリックします テーブルまたはビューから. は ProdCate を選択します 下図 WHERE 句を設定します

43 42 上図の画面で 追加 ボタンをクリックします下図 OK ボタンをクリックします SELECT ステートメントの構成 ダイアログに戻ります 詳細設定 ボタンをクリックします 上図のように INSERT UPDATE 行のチェックを入れて OK ボタンをクリックします再度 SELECT ステートメントの構成 ダイアログに戻ります 次へ ボタンをクリックして 次の画面の 完了 ボタンをクリックして 終了します

44 43 下図のように FormView1 に DataSource が関連つけられて FVParent の表示が変わります 下図

45 44 6. 親カテゴリー名の登録をプログラムする ここまでの本チュートリアルでは テーブル ProdCate と ProdSubCate にプログラミングの便宜上両テーブルにデータを手入力で 登録しました が実際のアプリが最初に起ちあがるときには 両テーブルには何もデータがないはずです 両テーブルのデータを削除して下さい 削除の方法は サーバーエクスプローラウインドウを開いて SiteSqlServer を開き ( 左側の 印をクリック ) テーブルフォルダを開いて ProdCate テーブルを右クリックします テーブルデータの表示 を選択 下図 上図の PCID の左の列の右 印の 1 行目をクリックします 1 行目が選択状態になったら その行の左の列の右 印の列を右クリックして 一番下の 削除 ボタンをクリックします 確認のダイアログで はい をクリックします 複数行の場合は Shift キーを使用して複数の行を選択してから 先程の削除動作をおこなって下さい 同様に テーブル ProdSubCate のデータも空にして下さい テーブル ProdCate 及び ProdSubCate には 1 件も データが入っていません ですからこの CreateCategory.aspx が Load されても Tree にデータをバインド出来なくて 何も表示しません アプリケーションが最初に起ち上がる時には 必ずこの状態です またこの状態でなくてはならないでしょう このアプリを使用する人にとっては 親カテゴリー名 子カテゴリー名ともに独自のオリジナリティを持ったカテゴリー名を自由に作成出来る汎用性が実感できるでしょう Web ショップとして 多様な商品の棚を作成するためにもこの汎用性を保たねばなりません 親カテゴリーのデータが空の場合の処理 このようなアプリが最初に起ちあがった時の処理も必要です ページの Load 時において テーブル ProdCate にデータがあるかどうかを検証する必要があります すでにこのページロード時に下記のコードで検証しています 6 Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then. End If 6 ヘルプキーワード DataReader によるデータの取得 是非検索して下さい

46 45 プログラムコードファイルに移り Admin_CreateCategory_Load イベントにコードを追加します 青い文字にしてある If reader.hasrows Then ~ Else ~ End If という一連のプログラム手順を作成します Else 節は テーブル ProdCate] が空の場合 FormView コントロールの FVParent を Insert モードにして表示する というプログラムです ( データ挿入を促すように ) TreeNods.Add(node) の直下に 網掛けした赤いコード部分を追加して下さい Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.ExpandAll() reader.close() Else テーブル ProdCate] が空の場合 FVParent を Insert モードにして データ挿入を促す FVParent.ChangeMode(FormViewMode.Insert) FVParent.Visible = True End If End If End Sub ブラウザーで表示 実行します FVParent が Insert モードで 表示されました 次図 上図を見ると Tree に表示するでーたがないので Tree も表示されませんユーザーに解り易いように 親カテゴリーのデータが 1 件もありません というような告知文があればユーザーは解りやすく 何をしたらいいか判断がし易くなります 同時に FVParent についても 親カテゴリーのデータが 1 件もありません という 告知を受けたことに対して次にすることを明確に表示出来たらいいと思います 実行画面を閉じます

47 46 上記 2 件について 改善します 左列の文章の非表示について html コードビューの <h4> 左列 </h4> のすぐ下に Label コントロールをドラッグアンドドロップします ID は LblEmp にします コントロール名 ID 名 プロパティ名 値 Label LblEmp Text 親カテゴリーのデータは 1 件もありません Visible False ForeColor Red 次に FVParent の InsertItemTemplate を改良します FVParent の右肩のタスクメニューを表示して テンプレートの編集 を選択します

48 47 InsertItemTemplate は下図のようになっています 上図の CateNameTextBox の右側にマウスポインターを置いて 4 行 2 列のテーブルを挿入します 下図を参照 テーブルの 1 行目の行を全て選択して青色に変えて 右クリック > 変更 -> セルの結合 して その行内を列なしにします ここに Label コントロール をドラッグドロップします 次に 1 行あけて InsertItemTemplate 内の CateNameTextBox を右列に移動します その行の左列に カテゴリー名 という文字を入力します 一番下の行に 挿入 キャンセル ボタンをそれぞれ左列 右列に移動します CateNameTextBox を日本語入力にします 7 次に DeleteCheckBox の行とテーブルの外の CateName という文字を削除します テーブルの下の空白を Delete キーを使用して 削除します 改良後の ItemInsertTemplate 下図 Label コントロールの Text プロパティを 新規に親カテゴリー名を登録 にして下さい そして ForeColor プロパティを赤に FontSize を 1.1em にして下さい 7 TextBox を日本語入力にする Html コードの該当する TextBox コントロール のタグのコードに下記のコードを追加して下さい 赤色選択部分 <asp:textbox ID="" runat="server" Text='<%# Bind("CateName") %>' style="ime-mode: active;"/> 本チュートリアルで これ以後 TextBox を 日本語入力にします という解説は 上記の 赤色部分 のコードを TextBox のタグに追加することを意味します ( 注 :style の前に必ず半角スペース ( ) で空けて下さい )

49 48 DataSource の InsertQuery の修正 次に sdseditparentcate を選択して プロパティウインドウを表示して InsertQuery を選択して 右側のボタンをクリックします コマンド及びパラメータのエディター ダイアログが表示されます 下図 まず 上図の パラメータ の欄の Deleted を選択して 右側に表示されている赤い 印をクリックして 削除します 次に INSERT コマンド のコマンド文を下記のように変更します 英数字の 0 です OK ボタンをクリックして 終了します

50 49 プログラムコードファイルに移り ページロードイベントにコードを追加します 下記赤いコード網掛け部分を追加 Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' ツリーノードを作成 表示する ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop Else Tree.Nodes.Add(node) Loop ' ノードをすべて開きます Tree.ExpandAll() reader.close() LblEmp.Visible = False 'LblEmp.Visible=True である状態を考慮して False にする ' テーブル ProdCate] が空の場合 FVParent を Insert モードにして データ挿入を促す FVParent.ChangeMode(FormViewMode.Insert) FVParent.Visible = True Me.LblEmp.Visible = True ' 親カテゴリーが空であることの Text を表示する End If End If ブラウザーで表示 実行します

51 50 下図のようになります これで ユーザーは 現在の状況が把握できて しなければならないことの判断が出来るようになったと思います カテゴリー名に 野球 入力して 挿入 ボタンをクリックします FVParent は消えて 左列のの赤い文字は残っています この後修正します 実行画面をとじます

52 51 DataSource コントロールを使用するメリットプログラマーが DataSource を使用するメリットの一つに DataSource に関連つけられた Data コントロール によって DataSource の内容が変更 ( 新規挿入 変更 削除 ) された場合に VS では それぞれのイベントを発生させて そのイベントをハンドルすることが出来ます 先程の実行したシーンでは FVParent の InsertItemTemplate の 挿入 ボタンのクリックによって sdseditparentcate を通して tbl_prodcate に 野球 というカテゴリー名を新規に登録しました その際には FVParent の FVParent_ItemInserted イベントが発生します プログラムコードファイルに移り FVParent のイベント ItemInserted を選択 表示します 下記のようにコードを追加します 網掛けした赤いコード部分 Private Sub FVParent_ItemInserted(sender As Object, e As FormViewInsertedEventArgs) Handles FVParent.ItemInserted ' 親カテゴリーのデータが挿入された ' データソースの内容を DataReader によって読み込み データがあれば LblEmp の Label コントロールの Visible プロパティを False にする Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then LblEmp.Visible = False 親カテゴリーに新しいデータが登録されたので Tree を再表示する End If End Sub 次に サーバーエクスプローラを表示して テーブル ProdCate を右クリックして テーブルデータの表示 を選択して 先程登録した 野球 の行を削除します テーブルデータの表示 を閉じます ブラウザーで表示 実行します カテゴリー名にもう一度 野球 と入力して 登録します 実行画面には 何も表示されなくなりました LblEmp については プログラムコードで Visible=False にしましたので 表示から消えています FVParent についても 初期のプロパティ設定で Visible=False にしてあるので ポストバックによる再描画の際に FVParent のプロパティ設定の通り False になります 実行画面を閉じます 次は FVParent_ItemInserted イベントの中のコードで 最後の行の 親カテゴリーに新しいデータが登録されたので Tree を再表示する の行の直下の場所に Tree を再表示するプログラムをします

53 52 親カテゴリーを追加した場合に 結果を素早く反映させるプログラム プログラムコードファイルに移って Admin_CreateCategory_Load イベントにプログラムしたコードを利用します Admin_CreateCategory_Load イベントのコード 網掛けの部分を選択して 先程の FVParent_ ItemInserted イベント内にコピー 貼り付け します Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 Dim childcnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() childcnt = childcnt + 1 Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop End If End Sub ' ツリーノードを作成 表示する Tree.Nodes.Add(node) Loop ' ノードをすべて開きます Tree.ExpandAll() reader.close() LblEmp.Visible = False 'LblEmp.Visible=True である状態を考慮して False にする End If

54 53 下記の FVParent_ItemInserted イベントの中の赤い文字の ここから貼り付け のしたに 先程のコピーしたコードを貼り付けます Private Sub FVParent_ItemInserted(sender As Object, e As FormViewInsertedEventArgs) Handles FVParent.ItemInserted ' 親カテゴリーのデータが挿入された ' データソースの内容を DataReader によって読み込み データがあれば LblEmp の Label コントロールの Visible プロパティを False にする Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then LblEmp.Visible = False '////////////////////// ここから貼り付け 'End If End Sub

55 54 貼り付け後の FVParent_ItemInserted イベントコード Private Sub FVParent_ItemInserted(sender As Object, e As FormViewInsertedEventArgs) Handles FVParent.ItemInserted ' 親カテゴリーのデータが挿入された ' データソースの内容を DataReader によって読み込み データがあれば LblEmp の Label コントロールの Visible プロパティを False にする Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then LblEmp.Visible = False ' 親カテゴリーに新しいデータが登録されたので Tree を再表示する ////////////////////////////////// ここからコードを追加する Tree.Nodes.Clear() Dim cnt As Integer = 0 Dim childcnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() childcnt = childcnt + 1 Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop ' ツリーノードを作成 表示する Tree.Nodes.Add(node) Loop ' ノードをすべて開きます Tree.ExpandAll() Reader.Close() LblEmp.Visible = False 'LblEmp.Visible=True である状態を考慮して False にする End If End Sub テーブル tbl_prodcate をもう一度データを空にします ブラウザーで表示 実行して下さい カテゴリー名 に 野球 と入力して 挿入ボタンをクリックして下さい FVParent が消えて 左列の Tree に親カテゴリーである 野球 というノードが表示されました 大成功です! 実行画面をとじます

56 55 コンピュータープログラマーなら 関数 ( プロシージャ ) をマスターしよう 8 現在の CreateCategory.aspx の Load イベントでは下記のようなコードで Tree のノードを作成して 表示することをプログラムしました If reader.hasrows Then と最終行の End If の間のコードは Tree のノードを生成して データの内容によって 周辺のサーバーコントロールの表示 非表示を制御しています 先程このひと固まりのコード群をコピーアンドペーストしましたが このコピーアンドペーストの作業をする必要が今後数回発生するかも知れません またこのひと固まりの内容の一部を修正するかもしれません そのたびに同じ修正を数か所もすることになるでしょう そんな無駄を省く意味でも プログラミングの効率を図る意味でも関数 ( プロシージャ化 ) を勧めます 下記の選択部分を関数化します Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' ツリーノードを作成 表示する ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop Tree.Nodes.Add(node) Loop ' ノードをすべて開きます Tree.ExpandAll() reader.close() LblEmp.Visible = False 'LblEmp.Visible=True である状態を考慮して False にする Else ' テーブル ProdCate] が空の場合 FVParent を Insert モードにして データ挿入を促す FVParent.ChangeMode(FormViewMode.Insert) FVParent.Visible = True Me.LblEmp.Visible = True ' 親カテゴリーが空であることの Text を表示する End If End If End Sub 8 ヘルプキーワード Sub Procedures (Visual Basic) Function プロシージャ (Visual Basic)

57 56 上記の選択部分を Sub プロシージャにします まずプロシージャに名前をつけます 目的を意味する名前がいいでしょう 上記のコードは 親と子のツリーノードを作成し 表示する内容ですから CreateTree にしましょう 簡単な Sub プロシージャの場合の構文は Public または Private キーワードを前につけます 特定のページの中だけで使用する場合は Private キーワードをつけて Private Sub CreateTree() という構文で宣言します VS のエディターの場合 Private Sub CreateTree() とタイプすれば 下記のように自動で End Sub を記述してくれます CreateCategory.aspx.vb プログラムコードファイルの Class ~ End Class の間の末尾の空白の部分に下記の Sub プロシージャを作成して下さい コピペ可能 Private Sub CreateTree(ByVal MyTree As TreeView, ByVal reader As DbDatareader) End Sub この Sub プロシージャの中に 前頁の選択した部分のコードをコピペします 下記 If reader.hasrows Then Tree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' ツリーノードを作成 表示する ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop Tree.Nodes.Add(node) Loop ' ノードをすべて開きます Tree.ExpandAll() reader.close() LblEmp.Visible = False 'LblEmp.Visible=True である状態を考慮して False にする Else ' テーブル ProdCate] が空の場合 FVParent を Insert モードにして データ挿入を促す FVParent.ChangeMode(FormViewMode.Insert) FVParent.Visible = True Me.LblEmp.Visible = True ' 親カテゴリーが空であることの Text を表示する End If

58 57 関数 ( プロシージャ ) を使用する 早速 Sub プロシージャを使用します 次に CreateCagegory.aspx の Load イベントの If reader.hasrows Then の下の行 ( 行番号 9) から一番下の End If ( 行番号 47) までのコードを削除して先程作成した Sub プロシージャを呼び出します 下記コード Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) Me.CreateTree(Tree, reader) End If End Sub ブラウザーで表示 実行します 以前と同じように親カテゴリー名のノードが表示されます 実行画面を閉じます このような Sub プロシージャは 基礎的なプロシージャです 少し解説します パラメータ1 MyTreeというTreeViewクラス パラメータ2 reader という DbDataReader 9 クラスのオブジェクト Private Sub CreateTree(ByVal MyTree As TreeView, ByVal reader As DbDataReader) MyTree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) '//////// 追加位置ここから ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop '//////////////////////////////////// ここまで ' ツリーノードを作成 表示する MyTree.Nodes.Add(node) Loop MyTree.ExpandAll() End If End Sub 9 ヘルプキーワード DataReader によるデータの取得

59 58 上記のプロシージャでの パラメータを作成する意味をよく理解して下さい パラメータを作成することによって得られるメリットは このプロシージャをどのページからでも使用できるようにした場合 パラメータの値は 任意の TreeView クラスの ID が使用できるようになります つまり TreeView コントロールの ID が TreeA という ID 名であれば パラメータに TreeA を指定すれば 該当するページ内の TreeView コントロールの ID TreeA にノードが作成され 表示されます reader パラメータについても同じです あくまでもこれは基礎です この基礎を発展させていくと非常に便利なものになります コンピューターのプログラムの世界は このような Sub 及び Function プロシージャで成り立っていると言っても過言ではありません 是非 参考書籍とか インターネットの検索等で勉強して下さい 丁寧なサイトも数多くあります 上記のプロシージャのパラメータに SqlDataSource を追加することも出来ます その際の Sub プロシージャの宣言文は Private または Public Sub CreateParentTree(Byval MyTree As TreeView, ByVal readr As Db DataReader,ByVal Sds As SqlDataSource) となり,3 つのパラメータを持つプロシージャになります 現在の CreateParentTree プロシージャ変更後の Load イベントの記述は下記です Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load If Not IsPostBack Then Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) Me.CreateTree(Tree, reader) End If End Sub ブラウザーで表示 実行して 確認して下さい ( 現在のデータは 親カテゴリーの 野球 だけで 子カテゴリーはありません ) 確認出来たら 閉じてください ちょっと休憩本チュートリアルを実行されていて 見栄え デザイン等の面で物足りなさを感じられる方がおられると思います 筆者自身もそう思いながらこのチュートリアルを作成しております しかしページを飾ることが本チュートリアルの目的ではありません あくまでもプログラミングの知識の習得です Web ページのデザインについては プログラマーにとって必要な知識です どこまでデザインの知識を広げるかはプログラマー個人の見解であろうかと思います 実際に業務として Web サイトのプロジェクトを完成させる場合 プログラムを担う担当者はそのプロジェクトのプログラミングに集中しなければならないでしょう そんな多忙な状態で プログラミング以外のことに携わっていられないと思います が全くデザインの知識がないのでは逆にプログラムの時代性 ( 次元性 ) に遅れることになるでしょう 本チュートリアルのプログラム手順について これが唯一無二の答えではありません 筆者の我流です 例えば 例外処理 ( エラー処理 ) 等は行っていません 本チュートリアルの目的は 皆さまがこのチュートリアルを実行されて さらなるレベルの高いステージに上がることが出来ればという願いです 筆者は 長い時間をかけてこのプログラミングという 趣味 を続けてきました 2,3 か月もコンピュータから離れたこともありましたが運よく 趣味 であったため継続することが出来ました 確かに IT の技術を習得するのに 1 日や 2 日では無理です 大学や専門学校へ行っても 1 年や 2 年では 本チュートリアルの終了レベルには達しないと思います 理由があって 大学や専門学校等に行けない方には 独学の道もあります またそのための情報もあふれています 学歴があっても社会に出てから何もしない人より読者の皆様のようにやる気があれば 社会に貢献できるでしょう どうか社会に貢献して下さい 優秀な人材は自ずと社会に貢献しているそうです 本チュートリアルが 読者様に 立ちはだかる固い扉を開けるキーになれば幸いです

60 59 7. 子カテゴリー名の登録 コントロールの配置 子カテゴリー作成について まだ作成するための FormView コントロール及び SqlDataSource が CreateCategory.aspx のページ上に配置されていません まず Panel コントロール を sds EditParentCate の直下 ( デザインビューでは右側 ) に 配置して下さい ID は PanelChild にします Visible プロパティを False に設定して下さい 次にその PanelChild の中に FormView コントロールを配置して下さい ID を FVChild にします 次に デザインビューの FVChild の右側に SqlDataSource コントロール を配置して下さい ID を sdseditchildcate にします 下図のように sdseditchildcate は FVChild] の下に移動するように配置されます CSS の BootStrap の特性でしょうか プログラマーもこの特性を把握しておくのも必要です 下図 sdseditchildcate の データソースの構成 をします 読者の皆様もだいぶ慣れたでしょうから必要な部分だけを表示して 解説します テーブルは ProdSubCate を選択します 次図

61 60 WHERE 句を設定します 下図 上図にように設定してから OK ボタンをクリックします その後の ダイアログで 詳細設定 で INSERT UPDATE 行のチェックを入れて 完了 まで進みます sdseditchildcate のプロパティ コントロール名 コントロールの プロパティ名 値 ID 名 SqlDataSource sdschildcate DataSourceMode DataSet SelectQuery の SELECT コマンド SELECT * FROM [ProdSubCate] WHERE (([PCID] AND ([SPCID] FVChild を選択して 右肩のタスクメニューから データソースの選択 を選択して sdseditchild を設定します FVChild にデータが連結されて FVChild の表示が変化します FVChild にデータが連結されない場合は スキーマの更新を選択して 表示されたダイアログで値に何も入力しないで OK ボタンをクリックします FVChild の表示がデータ連結された表示に変わります 後程 FVChild をチューニングします

62 61 子カテゴリー名登録を強制する次に アプリケーションが起動されてまだ子カテゴリー名が 1 件も登録されていない場合 強制的に FVChild の新規登録画面を表示するようにプログラムします プログラムの要点 1. ページロード時のイベントの中で 親カテゴリーのデータがあることを確認した後で 子カテゴリーのデータが ある ない を判別する 2. 子カテゴリー名のデータがある場合は 何もしない 3. 子カテゴリー名のデータがない場合 FVChild をインサートモードにして 初回のデータ入力を強制する以上を考慮して プログラムします 開発メモ各コントロールの ID を素早く 楽に設定する方法の一つに html ビューで 該当するコントロールのタグ 下記 <asp:sqldatasource ID="SqlDataSource1" runat="server"></asp:sqldatasource> を <asp:sqldatasource ID="sdsCheckChild" runat="server"></asp:sqldatasource> と直接手入力で変更する方法もあります デザインビューにコントロールを配置直後には html ビュー内にそのコントロールのタグが強調表示されていて 素早く マウスポインターが持っていけます データが ある ない を判別する 子カテゴリー テーブル ProdSubCate にデータがあるかないかの チェックのために SqlDataSource コントロール をデザインビューの左列の sdschild の下に 配置します ID を sdscheckchild にします 下図 データソースの構成この DataSource は SELECT コマンドだけです 下図にその設定画面を表示しておきます

63 62 WHERE, 句の作成 追加 ボタンをクリックします 次へ ボタンー > 完了 ボタンで 終了します 次に sdscheckchild のプロパティウインドウで SelectQuery を開きます 下図のようになっています SELECT コマンド パラメータの欄 Deleted を下図のように設定して下さい パラメーター OK ボタンをクリックして 終了します

64 63 ここまでの要点は CreateTree プロシージャによって 親カテゴリー名のデータがあることを確認して 子カテゴリー名のデータがあるかないかには 関係なく 親カテゴリーをノードとして表示し 従属する子カテゴリーがあれば 子ノードとして表示し 親カテゴリーがない場合は 親カテゴリー名の登録を促して登録用の FormView コントロール を表示しました あと一つ重要なことは 子カテゴリーの登録があるか ないかです tbl_prodsubcate が空の状態の処理が必要です 空であれば子カテゴリーの登録を促します 下記の網掛け部分のコードは tbl_prodsubcate にデータがあるか ないか検証するコードです (DataView については 脚注のヘルプ情報を参照して下さい ) ' 子のカテゴリーの登録があるかないか チェックします Dim DV As DataView = ype(me.sdscheckchild.select(datasourceselectarguments.empty),dataview) If DV.Table.Rows.Count = 0 Then テーブル tbl_prodsubcate に一件もデータがない場合 何かをする End If 何かをするコードが下記のコードです 網掛け部分 ' 子のカテゴリーの登録があるかチェックします Dim DV As DataView = ype(me.sdscheckchild.select(datasourceselectarguments.empty),dataview) If DV.Table.Rows.Count = 0 Then ' 親のカテゴリー名は登録してあるが ' 子テーブルにデータがない場合 'Panel1.Visible = False LblEmp.Text = " 子カテゴリー名のデータは 1 件もありません " LblEmp.Visible = True 'FormView を Insert モードにして データ登録を強制する FVChild.ChangeMode(FormViewMode.Insert) PanelChild.Visible = True Else If DV.table.Rows.Count > 0 Then Exit Sub End If 上記の網掛け部分のコードを Private Sub CreateTree() プロシージャ にコピーアンドペーストします 追加したコードは網掛け部分の赤いコードです ( コメント文も含めて ) Imports セクションに System.Data クラスを追加します (DataView のため 10 ) Private Sub CreateTree(ByVal MyTree As TreeView, ByVal reader As DbDataReader) If reader.hasrows Then MyTree.Nodes.Clear() Dim cnt As Integer = 0 ' テーブルにデータがあるだけループする Do While reader.read cnt = cnt + 1 'TreeNode のインスタンスを node] という名前で設定する Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します (1. 野球 ) という表示にする node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = 10 ヘルプキーワード DataView 是非参照してください 使用例は参考になります

65 64 sdschild.select(datasourceselectarguments.empty) ' 親カテゴリー名に属するデータがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode() 'node.value を設定 C" は子として識別するための記号 nd.value = "C" & Childreader("SPCID") 'node.text を設定 nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop ' ツリーノードを作成 表示する MyTree.Nodes.Add(node) Loop ' ノードをすべて開きます MyTree.ExpandAll() ' 親のカテゴリー名は登録してあるが ' 子のカテゴリーの登録があるかチェックします Dim CDV As DataView = CType(Me.sdsCheckChild.Select(DataSourceSelectArguments.Empty), DataView) If CDV.Table.Rows.Count = 0 Then ' 子テーブルにデータがない場合 'Panel1.Visible = False LblEmp.Text = " 子カテゴリー名のデータは 1 件もありません " LblEmp.Visible = True 'FormView を Insert モードにして データ登録を強制する FVChild.ChangeMode(FormViewMode.Insert) PanelChild.Visible = True ElseIf CDV.table.Rows.Count > 0 Then Exit Sub End If Else ' テーブル ProdCate] が空の場合 FVParent を Insert モードにして データ挿入を促す FVParent.ChangeMode(FormViewMode.Insert) FVParent.Visible = True LblEmp.Visible = True End If End Sub テーブル ProdSubCate にデータが空の状態を確認して下さい ブラウザーで表示 実行します まだデータを入力しないで下さい FVChild の InsertItemTemplate が表示されていることを確認します 下図 実行画面を閉じます

66 65 FVChild をチューニングするアプリケーションが起動されてまだ子カテゴリー名が 1 件も登録されていない場合 強制的に FVChild の新規登録画面を表示するようにプログラムしました が まだ FVChild[ の InsertItemTemplate には子カテゴリー名を登録するのに必要なコントロールが備わっていません 次の手順に従ってプログラムしましょう デザインビューの FVChild の InsertItemTemplate を開いて右図の PCID の行を削除します 削除したあとにツールボックスから DropDownList コントロール をドラッグドロップします 右図 ID を DDLCateName にします 次に DDLCateName の右肩のタスクメニューから データソースの選択 を選択して 下表のように設定します データソースの選択 DropDownList で表示するデータフィールドの選択 DropDownList の値のデータフィールドの選択 sdsparent CateName PCID ( 注 : DropDownList で表示するデータフィールドの選択 のドロップダウンをクリックしても何も表示されない場合は ダイアログの下にある青い文字の スキーマの更新 をクリックして 表示される DataSource の Select ステートメントの OK ボタンをクリックして実行して下さい ) OK ボタンをクリックして終了します

67 66 次に FVChild の InsertItemTemplate で DDLCateName のすぐ右隣にマウスのカーソルを置き 5 行 2 列のテーブルを挿入します 下図 次に Deleted の行全体を削除します Keyword の行全体 SubCateName の文字をそれぞれ削除します その後 下図のように テーブルの 2 行目の右列に DDLCatename と 3 行目に SubCateNameTextBox を右列に移動し 左列にタイトルを下図のように追加します 挿入 ボタンと キャンセル ボタンを最下行の右列と左列に移動します そして 外枠の 印を右に移動して InsertItemTemplate 全体を適当に大きくします 下図 次に 1 行目の行全体を選択して セルの結合をします 下図 次に セルの結合した 1 行目に Label コントロールを配置します ID は LblFVChild にします Text プロパティに 新規に子カテゴリー名を登録します という文を入力して下さい ForeColor プロパティを赤色 Red にして下さい FontSize を 1.1em にして下さい下図

68 67 次に DDLCateName のタスクメニューから データ Bainding の編集 を選択し カスタムバインドのラジオボタンをアクティブにして 下図のように設定します ( 手入力 ) OK ボタンで終了します 次に DDLCateName を選択して プロパティウインドウを表示して下さい プロパティの AppendDataBoundItems を True に設定します そして Items プロパティのコレクションに 追加 ボタンをクリックして 下図のように設定して下さい Value の値は英数文字の 0 を入力して下さい メンバー 選択して下さいプロパティ 選択して下さいプロパティ の Text 選択して下さい 選択して下さいプロパティ の Value 数字の 0 OK ボタンをクリックして 終了します

69 68 TextBox を日本語入力にする次に InsertItemTemplate の SubCatenameTextBox を日本語入力できるように html コードを追加 します 赤色の文字 <tr> <td> 子カテゴリー名 </td> <td> <asp:textbox ID="SubCateNameTextBox" runat="server" Text='<%# Bind("SubCateName") %>' style="ime-mode: active; /> </td> </tr> 次に sdseditchildcate を選択して プロパティウインドウを表示します プロパティの InsertQuery の コマンド及びパラメータのエディター を開いて パラメータ の Deleted を選択して 右側の赤い 印をクリックして 削除します 次に INSERT コマンド の部分を 英数文字の 0 に変更します 下図は 変更後の図です INSERT コマンド INSERT INTO [ProdSubCate] ([PCID], [SubCateName], [Keyword], [Deleted]) 0) OK ボタンをクリック 5 行 2 列 のテーブルの外の文字 コントロール等全てを削除して下さい

70 69 次に ブラウザーで表示して 実行します テーブル ProdSubCate に 1 件もデータがない場合 下図が表示されます DDLCateName をドロップダウンして 野球 を選択して 子カテゴリー名を 小学生大会 と入力します 挿入ボタン をクリックします FVChild が消えます 実行画面を閉じます テーブルのデータを確認する 次に サーバーエクスプローラ ウインドウを表示して テーブル ProdCSubCate の テーブルデータを表示 して SubCateName 列に 小学生大会 名が登録されているのを確認します テーブルのデータ画面を閉じます

71 70 SqlDataSource の ItemInserted イベントを利用する 次に 新規に 子カテゴリー名が登録されたのですから TreeView(ID=Tree) にもその変更が反映されるべきです プログラムコードファイルに移ります FVChild] の ItemInserted イベントを選択 表示します FVParent_ItemInserted イベントにコードを追加したのと同様に下記のようにコードを追加します 網掛け部分 Private Sub FVChild_ItemInserted(sender As Object, e As FormViewInsertedEventArgs) Handles FVChild.ItemInserted Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then LblEmp.Visible = False CreateTree(Tree, reader) End If End Sub 前項でテーブル ProdCate からデータを削除したように テーブル ProdSubCate から 先程登録した 小学生大会 を削除して下さい ブラウザーで表示 実行します 親カテゴリーのドロップダウンから 野球 を選択して 子カテゴリー名は 前回と同じように 小学生大会 を入力して下さい 挿入 ボタンをクリックして 登録します 左列の Tree に親ノードが 野球 で 子ノードが 小学生大会 と正しく親子関係が解るように表示されました 実行画面を閉じます

72 71 ここまでプログラムしてきた内容をフロー図でまとめました 参考にして下さい

73 72

74 73

75 74 8. カテゴリー名の追加 編集 削除 TreeView からテータ ( 値 ) を取得する 親カテゴリー名 子カテゴリー名 両カテゴリー名の追加 変更 更新 削除 等編集をするためには FVParent で親カテゴリーの追加 変更 更新 削除 等編集をする FVChild で子カテゴリーの追加 変更 更新 削除 等編集をする というように使い分けます ユーザーの作業を効率よく出来るようにするのもプログラマーの役目でしょう せっかく 視覚的に解りやすい TreeView で親子関係を表示しているのですから それを利用しましょう そのために前項で Tree のノードを作成する段階で 親子それぞれの node.value を設定していました TreeView のノードクリック イベントをプログラムする CreateCategory.saps のデザインビューで Tree の下に Label コントロール ( テスト用 ) を配置します ID は LblTest にします CreateCategory.saps のデザインビューで Tree をダブルクリックして下さい VS は Tree_SelectedNodeChanged イベントをプログラムコードファイルに 自動で作成します 下記のコードをイベント内に 追加します Protected Sub Tree_SelectedNodeChanged(sender As Object, e As EventArgs) Handles Tree.SelectedNodeChanged 'Tree ノードを作成するときに親カテゴリー名の Node.Value を "P" & reader("pcid") に設定していました ' その Value(String) の中から先頭の文字 P" をとりだして 親カテゴリー名 ' をクリックしたことを判別します Dim head As String = Mid(Tree.SelectedNode.Value, 1, 1) 11 If head = "P" Then LblTest.Text = " クリックしたのは 親ノードです " ElseIf head = "C" Then Tree.SelectedNodeStyle.BorderColor = Drawing.Color.Red LblTest.Text = クリックしたのは 子ノードです End If End Sub ブラウザーで表示 実行して下さい 野球 をクリックします 野球 の外枠が赤色に表示され テスト用の LblTree の Text がプログラム通りに クリックしたのは 親ノードです と表示されています 続けて 小学生大会 をクリックします テスト用の LblTree の Text がプログラム通りに クリックしたのは 子ノードです と表示されています 実行画面を閉じます 11 Mid について文字列から指定された文字数分の文字列を返す 関数です ヘルプキーワード Mid 関数 (VisualBasic) すぐ理解できます

76 75 先程は ノードの Value プロパティでした ついでにノードの Text プロパティを取得します 上記のコードを下記に変更します 網掛けの部分 ( 手入力で変更する事 を推奨します ) vbfile 1 Protected Sub Tree_SelectedNodeChanged(sender As Object, e As EventArgs) Handles Tree.SelectedNodeChanged 'Tree ノードを作成するときに親カテゴリー名の Node.Value を "P" & reader("pcid") に設定していました ' その Value(String) の中から先頭の文字 P" をとりだして 親カテゴリー名 ' をクリックしたことを判別します Dim head As String = Mid(Tree.SelectedNode.Value, 1, 1) If head = "P" Then Dim catename As String catename = Mid(Tree.SelectedNode.Text, 3) LblTest.Text = " 親のカテゴリー名は " & catename & " です " ElseIf head = "C" Then Tree.SelectedNodeStyle.BorderColor = Drawing.Color.Red LblTree.Text = クリックしたのは 子ノードです End If End Sub ブラウザーで表示 実行します 親カテゴリーの 野球 をクリックします 下図 LblTree の Text を確認して 実行画面を閉じます これで TreeView(Tree) からのノードの Value Text プロパティの値を取得する方法のテストが終わりました CreateCategory.saps のデザインビューから LblTest. を削除して下さい またプログラムコードファイルの Tree_SelectedNodeChanged イベント内のコードを下記のように変更しておいて下さい 'Tree ノードを作成するときに親カテゴリー名の Node.Value を "P" & reader("pcid") に設定していました ' その Value(String) の中から先頭の文字 P" をとりだして 親カテゴリー名 ' をクリックしたことを判別します Dim head As String = Mid(Tree.SelectedNode.Value, 1, 1) If head = "P" Then ElseIf head = "C" Then End If ' End Sub Tree ノードをクリックすることにより親カテゴリーか子カテゴリーか の判別が出来るようになりました 現在 FVParent FVChild 共 ItemInsertTemplate しか チューニングは済んでいません これから両 FormView の ItemTemplate EditItemTemplate をチューニングしていきます

77 76 FVParent を Panel コントロールの中に入れる ここで FVParent を Panel コントロールの中に入れます 中列 の FVParent の直上 html コードの <h4> 中列 </h4> の直下にツールボックスから Panel コントロールをドラッグドロップします 下図 ID を PanelParent にします Html コードビューとデザインビューの間に黄色のバーが表示され 両ビューの同期を促すメッセージが表示されますので クリックして 同期して下さい デザインビューには Panel コントロールが FVParent の上に点線の枠で表示されています デザインビューの FVParent の上のタグ名のタブをマウスでドラッグしながら PanelParent にドロップします 1,2 秒後に html コードビューも自動で変化して FVParent が PanelParent で抱合されるようになります 次に PanelParent の Visible プロパティを False にして下さい

78 77 FVParent の Template の修正 ItemTemplae を修正する FVParent の ItemTemplate の中程にマウスポインターをおいて 3 行 2 列のテーブルを IDE 上部のメニュー テーブル から挿入します 下図 テーブルの左列の 1 行目に SPID 2 行目に 親カテゴリー名 と入力して 3 行目どれかのセルを右クリックして 変更 -> セルの分割 ->2 にして OK その行に左から 編集 削除 新規登録 という LinkButton コントロール を移動します 右側の列 1 行目に SPCIDLabel を 2 行目に CateNameLabel を移動して下さい その他の テーブルの外のコントロールや文字は削除して下さい 下図に変更後の ItemTemplate を表示します 右図において 親カテゴリー名の行と編集 削除の行を 1 行増やして空間を作った方が見栄えがいいかもしれません また 編集などの LinkButton コントロールを ImageButton コントロールに変更して Image をリンクして 見栄えをよくすることもできます 本チュートリアルでは プログラミングの解説が目的ですので デザインの面では 読書の皆さんにお任せします LinkButton の 削除 のプロパティ OnclientClick に return confirm( 本当に 削除しますか? ) と入力します

79 78 DataSource の DeleteQuery の DELETE コマンドを修正する 次に sdseditparentcate のプロパティ DeleteQuery の DELETE コマンドを開いてください DELETE コマンド 全文を削除して 下記のようにクエリ文を入力します ( コピペ可 ) UPDATE [ProdCate] SET [Deleted] = 1 WHERE [PCID] 下図のように パラメータ の PCID が FVParent から値を取得するようにします 下図 パラメータソース に注目して下さい OK ボタンをクリックして ダイアログを閉じて FVParent の テンプレートの編集 を終了して FVParent の DataKeyNames プロパティが PCID になっていることを確認します 目からウロコ読者の皆様の大多数の方は DELET コマンド になぜ UPDATE クエリ文 なのか少し戸惑うと思います がそもそも DELET コマンドは FormView 内において Bottun 系のプロパティ CommandName の 予約語 です 削除 ボタンの CommandName プロパティが Delete に設定してあれば 削除 ボタンを押下すると (ParentControl) の FormView に対して DELETE というコマンド を通知します 受け取った FormView は 自身の DataSource に対して DELETE コマンド を通知します 受け取った DataSource は コマンド名 が DELETE コマンド であれば ユーザーが DELETE コマンド に設定した SQL 文を実行します SQL 文が Insert クエリ であっても 実行するのです ですから コマンド名と SQL 文とは実行の内容は 関係ありません また コマンドの中に Insert 文も Update 文も区切って書くことは出来ます データベースに詳しい方なら 何個でもクエリ 文を書けます 荒っぽく言えば コマンドとは 予約語の CommandName を持つボタンが押下されたとき どのボタンが押されたかを識別するための信号みたいなものです

80 79 EditItemTemplate を修正する DataSource の UPDATE コマンドを修正する FVParent の DataSource sdseditparentcate の UpdateQuery の コマンド及びパラメータのエディター は下図のようにっています パラメータ UPDATE コマンド を下記のように変更します コピペ可能 UPDATE [ProdCate] SET [CateName] WHERE [PCID] パラメーターも下図のように変更します Deleted パラメータは削除します 上図のように 変更したら OK ボタンで終了します

81 80 FVParent の EditItemTemplate をチューニングする FVParent の EditItemTemplate を表示して下さい sdseditparentcate の UPDATE コマンドは CateName と PCID の 2 つの値を必要としています PCID のパラメータは 自動で FVParent から値を取得するように先程設定しました (DataKeyName= PCID) になっています したがって EditItemTemplate で更新 (UPDATE) に必要なデータ ( 値 ) は CateName だけです 下図のように修正します テーブルは 4 行 2 列です 左図において PCID のデータを表示しなくてもプログラムには何ら影響はありません が PCID のデータを表示すべきか? すべきでないか? については 筆者は シーンによっては 表示した方がいいと思います 現在の このシーンの場合は 一般ユーザーには関係なく サイト管理者が 管理するページなので データテーブルのデータを意識する面で 必要な気がします CateNameTextBox を日本語入力できるようにして下さい 以上で FVParent のチューニングを終了します タスクメニューがら テンプレ 編集終了 をクリックします Tree の親ノードクリックのテスト FVParent の各イベント処理プログラム この時点で プログラムコードファイルに移って FVPaent のイベント 1 ItemInserted 2 ItemUpdated 3 ItemDeleted の 3 つのイベントハンドラーに PanelParent.Visible = False というプログラムコードを追加しておいてください 赤のコードを追加します 1 Private Sub FVParent_ItemInserted(sender As Object, e As FormViewInsertedEventArgs) Handles FVParent.ItemInserted PanelParent.Visible = False ' 親カテゴリーのデータが挿入された ' データソースの内容を DataReader によって読み込み データがあれば LblEmp の Label コントロールの Visible プロパティを False にする Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) 2 Private Sub FVParent_ItemUpdated(sender As Object, e As FormViewUpdatedEventArgs) Handles FVParent.ItemUpdated PanelParent.Visible = False End Sub 3 Private Sub FVParent_ItemDeleted(sender As Object, e As FormViewDeletedEventArgs) Handles FVParent.ItemDeleted PanelParent.Visible = False End Sub 続いて Tree_SelectedNodeChanged イベントに下記のようにコードを追加します 網掛け部分の赤のコードが追加コード

82 81 PanelParent.Visible = False PanelChild.Visible = False Dim head As String = Mid(Tree.SelectedNode.Value, 1, 1) If head = "P" Then Dim catename As String catename = Mid(Tree.SelectedNode.Text, 3) Me.sdsEditParentCate.SelectParameters("CateName").DefaultValue = catename With Me.FVParent.Visible = True End With Me.PanelParent.Visible = True Test します CreateCategory.aspx ページをブラウザーで表示 実行します 親ノードを編集するために 野球 ノードをクリックします 中列 に FVParent が ItemTemplate で表示されて 編集 削除 新規作成 がそれぞれ出来ます 新規作成 を選択して 親カテゴリー名に サッカー と入力して 挿入 ボタンをクリックして サッカー という親カテゴリー名を新規に作成して下さい 左列 の Tree の親ノードに サッカー が追加表示されて FVParent は表示から消えています 実行画面を閉じます ProdCate テーブルのデータの表示で サッカー が新規に登録されているのを確認して下さい 同時に Deleted 列の値が False になっていることも確認して下さい sdseditparentcate の InsertQuery 通りに登録されていることも確認して下さい (.NET のデータベースの値 False は SQL 文中では 数字の 0 です True は 1 です )

83 82 FVChild のチューニング FVChild の ItemTemplate を修正する FVChild の ItemTemplate のデザインと Web サーバーコントロールの配置をしましょう ItemTemplate の中程にマウスポインターをおいて 4 行 2 列のテーブルを IDE 上部のメニュー テーブル から挿入します 下図 テーブルの左列の 1 行目に SPCID 2 行目に 子カテゴリー名 4 行目どれかのセルを選択状態にして 変更 -> セルの分割 ->2 にして OK その行に左から 編集 削除 新規作成 という LinkButton コントロール を移動して 配置します 右側の列 1 行目に SPCIDLabel を 2 行目に SubCateNameLabel を移動して下さい その他のテーブルの外のコントロールや文字は削除して下さい BackSpace キーや Delete キーをうまく使用して 作業するとスムーズに出来ます 下図に変更後の ItemTemplate を表示します 上図の 削除 ボタンを選択して プロパティの OnClientClick の値を return confirm( 本当に削除しますか? ) と入力して下さい 続いて 右肩のタスクメニューで EditItemTemplate を選択して 表示して下さい

84 83 EditItemTemplate を修正する EditItemTemplate の中程にマウスポインターをおいて 4 行 2 列のテーブルを IDE 上部のメニュー テーブル から挿入します 下図 テーブルの左列の 1 行目に SPCID 2 行目に 子カテゴリー名 とそれぞれ入力します 右側の列 1 行目に SPCIDLabel を 2 行目の右列に SubCateNameTextBox を移動して下さい 4 行目の左列に 更新 LinkButton を 右列に キャンセル LinkButton] を移動して 配置して下さい 下図 その他のテーブルの外のコントロールや文字は削除して下さい下図に変更後の EditItemTemplate を表示します 子カテゴリー名の右列の SubCateNameTextBox を日本語入力にします この状態のままにしておきます

85 84 DataSource の DELETE コマンドを修正する 次に sdseditchildcate のプロパティウインドウを開いて DeleteQuery を展開します 下図 DELTE コマンド の SQL 文全てを削除します 下記の SQL 文を入力します ( コピペ可能 ) UPDATE [ProdSubCate] SET [Deleted] = 1 WHERE [SPCID] 次図のように パラメータ の PCID が FVChild から値を取得するようにします 次図 パラメータソース に注目して下さい OK ボタンをクリックして 画面を閉じます

86 85 sdseditchild の UPDATE コマンドを修正する 次に sdseditchildcate のプロパティウインドウを開いて UpateQuery を展開します 下図 UPDATE コマンド の SQL 文を修正します delete キーをうまく使用して変更して下さい 下図 パラメーター OK ボタンをクリックして ダイアログを閉じて FVChild の テンプレートの編集 が表示されていれば 終了して FVPChild の DataKeyName プロパティが SPCID になっていることを確認します Insert コマンドは すでに修正してあります 次に プログラムコードファイルに移ります

87 86 FVChild の各イベント処理プログラム プログラムコードファイルで 必要に応じて 下記のイベントを 選択 作成して下さい この時点で FVChild のイベント 1 ItemUpdated 2 ItemDeleted 3 ItemInserted の 3 つのイベントハンドラーに下記のコードを追加して Tree を再表示するようにして下さい Private Sub FVChild_ItemUpdated(sender As Object, e As FormViewUpdatedEventArgs) Handles FVChild.ItemUpdated Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) CreateTree(Tree, reader) End Sub Private Sub FVChild_ItemDeleted(sender As Object, e As FormViewDeletedEventArgs) Handles FVChild.ItemDeleted PanelChild.Visible = False Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) CreateTree(Tree, reader) End If End Sub Private Sub FVChild_ItemInserted(sender As Object, e As FormViewInsertedEventArgs) Handles FVChild.ItemInserted PanelChild.Visible = False Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) LblEmp.Visible = False CreateTree(Tree, reader) End Sub

88 87 Tree の子ノードクリックのテスト Tree_SelectedNodeChanged イベントに下記のようにコードを追加します 網掛け部分の赤いコードが追加コード Me.PanelParent.Visible = True ElseIf head = "C" Then Dim pid As String = Mid(Tree.SelectedNode.Parent.Value, 2) Dim id As String = Mid(Tree.SelectedNode.Value, 2) Me.sdsEditChildCate.SelectParameters("PCID").DefaultValue = CInt(pid) Me.sdsEditChildCate.SelectParameters("SPCID").DefaultValue = CInt(id) With Me.FVChild.Visible = True End With Me.PanelChild.Visible = True End If End Sub CreateCategory.aspx ページをブラウザーで表示 実行します 子ノードを編集するために 小学生大会 の子ノードをクリックします 中列 に FVChild の ItemTemplate で表示されて 編集 削除 新規作成 がそれぞれ選択出来ます 新規作成 を選択して ドロップダウンリストから 親カテゴリー名に サッカー 選択して 子カテゴリー名の入力テキストボックスに 中国大会 と入力して 挿入 ボタンをクリックして 中国大会 という子カテゴリー名を新規に作成して下さい 左列 の Tree の親ノードの サッカー に 中国大会 という子ノードが追加表示されて FVChild は表示から消えています 実行画面を閉じます ProdSubCate テーブルのデータの表示で 中国大会 が新規に登録されているのを確認して下さい

89 88 好奇心が大事 BootStrap の Panel BootStrap のコンポーネントを使用して見ましょう 現在の CreateCagegory.aspx の Tree の周辺の html コードは下記のようになっています 青色のコード部分 <div class="col-md-4 col-sm-4"> <h4> 左列 </h4> <div class="panel panel-primary"> <div class="panel-heading"><h3> 現在のカテゴリー構成 </h3> 親ノードをクリックすると親カテゴリー名の <br /> 新規追加 編集更新 削除が出来ます <div class="panel-body"> <asp:label ID="LblEmp" runat="server" Text=" 親カテゴリーのデータは 1 件もありません " ForeColor="Red" Visible="False"></asp:Label> <asp:treeview ID="Tree" runat="server" NodeIndent="50" ShowLines="True"> <ParentNodeStyle ForeColor="#996600" /> <RootNodeStyle Font-Bold="False" /> <SelectedNodeStyle BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" /> </asp:treeview> <div class="panel-footer"><p> 子ノードをクリックすると子カテゴリー名の <br /> 新規追加 編集更新 削除が出来ます </p> <asp:sqldatasource ID="sdsParent" runat="server" ConnectionString="<%$ Con Html コード上で 赤いコードで LablEmp と Tree を囲むようにして html コードを追加します ブラウザーで表示 実行して下さい 実行の結果下図 実行画面を閉じます Tree ノードクリックのイベントも問題なく動作します プログラムコードでごそごそしなくても Html コードを追加しただけでこんなに見栄えが良くなるのです 是非読者の皆様も本チュートリアルを幹として 枝葉をアレンジしてプログラミングを楽しんでください

90 89 FVParent を Bootstrap のパネルで包む 同じように FVParent も BootStrap の Panel で抱合します html コードで PanelParent の直下の FVParent を下記のコードで抱合します 赤色のコード部分 <h4> 中列 </h4> <asp:panel ID="PanelParent" runat="server" Visible="False"> <div class="panel panel-warning"> <div class="panel-heading"><h3> 親のカテゴリー編集 </h3><br /> 新規追加 編集更新 削除が出来ます <div class="panel-body"> <asp:formview ID="FVParent" runat="server" DataKeyNames="PCID" DataSourceID="sdsEditParentCate" Width="100%"> <EditItemTemplate> <table class="nav-justified">.. </table> </ItemTemplate> </asp:formview> Footer は作成しません </asp:panel> FVChild を Bootstrap のパネルで包む html コードで PanelChild を下記のコードで抱合します 赤色のコード部分 </UpdateParameters> </asp:sqldatasource> <asp:panel ID="PanelChild" runat="server" Visible="False"> <div class="panel panel-warning"> <div class="panel-heading"><h3> 子のカテゴリー編集 </h3><br /> 新規追加 編集更新 削除が出来ます <div class="panel-body"> <asp:formview ID="FVChild" runat="server" DataKeyNames="SPCID" DataSourceID="sdsEditChildCate"> <EditItemTemplate> <table class="nav-justified">... </ItemTemplate> </asp:formview> <asp:sqldatasource ID="sdsEditChildCate" ブラウザーで表示して Tree の親ノードと子ノードをクリックして 挙動を確認して下さい 実行画面を閉じます

91 90 削除したカテゴリー名の復活 次に FVParent 及び FVChild 両 FormView の DELETE コマンドを UPDATE クエリ で テーブル ProdCate 及び ProdSubCate の Deleted 列を True にするようにプログラムしてきました その理由は 販売サイトで商品を Web ページ上で陳列して運営する場合 商品の在庫状況で商品陳列を一時やめて 在庫が整いしだい商品の陳列を再開する場合素早く復活させる事を可能にするために Deleted 列を商品の 表示 非表示 のフラッグとして利用します 親カテゴリーも同様な状況が想定されます したがって CreateCategry.aspx の右列に休止状態の 子カテゴリー 親カテゴリーの一覧を表示し 復活できる機能を作成します GridView コントロールを配置 ページの 右列 に GridView コントロール を配置します ID を GVSleepParent にします つづいて SqlDataSource コントロール を GVSleepParent の下に配置して ID を sdssleepparent にします sdssleepparent の下にもう一つ GridView コントロール を配置します ID は GVSleepChild にします その下に SqlDataSource コントロール を配置して ID を sdssleepchild とします sdssleepparent] のデータソースの構成 1. テーブルは ProdCate を選択します 2. WHERE 句は 下図のように設定します 3. 詳細設定 ( 下図 ) をして 完了 ボタンまで進み 終了します 4. デザインビューの sdssleepparent を選択して プロパティの UpdateQuery を展開します UPDATE コマンド ( 下記 ) を変更します 5. UPDATE [ProdCate] SET [CateName] [Deleted] WHERE [PCID] 6. 変更後の UPDATE 文 UPDATE [ProdCate] SET [Deleted] WHERE [PCID] 7. パラメータの欄の CateName を削除して下さい 変更後のパラメータ欄下図 8. OK ボタンをクリックして 終了します 上記以外の InsertQuery DeleteQuery パラメータはそのままにしておきます GVSleepParent を選択して タスクメニューから データソースの選択 のドロップダウンリストから sdssleepparent を選択します GVParent に sdssleepparne が関連つけられます

92 91 sdssleepchild のデータソースの構成 1. テーブルは ProdSubCate を選択します 2. WHERE 句は下図のように設定します 3. 詳細設定 下図 をして 終了 ボタンまで進み 終了します 4. デザインビューの sdssleepchild を選択して プロパティの UpdateQuery を展開します UPDATE コマンド ( 下記 ) を変更します UPDATE [ProdSubCate] SET [PCID] [SubCateName] [Deleted] WHERE [SPCID] 5. 変更後の UPDATE 文 UPDATE [ProdSubCate] SET [Deleted] WHERE [SPCID] 6. パラメータの欄の CateName と PCID を削除して下さい 変更後のパラメータ欄下図 7. OK ボタンをクリックして 終了します 8. 上記以外の InsertQuery DeleteQuery パラメータはそのままにしておきます 前項の sdssleepparent で GridView とデータソースを関連つけたように GVSleepChild に sdssleepchild を関連つけてください

93 92 GridView の列の編集 GVSleepParent の右肩のタスクメニューから 列の編集 を選択します 下図のように 選択されたフィールド の CateName を選択します 右側の BoundField のプロパティ の HeaderText を 親カテゴリー名 に変更します 次に PCID を選択して BoundField のプロパティ の Visible を False にします 次に 選択されたフィールド の Deleted を選択して BoundField のプロパティ の HeaderText を 表示 : 非表示 に変更して下さい OK ボタンをクリックして 列の編集 を終了します 次に タスクメニューの 編集を有効にする を選択して もう一度 列の編集 をします 下図のようになっています 上図の一番上の 編集 更新 キャンセル を選択して 右側の下向きの矢印を数回クリックして 下図のように移動して下さい OK ボタンをクリックして 列の編集 を終了します 下図のようになります

94 93 GVSleepChild についても 同じ作業方法で 下図のようにします ( PCID と SPCID Keyword の BoundField のプロパティ の Visible それぞれ False にします GVParent と同じように 編集機能を付加します 結果下図

95 94 カテゴリー名の削除 復活をプログラムする 次に プログラムコードファイルに移って FVChild_ItemDeleted イベントにコードを追加します 選択部分 Private Sub FVChild_ItemDeleted(sender As Object, e As FormViewDeletedEventArgs) Handles FVChild.ItemDeleted PanelChild.Visible = False Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) CreateTree(sdsParent, sdschild, Tree, reader) 'Delete コマンドが実行され データテーブル ProdCate] の Deleted 列が変更された (UpdaeSql 文が実行される ) GVSleepChild.DataBind() End Sub そのまま プログラムコードファイルに留まって GVSleepChild_RowUpdated イベントを選択 作成して 下記のコードを追加します 選択部分 Private Sub GVSleepChild_RowUpdated(sender As Object, e As GridViewUpdatedEventArgs) Handles GVSleepChild.RowUpdated Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) CreateTree( Tree, reader) End Sub 次に ブラウザーで表示 実行します Tree の 親ノード のどれかをクリックして 親カテゴリー名 テニス を追加して下さい 次に 子ノード のどれかをクリックして テニス の子カテゴリー名 山陰大会 という 子カテゴリー名を追加して下さい 下図のようになります 次に Tree の親ノードの 野球 の子ノード 小学生大会 をクリックして 表示される FVChild の 削除 を選択します FVChild の DeleteItemTemplate の 削除 ボタンのプロパティ OnClientClick で設定した 本当に削除しますか? のメッセージが表示されます OK をクリックして 続行します Tree の子ノードから 削除した 子ノードが消えています そのままの状態で 右列の GridView GVSleepChild に表示された 小学生大会 の編集をクリックして 表示 : 非表示 のチェックをはずして 更新 をクリックして下さい Tree に再び 表示されて復活しました 目からウロコ 再び!!?

96 95 続けて 下記のイベントを選択 追加して 赤いコードの部分を追加して下さい Private Sub FVParent_ItemDeleted(sender As Object, e As FormViewDeletedEventArgs) Handles FVParent.ItemDeleted 'Command によるイベントです PanelParent.Visible = False Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) CreateTree(Tree, reader) 'Delete コマンドが実行され データテーブル ProdCate] の Deleted 列が変更された (UpdaeSql 文が実行される ) GVSleepParent.DataBind() End Sub 下記イベントは新規にプログラムコードファイル上で 選択 作成して 赤色のコードを追加します Private Sub GVSleepParent_RowUpdated(sender As Object, e As GridViewUpdatedEventArgs) Handles GVSleepParent.RowUpdated Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) CreateTree(Tree, reader) End Sub 次に GVSleepParent の テンプレートの編集 を開始すると EmptyDataTemplate が表示されます 空欄に 非表示の親カテゴリーのデータは ありません と入力して テンプレートの編集終了をします 同じように GVSleepChild の EmptyDataTemplate にも 非表示の子カテゴリーのデータは ありません と入力して テンプレートの編集終了 して下さい

97 96 デザインも大事 GVSleepParent 及び GVSleepChild の両 GridView コントロールを BootStrap の Panel で抱合して見ましょう <div class="col-md-4 col-sm-4"> <h4> 右列 </h4> <%--BootStrap--%> <div class="panel panel-success"> <div class="panel-heading"> 非表示の親カテゴリー名 <div class="panel-body"> <asp:gridview ID="GVSleepParent" runat="server" AutoGenerateColumns="False" DataKeyNames="PCID" DataSourceID="sdsSleepParent"> <Columns> <asp:boundfield DataField="PCID" HeaderText="PCID" InsertVisible="False" ReadOnly="True" SortExpression="PCID" /> <asp:boundfield DataField="CateName" HeaderText=" 親カテゴリー名 " SortExpression="CateName" /> <asp:checkboxfield DataField="Deleted" HeaderText=" 表示 : 非表示 " SortExpression="Deleted" /> <asp:commandfield ShowEditButton="True" /> </Columns> <EmptyDataTemplate> 非表示の親カテゴリー名はありません </EmptyDataTemplate> </asp:gridview> <div class="panel-footer"><small> チェックを外すと表示します </small> <%-- BootStrap End--%> <asp:sqldatasource ID="sdsSleepParent" runat="server" </asp:sqldatasource> <%--BootStrap--%> <div class="panel panel-success"> <div class="panel-heading"> 非表示の子カテゴリー名 <div class="panel-body"> <asp:gridview ID="GVSleepChild" runat="server" AutoGenerateColumns="False" DataKeyNames="SPCID" DataSourceID="sdsSleepCjhild"> <Columns> <asp:boundfield DataField="SPCID" HeaderText="SPCID" InsertVisible="False" ReadOnly="True" SortExpression="SPCID" /> <asp:boundfield DataField="PCID" HeaderText="PCID" SortExpression="PCID" Visible="False" /> <asp:boundfield DataField="SubCateName" HeaderText=" こカテゴリー名 " SortExpression="SubCateName" /> <asp:checkboxfield DataField="Deleted" HeaderText=" 表示 : 非表示 " SortExpression="Deleted" /> <asp:commandfield ShowEditButton="True" /> </Columns> <EmptyDataTemplate> 非表示の子カテゴリー名はありません <br /> </EmptyDataTemplate> </asp:gridview> <div class="panel-footer"><small> チェックを外すと表示します </small> <%-- BootStrap End--%>

98 97 ブラウザーで表示して 両 GirdView のデザインを確認して 下さい 実行画面を閉じます

99 98 カテゴリー別に商品を登録 ( アップロード ) する プログラムの手順 1. 商品登録 ( アップロード ) ページを作成する 2. Image ファイル格納用のフォルダを作成 3. App_Code] フォルダにクラスファイルを作成して関数を作る 4. TreeView の生成を関数化する 5. DataLIst コントロールでフォルダ内のファイルを読み込む 6. ページの右列に WebServer コントロールを配置する 7. アップロード用フォルダにファイルをコピーする 8. Tree クリックのイベントをプログラムする 9. データテーブルに Image( 写真 ) を登録する関数 ( プロシージャ ) を作成する 10. クリックイベントで 登録 ( アップロード ) する 11. 登録 ( アップロード ) した商品 ( 写真 ) を編集状態にして 表示する 12. Image ファイル格納用のフォルダを空にする 次ページのワークフロー図を参照して下さい ( 印刷すれば チュートリアル進行も早くなります )

100 99

101 商品登録 ( アップロード ) ページを作成する ソリューションエクスプローラの Admin フォルダ内に Site.master をマスターページとする ProductsUpload という Web フォーム ( マスターあり ) を作成して 下さい ProductsUpload.aspx のレイアウトを下記のようにして下さい 前図のレイアウトを作成するための html コードです 選択部分コピペ可能 <asp:content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"> <div class="jumbotron"> <h4> 商品アップロード </h4> <div class="row"> <div class="col-md-6 col-sm-6"> <h4> 左列 </h4> <div class="col-md-3 col-sm-3"> <h4> 右列 </h4> <div class="col-md-3 col-sm-3"> <h4> 右列 </h4> </asp:content> さらに <div>jumbo の中に BootStrap の タブメニュー を下記のように html コードで追加します <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> ブラウザーで表示 実行します タブメニューを確認します 実行画面を閉じます 正しく表示されていたら 上記の <ul>~</ul> までをコピーして AdminMenu.aspx と CreateCategory.aspx の <div>jumbotron の同じ <ul>~</ul> の部分と差し替えします そしてそれぞれのページ部分をアクティブにして下さい ソリューションエクスプローラから ブラウザーで表示 実行して メニューによるページ遷移を確認して下さい 実行画面を閉じます

102 Image ファイル格納用のフォルダを作成 商品 ( 写真 ) を登録する場合は 一度に複数の商品の Image( 写真 ) を登録 ( アップロード ) 出来る事が必要です そのために Web サイト内 ( プロジェクト内 ) の特定のフォルダに複数 あるいは 1 個のファイルを格納しておいて ワンクリックで登録 ( アップロード ) します ソリューションエクスプローラのルート上に UploadImages というフォルダを作成して下さい 下図 3. App_Code] フォルダにクラスファイルを作成して関数を作る 1213 ProductUpload.aspx がロードされたときに DataList コントロール に表示するためのプログラムです ソリューションエクスプローラの App_Code フォルダを右クリックー > 追加 > クラス と進み DataAccess と入力して OK ボタンをクリックします 表示されたファイルの Import セクションに下記の網掛けの部分の ImportFile を追加して下さい Imports Microsoft.VisualBasic Imports System.Data Imports System.Data.SqlClient Imports System.IO Public Class DataAccess End Class そして DataAccess クラス内に 下記の Function プロシージャ ( 関数 ) を作成します 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 ここで 一度ソリューションエクスプローラからー >Web サイト (WebShop)->ブラウザーで表示 実行しておいてください 新しく作成した クラスをコンパイルして プロジェクトに認識させるためです 後ほどこの関数を使用します VS ではソリューション (Web サイト ) 内のどのページからでも利用できるクラス ( 関数群の集合 ) を APP_Code フォルダに作成する事を推奨しています 12 ヘルプキーワード コンピュータが行う処理の記述 : 初めてのプロシージャの作成 13 ヘルプキーワード ASP.NET Web サイト内の共有コードフォルダ

103 102 実行画面を閉じます 4. どのページからでも使用できる TreeView の生成を関数化する もう一つ APP_Code 内に クラスファイルを追加します ソリューションエクスプローラの APP_Code フォルダを選択して 追加 -> 表示されたダイアログで クラス -> 名前を Utility と入力して OK ボタンをクリックします 下図のように APP_Code フォルダ内に Utility.vb ファイルが作成されています Utility.vb ファイルの Import セクションに下記のコードを追加します Imports System.Data Imports System.Data.Common Public Class Utility Class Utility の中に下記のプロシージャを作成します 下記コード全てをコピペできます vbfile 2 Public Shared Sub CreateTree(ByVal sdsparent As SqlDataSource, ByVal sdschild As SqlDataSource, ByVal Tree As TreeView) 'sdsgetparentcate DataSource にデータがあるか DataView を使用して 検証します 1 Dim reader As DbDataReader = sdsparent.select(datasourceselectarguments.empty) If reader.hasrows Then ' テーブル ProdCate にデータがあれば 4 Tree.Nodes.Clear() Dim cnt As Integer = 0 Do While reader.read cnt = cnt + 1 Dim node As New TreeNode() 'node の Value プロパティを設定します node.value = "P" & reader("pcid") 'node の Text を設定します node.text = String.Format("{0}.{1}", cnt.tostring(), reader("catename")) ' 子ノードを生成する sdschild.selectparameters.clear() sdschild.selectparameters.add(("pcid"), CInt(reader("PCID"))) sdschild.selectparameters.add(("deleted"), CInt(0)) 'sdschild の DataSourcMode は DataReader にすること Dim Childreader As DbDataReader = sdschild.select(datasourceselectarguments.empty) ' データがある限りループして 子ノードを作成する Do While Childreader.Read() Dim nd As New TreeNode()

104 103 nd.value = "C" & Childreader("SPCID") nd.text = Childreader("SubCateName") node.childnodes.add(nd) Loop 'Tree にノードを追加する Tree.Nodes.Add(node) Loop Tree.ExpandAll() End If End Sub これで どのページからでも Utility クラスの CreeateTree() を呼び出せば カテゴリーの Tree 生成させることが出来ます この関数は 後ほど使用します

105 DataLIst コントロールにフォルダ内のファイルを読み込む PuroductsUpload.aspx のデザインビュー及びコードビューを並べて表示します 左列にツールボックスから DataList コントロール をドラッグドロップします (html コードビュー内にドラッグアンドドロップしたほうがやりやすいです ) ID を ImageList にします デザインビューの ImageList を選択して 右肩のタスクメニューー > データソースの選択 -> ドロップダウンリストからー > 新しいデータソース 表示されたダイアログから オブジェクト を選択します データソースに ID を指定します の入力欄に ObjGetImages にします 下図 OK ボタンクリック後 下図が表示されます ビジネスオブジェクトの選択 をドロップダウンして 一覧が頭文字 A から アルファベット順に表示さ

106 105 れていますので 約 50 行目位の頭文字 B の次の DataAccess を選択します 次図 次へ ボタンをクリック 表示された データメソッドの定義 の画面の メソッドの選択のドロップダウンリストから ListUpload(), 戻り値 ICollection を選択します 下図 ( 注 :ListUpload() が表示されない場合 Web サイトを一度 プラウザーで表示 を実行して下さい 新しいクラスを作成した場合 コンパイルして VS に認識させる事が必要です ) 完了 ボタンをクリック 終了します

107 106 次に ImageList の右肩のタスクメニューから テンプレートの編集 -> ItemTemplate 表示します その空白の欄に Label コントロールをドラッグドロップします ID を LblFile にします LblFile を選択状態にして 右肩のタスクから DataBindings の編集 をクリックします 表示されたダイアログの カスタムバインド の入力欄に Container.DataItem と入力します 次図 OK ボタンをクリックします 次に テンプレート編集の状態で タスクメニューから ドロップダウンを開いて 最下行の 区切り記号テンプレート を選択します 空白の部分に 日本語入力で しかく と入力して 黒い を入力して下さい 下図 テンプレート編集の終了 をします 次に DataList コントロールの ImageList を選択状態にして プロパティウインドウを表示して 下表 のように設定します ID 名 プロパ t ィ名 ImageList RepeatDirection Horizontal RepeatColumns 5 Width 100% BorderColor Black BorderStyle Solid BorderW idth 1px

108 107 テーブルコントロールを挿入して BootStrap のテーブルに変身する 次に html ビューで ImageList の直下に <br /> コードを追加して, 次に 1 行 3 列 のテーブルを挿入 して下さい そして Bootstrap の CSS table クラス (class= table table-striped ) に 変えます 次に 1 列目に Label コントロール を配置して下さい ID を LblPrice にします 次に 2 列目に TextBox コントロールを配置して下さい ID を TextMyPrice にします 次に 3 列目に Button コントロールを配置して下さい ID を BtnNext にします テーブル内の各コントロールのプロパティ表 コントロール ID 名 プロパティ名 値 LblPrice Text 価格 TextMyPrice TextMode Number Width 50px 日本語入力 (html コード ) style= ime-mode: inactive BtnNext Text 次へ 次に テーブルの 1 列目の上枠にカーソルを持っていき 下向きの 出現させて 列全体が選択状態になっていることを確認して プロパティウインドウの下から 6 行目の style プロパティをクリックして 右側のボタンをクリックして スタイルの変更 ダイアログを表示します カテゴリの選択 の ブロック を選択します 右側に表示された textalign のドロップダウンをクリックして right を選択します そのままの状態で カテゴリの選択 欄の 配置 を選択して Width を 150px にして下さい 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 の 3 か所を設定してください

109 108 ここまでで テーブルのデザインは 下図のようになっています ( テーブルの背景色は任意です ) 上図のテーブルを 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 をクリックして挙動を確認して下さい 実行画面を閉じます

110 109 Bootstrap の Panel で見栄えをよくする 次に ImageList と先程のテーブルを BootStrap の Cmponents の Panel で抱合します 上図の Html コード 18 行目の DataList タグの直上に Bootstrap の Panel のヘッダー部の下記のコードをを追加します 網掛け部分 ( 上図の行番号は 筆者の環境の場合であって読者様の場合とは一致しない場合があります ) <h4> 左列 </h4> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-body"> <asp:datalist ID="DataList1" runat="server" BorderColor="Black" 続いて Bootstrap のフッター部分のコードをテーブルの終了タグ </table> の直下に追加します 下記の位置 </tr> </table> <div class="panel-footer"> 価格を入力して 次へ ボタンをクリック 下図は Bootstrap の Panel のコードを追加した デザインビューの画面です 次に 今 追加した Bootstrap の Panel のヘッダー部の htm コード部分に追加の作業をします 下記の htm コードのヘッダー部 <div class= panel-heading > と の間に ツールボックスから Label コントロール を html コード上で ドラッグアンドドロップして下さい <h4> 左列 </h4> <div class="panel panel-primary"> <div class="panel-heading"> <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 class="panel-body">

111 110 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 End If End If End Sub ソリューションエクスプローラの UploadImages フォルダが空であることを確認して下さい ブラウザーで表示 実行します 下図は 実行画面です まだ UploadImages フォルダには ImageFile が一つもないので LblDLCount に アップロードフォルダーは空です UploadImages フォルダにファイルを追加して下さい と表示されています 実行画面を閉じます

112 111 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 End If End If End Sub LblDLCount.Text = " アップロードフォルダーに " & ImageList.Items.Count.ToString() & " 個のファイルがあります " 次に ソリューションエクスプローラの UploadImages フォルダに CD の TutoNo1 の SportsPhotos の BaseBall フォルダの 安木小野球 のフォルダを開き 3 個ほどファイルを追加して下さい そして ブラウザーで表示して 実行します 今度は UploadImages フォルダには ImageFile が存在したので 下図のような表示になります 実行画面を閉じます

113 112 次は 価格の入力と 次へ ボタンのプログラムをします 価格について 本サイトの場合大量のスポーツ写真を販売するので 1 枚づつの写真に価格を設定するのは現実的ではありません スポーツの大会の知名度等によって そのイベントのひとかたまりの写真群として 1 枚当たりの価格を考えた方が妥当だと思います したがって本チュートリアルの場合ひとかたまりの中の一枚の価格を設定します 商品ごとに価格を設定することもできます 1 個づつアップロードして 価格をその都度設定すればいいのです 次へ ボタンの役割は 価格の入力を確認して アップロード先のイベント名 ( 大会名 ) を選択するための TreeView を表示する役を利を担います 価格の入力用の TxtMyPrice には 確実に価格データが入力されるように 検証コントロールが関連つけられています 下記コードです <asp:requiredfieldvalidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TxtMyPrice" ErrorMessage=" 数字で 価格を入力して下さい " ForeColor="Red"></asp:RequiredFieldValidator 同時に TxtMyPrice の TextMode プロパティは 下図のように Number に設定しています 検証コントロールについては VS のヘルプ 検証コントロール で検索 参照して下さい 本チュートリアルでは 別章で検証コントロールの使用法を紹介しています 次へ ボタンのクリックイベントのプログラムする前に アップロード先を設定する TreeView を作成します

114 113 この項で行った作業を今後の作業に共通する説明 1. VS のテーブルの style プロパティを設定する方法 テーブルの 1 列目の上枠にカーソルを持っていき 下向きの 出現させて 列全体が選択状態になっていることを確認して プロパティウインドウの下から 6 行目の style プロパティをクリックして 右側のボタンをクリックして スタイルの変更 ダイアログを表示します カテゴリの選択 の ブロック を選択します 右側に表示された textalign のドロップダウンをクリックして right を選択します そのままの状態で カテゴリの選択 欄の 配置 を選択して Width を 150px にして下さい OK ボタンをクリックして 終了します 2. Bootstrap の Panel でオブジェクトを抱合する Sample1 <div class="panel panel-primary"> <div class="panel-heading">headertext <div class="panel-body"> Object <div class="panel-footer">footertext 3. VS の Panel コントロールでオブジェクトを抱合する Sample1 Html ビューの ImageList の終了タグ </asp:datalist> の直下にツールボックスから Panel コントロール をドラッグアンドドロップして下さい ID を PanelPrice にします 次に その PanelPrice の終了タグ </asp:panel> をマウスで選択して 切り取り をして テーブルの終了タグ </table> の直下に 貼り付け します 下記のコードのようになります </asp:datalist> <asp:panel ID="PanelPrice" runat="server"> <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=" 価格 "></asp:label> </td> <td> <asp:textbox ID="TxtMyPrice" runat="server" Width="50px" TextMode="Number" style="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> <div class="panel-footer"> 価格を入力し

115 114 イベント選択のための TreeView の作成 デザインビューの中列の <h4> 中列 </h4> の直下に ツールボックスの Panel コントロールを配置します ID を PanelTree にして Visible プロパティを False にします デザインビューで その PanelTree の中に ツールボックスのナビゲーションタブから TreeView コントロール を配置します ID を Tree にします 次に 今配置した Tree の右側に CreateCategory.aspx の sdsparent 及び sdschild という 2 つの sqldatasource を一度に 1 個づつ下図のようにコピーして貼り付けて Tree の下に配置します ( 注 :DataSource コントロールのコピーの方法は コピー元の DataSource を右クリックして 表示されるメニューから コピー を選択して 他のページに 貼り付け することが簡単に出来ます その際にデータソースの構成もコピーされます ) 次に Tree のプロパティを下表のように設定します TreeView の ID 名 プロパティ名 値 Tree Font Size 1.1em SelectedNodeStyle BorderColor Red Border Style Solid Border Width 1px NodeIndent 50 ShowLines True 次に デザインビューの価格入力の右側の 次へ ボタンをダブルクリックします プログラムコードファイルに IbtnNext_Click イベントハンドラーが作成されています 下記のコードを追加して下さい Protected Sub IbtnNext_Click(sender As Object, e As ImageClickEventArgs) Handles IbtnNext.Click Me.PanelTree.Visible = True End Sub 続けて プログラムコードファイルの Admin_UploadProducts_Load イベントに下記のコードを追加します 赤色のコード Private Sub Admin_UploadProducts_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() & " 個のファイルがあります " Utility.CreateTree(sdsParent, sdschild, Tree)

116 115 End If End If End Sub ソリューションエクスプローラの UploadImges フォルダにファイルがあることを確認して ブラウザーで表示して 実行します ImageList にアップロードするファイルがある状態で 価格 を入力して 次へ ボタンをクリックします 下図のようになります 実行画面を閉じます

117 116 Footer のない Bootstrap の Panel で Tree を抱合する 次に Tree も Bootstrap の Panel で抱合して ユーザーに解り易い説明文も付けます 下記 html コードを追加して下さい 赤のコード部分 <h4> 中列 </h4> <asp:panel ID="PanelTree" runat="server" Visible="False"> <div class="panel panel-primary"> <div class="panel-heading"> アップロード先のイベント名を選択して下さい </> <div class="panel-body"> <asp:treeview ID="Tree" runat="server" NodeIndent="50" ShowLines="True" Width="100%"> <SelectedNodeStyle BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" /> </asp:treeview> <%-- この部分に Panel の Footer を表示するコード 今回は Footer を付けません --%> ブラウザーで表示して 確認して下さい ユーザーに解り易くなったと思います 実行画面を閉じます

118 117 次に Tree の子ノードであるイベント名をクリックして 写真 ( 商品 ) をアップロードするプログラムをします 写真 ( 商品 ) を myproducts テーブルに登録する 写真ファイルを格納するデータベースのテーブル myproducts には データベースの Image 型 の Small 列と Poster 列の 2 つの列があります 一般に デジカメの写真ファイルは カメラの性能にもよりますが 幅 (Width) の値が 4000 ピクセル ~6000 ピクセル位あると思います このような大きなデータをそのまま Web 上に 1000 枚以上の写真を表示するのは 表示時間 格納ハードディスクの無駄が生じます それらの点を考慮して Small は 幅が 400 ピクセル Poster は 幅が 2000 ピクセルの大きさに修正して格納します デジカメの写真ファイルを小さくするためのプログラム関数を作成して myproducts テーブルの Small 列と Poster 列にバイナリデータとして登録します デジカメの写真ファイルを Web 表示用にサイズを縮小して登録 デジカメの写真ファイルのデータ量を縮小するための手順の概要 1. デジカメの写真ファイルのサイズの比率を保ち 指定されたサイズに変換するプログラム関数を作成する 2. データテーブルに格納するために指定されたサイズで 元の Image の比率を保ち Jpeg 形式にして それを Byte 配列にする関数を作成する 3. 上記の手続きを経て 生成したデータを他の商品データと共に myproducts テーブルに登録する関数を作成する 手順 1 のプログラム関数を下記に表示します App_Code フォルダの PhotoManager クラス に追加して下さい ' 補助関数 1 ' 指定された大きさの Image の寸法を計算して Size 構造体の Width,Height の値を返す 'oldsize は Image ファイルの元のサイズ 'targetsize は 指定するサイズ Private Shared Function CalculateDimensions(ByVal oldsize As Size, ByVal targetsize As Integer) As Size Dim newsize As Size ' 縦型の Image ファイルの場合は newsize の Height を指定寸法にして newsize の Width は 元の Image の縦 横の比率で算出する If (oldsize.height > oldsize.width) Then newsize.width = CType((oldSize.Width * CType((targetSize / CType(oldSize.Height, Single)), Single)), Integer) newsize.height = targetsize Else ' 横型の Image の場合指定サイズを newsize.with にあてる newsize.width = targetsize ' 元の縦 横の比率で高さを計算する newsize.height = CType((oldSize.Height * CType((targetSize / CType(oldSize.Width, Single)), Single)), Integer) End If Return newsize End Function

119 118 手順 2 のプログラム関数を下記に表示します App_Code フォルダの PhotoManager クラス に追加して下さい ' 補助関数 2 ' 指定されたサイズで元の Image の比率を保ち Jpeg 形式で保存し Byte 配列を返します 'Bitmap は ピクセルデータで定義したイメージを処理する場合に使用するオブジェクトです ' ビットマップは グラフィックスイメージのピクセルデータとその属性で構成されます 'help Keyword は Bitmap メンバを参照して下さい 'help Keyword emorystream.getbuffer 'help Keyword Graphics Private Shared Function ResizeImageFile(ByVal imagefile() As Byte, ByVal targetsize As Integer) As Byte() Using oldimage As System.Drawing.Image = System.Drawing.Image.FromStream(New MemoryStream(imageFile)) Dim newsize As Size = CalculateDimensions(oldImage.Size, targetsize) ' newimage は Bitmap オブジェクトです 指定したサイズの縦 横のサイズでピクセル情報を取得します Using newimage As Bitmap = New Bitmap(newSize.Width, newsize.height, PixelFormat.Format24bppRgb) 'Graphics クラスオブジェクトをディスプレイデバイスに描画するためのメソッドを提供します 'Graphics.FromImage メソッドは 指定した Image の新しい Graphics を返します Using canvas As Graphics = Graphics.FromImage(newImage) canvas.smoothingmode = SmoothingMode.AntiAlias canvas.interpolationmode = InterpolationMode.HighQualityBicubic canvas.pixeloffsetmode = PixelOffsetMode.HighQuality canvas.drawimage(oldimage, New Rectangle(New Point(0, 0), newsize)) Dim m As New MemoryStream 'newimage を新しく Graphics プロパティで加工された Bitmap イメージを 指定した形式で指定したストリームに保存します newimage.save(m, ImageFormat.Jpeg) 'MemoryStream.GetBuffer 戻り値 Type: System.Byte[] このストリームの作成に使用したバイト配列 Return m.getbuffer End Using End Using End Using End Function

120 119 手順 3 のプログラム関数を作成するために ストアドプロシージャの作成をします 商品情報をデータテーブルに登録するストアドプロシージャの作成下記コードでストアドプロシージャを作成して下さい CREATE PROCEDURE bit AS INSERT INTO [myproducts] ( [PCID], [SPCID], [ProductName], [FileName], [Price], [Descrip], [Small], [Poster], [RegiDate], [Scheck], [Deleted] ) @Deleted ) RETURN

121 120 手順 3 の商品データをデータテーブルに登録する Function プロシージャの作成 先程のストアドプロシージャを作成したら App_Code 内の PhotoManager クラス に下記の Add_ProductImage 関数を作成して App_Code フォルダの PhotoManager クラス に追加して下さい Public Shared Function Add_ProductImage(ByVal PCID As Integer, ByVal SPCID As Integer, ByVal ProductName As String, ByVal FileName As String, ByVal Price As Integer, ByVal BytesOriginal() As Byte) As Integer Using connection As New SqlConnection(ConfigurationManager.ConnectionStrings("SiteSqlServer").ConnectionString) Dim ret As Integer Using command As New SqlCommand("Add_ProductImage", connection) command.commandtype = CommandType.StoredProcedure command.parameters.add(new SqlParameter("@PCID", PCID)) command.parameters.add(new SqlParameter("@SPCID", SPCID)) command.parameters.add(new SqlParameter("@ProductName", ProductName)) command.parameters.add(new SqlParameter("@FileName", FileName)) command.parameters.add(new SqlParameter("@Price", Price)) command.parameters.add(new SqlParameter("@Descrip", "--")) command.parameters.add(new SqlParameter("@Small", ResizeImageFile(BytesOriginal, 400))) command.parameters.add(new SqlParameter("@Poster", ResizeImageFile(BytesOriginal, 2000))) command.parameters.add(new SqlParameter("@RegiDate", Today())) command.parameters.add(new SqlParameter("@Scheck", False)) command.parameters.add(new SqlParameter("@Deleted", False)) connection.open() ret = command.executenonquery() End Using Return ret End Using End Function

122 121 写真 ( イメージ ) ファイルのアップロード実行のデザイン (UpdatePregress を使用 ) Html ビューの <div class= row > の直下に ページ全体を 1 列にする <div class= col-md-12 colo-sm-12> ~ を作成して, その下に <div class="after"> を追加して下さい 下記 html コードの赤のコードを追加 <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 class="row"> <div class="col-md-12 col-sm-12"> <div class="after"> 次に <div class= col-md-12 col-sm-12> の直下に ツールボックスの AJAXExtention タブ から UpdatePanel を下記の html コードのようにドラッグアンドドロップします ID を UP1 にします Visible プロパティを False にします <div class="after"> <div class="row"> <div class="col-md-12 col-sm-12"> <asp:updatepanel ID="UP1" runat="server"></asp:updatepanel> 1 UP1の中に 下記の要領で テーブル (3 行 1 列 ) を配置しますデザインビューで UP1 を選択状態にして マウスポインターを点滅させた状態で IDE メニューの テーブル を選択して 3 行 1 列のテーブルを配置して下さい 2 テーブルにコントロールを配置します テーブルの1 行目に Button コントロール 2 行目にツールボックスの AJAXExtention タブ から UpdateProgress をドラッグアンドドロップします 3 行目に Label コントロール を配置します 下図 上の図で Button コントロール と Label コントロール との間の UpdateProgress コントロール には 後程 Image を挿入します

123 122 各コントロールのプロパティ コントロール名 ID 名 プロパティ名 値 Button BtnUp Text 空白 Visible True Width 100% UpdateProgress UpdateProgress1 DisplayAfter 500 Label LblFinish Text 空白 Visible False BorderColor Red BorderStyle Sorid BorderWidth 1px ForeColor Red 次に テーブル全体を選択状態にして 上の枠線にマウスを持っていき 下向き矢印 を出現させて style プロパティで ブロック -> text-align > center にします 次は UpdatePregress に Image を設定します

124 123 テーブル 2 行目の UpdateProgress に Image を設定する方法 ソリューションエクスプローラの Image フォルダに ajax-loader(1) というファイルがない場合 UpdateProgress 用の Image(CD 内の Images フォルダの ajax-loader(1) をソリューションエクスプローラの主ルート Images フォルダにコピーして下さい ( 注 :CD の Image フォルダを開いた時に表示されるダイアログの一番下の ファイル名 の右の Web ファイル のドロップダウンを開いて すべてのファイル にして下さい ) 次に デザインページ内の UpdateProgress コントロール を選択します 下図 上図の UpdateProgress コントロール の中に 用意しておいた ajax-loader(1).gif をドラッグアンドドロップします 下図のダイアログが表示されます 何も入力しなくてもいいですが せっかくですから 下図のように入力しておきます OK ボタンをクリックします 下図のようになります プロパティの DisplayAfter (500) の数字については 非同期通信を開始した何ミリ秒後に通信メッセージを表示するか指定する数字です つまり いくらかの遅延を設けることで表示されたアイコンの表示を明確にして ちらつきを防止する効果があります 尚 このような特殊な Image はインターネットからダウンロード出来ます その中の 2 つの Web サイトを紹介しておきます Ajaxload ( Preloaders.net (

125 124 TreeView コントロールのクリックイベントをプログラムする デザインビューで Tree をダブルクリックします プログラムコードファイルに Tree_SelectedNodeChanged イベントハンドラーが作成されます その中に下記のコードを追加します Protected Sub Tree_SelectedNodeChanged(sender As Object, e As EventArgs) Handles Tree.SelectedNodeChanged Dim head As String = Mid(Tree.SelectedNode.Value, 1, 1) If head = "P" Then Return ElseIf head = "C" Then 'Panel1 を表示する Me.UP1.Visible = True ' 親カテゴリー名を取得する Dim parent As String = Mid(Tree.SelectedNode.Parent.Text, 3) ' 親カテゴリー名を取得する Me.BtnUp.Text = parent & " の " & " " & Tree.SelectedNode.Text & " にアップロード " BtnUp にカテゴリー情報を標示する Me.BtnUp.Visible = True End If End Sub ImageList に写真ファイルが存在している状態で ブラウザーで表示して 実行して下さい 価格 を入力して 次へ ボタンをクリックします Tree から 登録先のイベント名をクリックして BtnUp に 選択した スポーツ名 ( 親カテゴリー ) とイベント名 ( 大会名 ) が間違いなく表示されていることを確認して 実行画面を閉じます 次は BtnUp クリックによる テーブルに登録するプログラムをします

126 125 次に BtnUp のクリックイベント利用して 写真ファイルをデータテーブルに登録します 写真 ( イメージ ) ファイルをデータテーブルに登録を実行する BtnUp をダブルクリックして BtnUp_Click イベントハンドラーを作成して下さい 下記のように BtnUp_Click が作成されています Protected Sub BtnUp_Click(sender As Object, e As EventArgs) Handles BtnUp.Click End Sub 上記のイベントハンドラー内に 下記のコードを追加します Protected Sub BtnUpld_Click(sender As Object, e As EventArgs) Handles BtnUpld.Click System.Threading.Thread.Sleep(2000) Dim d As IO.DirectoryInfo = New IO.DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("~/UploadImages")) Dim myenum As System.Collections.IEnumerator = CType(d.GetFiles("*"), System.Collections.IEnumerable).GetEnumerator 'Label1.Text = "filecount = " & Dim count As Integer = 0 'Label1.Text = "ParentID = " & Mid(Tree.SelectedNode.Parent.Value, 2) 'Label2.Text = "childid = " & Mid(Tree.SelectedNode.Value, 2) Dim parentid As Integer = CInt(Mid(Tree.SelectedNode.Parent.Value, 2)) Dim childid As Integer = CInt(Mid(Tree.SelectedNode.Value, 2)) Dim Price As Integer = CInt(TxtMyPrice.Text) Do While myenum.movenext Dim f As IO.FileInfo = CType(myenum.Current, IO.FileInfo) Dim buffer() As Byte = New Byte((f.OpenRead.Length) - 1) {} f.openread.read(buffer, 0, CType(f.OpenRead.Length, Integer)) PhotoManager.Add_ProductImage(parentID, childid, f.name, f.name, Price, buffer) count += 1 Loop LblFinish.Text = count.tostring() & " 個のファイルをアップロードしました " ' アップロードが終了したので 再びアップロードしないようにします Me.BtnUp.Enabled = False End Sub ブラウザーで表示して 実行します ImageList のファイル数を確認して 価格の入力をします 次へ ボタンをクリックして Tree のイベント名をクリックします 目的のイベント ( 大会 ) 名がボタンに表示されていることを確認して ボタンをクリックします UploadProgress が 登録中 であることを示すように動いています 下図のように LblFinish に ImageList のファイル数と整合性のとれた表示がされていることを確認して下さい 実行画面を閉じます

127 126 実際に登録されているか サーバーエクスプローラの テーブル フォルダを開き myproducts テーブルを右クリックして テーブルデータの表示 をして 最終行を含めて 3 行に今日の日付のデータで Price 列の値が間違いなく 登録されているか確認して下さい 次は 登録した結果を確認すると共に データテーブル myproducts に登録されているすべてのカテゴリーの写真 ( 商品 ) がイベント ( 大会 ) 別に 閲覧できるように GridView コントロールを使用してプログラムします

128 127 イベント別にサムネイルを表示 デザインビューの 右列 を選択して Html コードの <h4> 右列 </h4> の直下に GridView コントロール を配置して下さい 下記の位置 ID を GVEventList にします GVEventList を選択して 右肩のタスクメニューから データソースの選択 -> < 新しいデータソース > >SQL データベースをクリック >ID を sdsevetlist にします データソースの構成下図のように カスタム SQL ステートメントまたはストアドプロシージャを指定する にチェックを入れます 次へ ボタンをクリックします 次に表示されるダイアログでは SELECT タブの空欄に下記のコードを入力して下さい SELECT ProdSubCate.SubCateName, ProdSubCate.SPCID FROM myproducts LEFT OUTER JOIN ProdSubCate ON myproducts.spcid = ProdSubCate.SPCID WHERE (myproducts.deleted = 0) GROUP BY ProdSubCate.Deleted, ProdSubCate.SubCateName, ProdSubCate.SPCID HAVING (ProdSubCate.Deleted = 0) AND (COUNT(myProducts.PID) > 0)

129 128 次へ ボタンをクリック 次に表示されるダイアログでは 終了 ボタンをクリックして データソースの構成を終了します GridEventList は下図のようになります GVEventList を選択して 右肩のタスクメニューから 選択を有効にする を選択します 下図のように変化します 次に 右肩のタスクメニューから 列の編集 を選択します 下図の選択されたフィールドの一番上の 選択 フィールドを選択して 右側の下向き矢印で一番下に移動します 結果 下図 次に 下表のように 各フィールドのプロパティを設定します 選択されたフィールド名 プロパティ名 値 SubCateName HeaderText イベント ( 試合 ) 名 SPCID Visible False 選択 SelectText サムネイル表示 OK ボタンをクリック 終了します 結果 下図

130 129 次に GVEventList の テンプレートの編集 の EmptyTemplate を表示します 下図のように 掲載可能なファイルはありません と入力して 終了します 次に デザインビューで GVEventList の直下に Button コントロール を配置して ID を BtnListUpdt にします Text プロパティを 更新 にします BtnListUpdt のプロパティ ID 名 プロパティ名 値 BtnListUpdt Text 更新 CausesValidation False この BtnListUpdt をダブルクリックして BtnListUpdt_Click イベントハンドラーを作成して 下記のコードを追加します 赤のコード Protected Sub BtnListUpdt_Click(sender As Object, e As EventArgs) Handles BtnListUpdt.Click Me.GVEventList.DataBind() End Su 次に GVEventList を選択状態にして プロパティウインドウを表示して 下図のように DataKeyNames プロパティを SPCID と手入力します 次に BootStrap の CSS Panel で抱合します 下記 html コード参照 Footer なし <div class="panel panel-primary"> <div class="panel-heading"> 掲載可能なイベント <div class="panel-body"> GVEventList <asp:button ID="BtnListUpdt" runat="server" Text=" 更新 " CausesValidation="False" /> ブラウザーで表示して 確認して下さい 実行画面を閉じます

131 130 イベントのサムネイル表示 次に ページ上部の html ビューの行番号 40 位の場所の UP1 の終了タグ </aspupdatepanel> の直下に Panel コントロールを配置して ID を EventListPanel にして Visible プロパティを False にします 次に その EventListPanel の中に DataList コントロール を配置して下さい ID はデフォルトのまま DataList1 にします 右肩のタスクメニューから データソースの選択 -> < 新しいデータソース > を選択します 次に 表示されたダイアログでは SQL データベース ID を sdsgeteventphotos にします データソースの構成 上図のように myproducts テーブルの列 FileName までにチェックを入れます (ProductName はチェックを入れません ) WHERE ボタンをクリックして 下図のように設定します 追加 ボタンをクリックします 次に 上図の 列 のドロップダウンリストを開いて SPCID を選択して ソース は none にして 追加 ボタンをクリック 下図が結果です

132 131 そして OK ボタンをクリックして WHERE 句の生成を終了します 表示されている ダイアログの 次へ ボタンをクリック 次に表示されるダイアログの 完了 ボタンをクリックしてデータソースの構成を終了します DataList1 を選択状態にして プロパティを下表のように設定します コントロール ID 名 プロパティ名 値 DataList1 RepeatColumn 9 RepeatDirection Horizontal Width 100% 次に 右肩のタスクメニューから テンプレートの編集 を選択します 下図のようになっています 上図の ItemTemplate の中程に 2 行 1 列 のテーブルを挿入します 下図 上図のテーブルの 1 行目にツールボックスから Image コントロールを配置して下さい 2 行目を 2 列に分割して 左列に ファイル名 と入力して 右列には 上図の [FileNameLabel] を移動して 配置して下さい 下図

133 132 上図のテーブルの外にある コントロール等全て削除して下さい 下図のようになります 次に 上図の Image コントロールを選択状態にすると html ビューの下記のコードも選択状態になります <table class="nav-justified"> <tr> <td colspan="2"> <asp:image ID="Image" runat="server" /> </td> </tr> <tr> 上図の Image タグ に下記のコードを追加します 赤色部分のコード <table class="nav-justified"> <tr> <td> <asp:image ID="Image3" runat="server" ImageUrl='<%# ~/GenericHandler/GetmyImage.ashx?Size=S&PID=" & CStr(Eval("PID")) %>' Width="100%" /> </td> </tr> テンプレートの編集を終わります デザインビューでの DataList1 は下図のようになります 次に 上図の sdsgeteventphotos データソースの右側にマウスをポイントして 2 行 1 列 のテーブルを挿入します 1 行目に上図の DataList1 をドラッグして 移動します 2 行目にツールボックスからボタンコントロールをドラッグアンドドロップして下さい 下図のようになります

134 133 上図の Button コントロール の ID を BtnThumbClose にします Text プロパティを サムネイル表示を閉じる にして下さい 次に そのテーブルの style プロパティで ブロック -> TextAlign を center にして 同時に Font.Size を 0.8em にして下さい 下図のようになります 次に BtnThumbClose をダブルクリックして プログラムコードファイルに BtnThumbClose_Click イベントを作成して 下記のコードを追加して下さい 赤のコード Protected Sub BtnThumbClose_Click(sender As Object, e As EventArgs) Handles BtnThumbClose.Click Me.EventListPanel.Visible = False Me.UP1.Visible = True End Sub 次に BtnThumbClose のプロパティウインドウを開いて 下図のように CausesValidation プロパティを False にして下さい

135 134 次に GVEventList の 表示する ボタンのクリックイベントをプログラムします GVEventList の 表示する ボタンをダブルクリックして プログラムコードファイルに GVEventList_SelectedIndexChanged を作成して下さい そのイベントハンドラーに下記のコードを追加して下さい 赤のコード部分 Protected Sub GVEventList_SelectedIndexChanged(sender As Object, e As EventArgs) Handles GVEventList.SelectedIndexChanged Me.sdsGetEventPhotos.SelectParameters("SPCID").DefaultValue = CInt(GVEventList.SelectedDataKey("SPCID")) Me.UP1.Visible = False DataList1.DataBind() End Sub テスト実行をします アップロードするファイルが存在する状態で ブラウザーで表示して 実行します 価格を入力します 次へ ボタンをクリックします 表示された Tree のイベント名をクリックして アップロードするボタン はクリックしないで GridView の 表示する ボタンをクリックします 表示されたサムネイルの下のボタン サムネイル表示を閉じる ボタンをクリックして サムネイルが非表示になる事を確認して 実行画面を閉じます 次に 各列の 左列 中列 右列 の表示を削除して下さい 終了