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

(1)

SkyOcean に戻る SkyOcean

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

サイト管理の作成

(2)

SkyOcean に戻る

内容

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

(3)

SkyOcean に戻る

初めに

本書は、VisualStudio２０１５の VisualBasic 言語を使用します。Web アプリケーションプログラマのために短期間で上級レベルにステップアップできるためのお力添いになれればと思って書きました。

本書では、Web アプリ作成の題材として、スポーツ写真の販売をサンプルとして取り上げています。が、他の商品を取り扱っても全体のシステムを変更することなくこのアプリがテンプレートとして使用できるように考えて作成しました。

筆者は、独学でこのような、商品販売用のWeb のページ群を作成し、グローバルな Web サイトから、Web

アプリケーションとして、公開するという、作ってから公開するまでのノウハウ（知識）を得ました。 IT といっても非常に範囲が広く、クラウドやスマートフォン等のプログラミングのプラットホームは多様化していますがこのチュートリアルを読者様が終了することによって、クラウド、スマートフォンのプログラミングの基礎以上のものを築くことが出来ます。私が独学で習得したことによって、習得の早道、抑えどころ等、読者様に有益な情報が提供できると思います。

対象読者について

このチュートリアルを実行するには、VisualBasic 言語を見たことある方、VisualStudio２０１５で基本的な使用法を経験されている方を対象にしています。例えばVS（VisualStudio）上で DataBase を作成して、そのDataBase にテーブルを作成することを経験された方、また aspx ページに付属している、VB ファイルにコードを記入された経験がある方、またBootStrap という CSS の名前を聞いたことのある方、以上のようなレベルの方を対象にしています。全くプログラムの経験のない方でも、本チュートリアルシリーズの前版１～４までを経験されて、本チュートリアルを実践されれば、短期間で立派なプログラマーになることが出来ると思います。小学生以上の方で、急がずに、こつこつやれる方ならだれでもIT の基礎は習得可能です。学歴は関係ありません。

アプリケーションの概要

このアプリケーションは、スポーツというジャンルに特化した写真を販売するのが目的です。ユーザーが解りやすく、スポーツの種類を親として、それぞれの試合（大会）を子とする関係を作ります。親のカテゴリーの下に子のカテゴリーとしてダイナミック（動的）にシステムを構築するには、データベースを活用することが必須です。（注：ここでの「動的」の意味は、親のカテゴリー（スポーツの種類）が増えても、親に従属する子のカテゴリー（試合名（大会名））が増えても。データベースを利用したプログラミング手法では、簡単に対応出来ます。

(4)

SkyOcean に戻る

共通事項

本チュートリアルでの表記

VisualStudio 2015 のことを「VS」と表現します。VS の作業画面を「VS の IDE」または「IDE」と表現します。作業画面のｈｔｍｌコードビューは、「コードビュー」、デザイン画面は「デザインビュー」、またaspx ページに付属している、vb ファイルのことを、「プログラムコードファイル」、そのファイル内のコードのことを「プログラムコード」と表記します。カテゴリーについて、スポーツの種類、例えば「野球」「バレーボール」等のスポーツ名を「親のカテゴリー」表現します。そして、「野球」の配下には「○○大会」とか「××試合」があります。その他のスポーツの種類「バレーボール」の配下にも「○○大会」とか「××試合」があります。その○○大会、××試合等を「子のカテゴリー」として、表現します。また「子のカテゴリー」のことを、「イベント」として表現する場合もあります。「ドラッグ」と表した場合は、「ドラッグアンドドロップ」の意味を表します。「ブラウザーで表示、実行」と表示した場合、該当する、デザインビュー、またはコードビューから右クリックメニューの「ブラウザーで表示」を実行することです。

ページ末のヘルプキーワードについて

ページ末に表示してあるヘルプキーワードとは、VS の IDE の最上部にある、「ヘルプ」メニューをクリックすると表示されるドロップダウンのメニューから、「ヘルプの表示」を選択して、表示される「Developper Network」の検索「🔍」欄に入力するキーワードのことです。プログラムのスキルが上がる毎にこのヘルプを利用する頻度が増えます。是非活用して下さい。

プロパティウインドウでの色の設定

本チュートリアルで頻繁に使用するプロパティウインドウでの、色の設定する場合、共通して行う手順で、赤（Red）を選択する場合を下図のようにします。白枠が選択した色です。赤、青、その他の色等、特に指定しない限り、読者様の判断で濃淡の違いの範囲内で、選択して下さい。

テーブルの列等のプロパティ設定例

例１テーブルを選択状態にして、上の枠線にマウスを持っていき、下向き矢印↓を出現させて、style プロパティで「ブロック」－＞「text-align」―＞「center」にします。上記の赤で示した、style プロパティをクリックすることによって、テーブルに対して、様々な設定が出来ま

(5)

SkyOcean に戻るす。

ストアドプロシージャの作成方法

作成するストアドプロシージャの「CREATE 文」を用意しておきます。サンプル下記コード CREATE PROCEDURE Get_ProductImage

@PID int, @Size int AS

IF @Size = 1

SELECT [Small] FROM [myProducts] WHERE [myProducts].[PID] = @PID ELSE IF @Size = 2

SELECT [Poster] FROM [myProducts] WHERE [myProducts].[PID] = @PID ELSE

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

(6)

SkyOcean に戻る

上図の「データベースの更新」ボタンをクリックします。

作業画面（IDE）の下に、下図のような“更新が正常に完了しました”という結果の表示が出たことを確認して、IDE の「dbo.Procedure.sql」タブを閉じて、サーバーエクスプローラの「ストアドプロシージャ」フ

(7)

SkyOcean に戻る

(8)

SkyOcean に戻る

便利なコーディング支援

本チュートリアルでも、「行番号」を指定しますので、必ずこの設定を行って下さい。「ツール」－＞「オプション」で「オプションダイアログを開き、「テキストエディター」―＞を選択して、「Basic」を選択します、右側の「行番号」にチェックを入れます。

参照リスト

TextBox を日本語入力にする UpdateProgress に Image を設定する方法 BootStrap の Panel コンポーネントでオブジェクトを包む <div class="panel panel-primary">

<div class="panel-heading">’Some String </div>

<div class="panel-body"> ‘Sone Object

</div>

<div class="panel-footer">Sone String</div> </div>

(9)

SkyOcean に戻る

販売サイト構築

スポーツ写真の販売用のサイトを考えました、他の商品の販売サイトにも適用できるような汎用性のあるプロジェクトテンプレートにしたいと思います。

第 1 章 Web サイトの作成

VS(VisualStudio2015)で Web サイトの作成

VS２０１５を立ち上げます、「スタートページ」で、「ファイル」のメニューから、「新しい Web サイト」を選択します。網掛け部の「ASP.NET Web フォームサイト」を選択して、一番下の「ファイルシステム」の入力欄」の「WebSite1」を変更して、「WebShop」にします。1 Web の場所の「WebShop」がサイト名になります。（作成するフォルダについては、読者様の環境に合わせて、決定して下さい。）「OK」ボタンをクリック、しばらくすると「Default.aspx」のｈｔｍｌコードビューになります、デザイン画面と並べて表示しましょう。 1_{「WebSite1」の前のディレクトリの表示はそれぞれのコンピュータの環境に依存して表示されますので読} 者様の環境にあわせて表示されると思います。要は「Web サイト名」が「WebShop」であるということです。このチュートリアルは、そのサイト名「WebShopp」で進めます。）

(10)

SkyOcean に戻る「Default.aspx」の「並べて表示」画面上図のようになっています。 Html ビューの左側に行番号が表示されていない場合は、本書の「便利なコーディング支援」を参照して、実行して下さい。

「Image」フォルダの作成

ソリューションエクスプローラを表示して、「WebShop」のルート上に、新規に「Images」フォルダを作成して下さい、そのフォルダの中「にもう一つフォルダを作成して、フォルダ名を「Default」にします。 CD ドライブに付属の CD をセットしておいて下さい。「Default」フォルダを選択して、右クリック＾－＞「追加」－＞「既存の項目」－＞表示される画面で、画面の一番下に「Web ファイル」を選択するようになっているので、ドロップダウンから「全てのファイル」に変更して下さい。そして画面左列のエクスプローラから、CD が入っている、ドライブを選択して、CD の Images フォルダから「ajax-looader」「ｍｙCart」「SportsTop1950300」「SportsLogo1」「写真販売サイト３００５０」の5 個のイメージをコピーして下さい。結果下図

(11)

(12)

SkyOcean に戻る

マスターページ「Site.master」の構造を変更します

ソリューションエクスプローラから、「Site.master」を選択して、ｈｔｍｌビューを開きます。下図の42 行の部分から、76 行までの部分を削除します。行番号が表示されていない場合は、本書の「便利なコーディング支援」を参照して、実行して下さい。削除後のｈｔｍｌコード、下図 <asp:ScriptReference Name="WebFormsBundle" /> <%--サイトスクリプト--%> </Scripts> </asp:ScriptManager> この空白部分を削除しました。

<asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder>

(13)

SkyOcean に戻る下記のｈｔｍｌコードを挿入します。

html コード 1

選択部分のImage に注目して下さい。「Default.aspx」をブラウザーで表示、実行して下さい。 <%--コピペの開始位置--%> <div class="nvbar-fixed-top">

<asp:ImageButton ID="ImageButton1" runat="server"

ImageUrl="~/Images/Default/SportsLogo1.png" PostBackUrl="~/Shops/BestShot.aspx" />

<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Default/写真販売サイト 30050.png" />

<asp:LoginView runat="server" ViewStateMode="Disabled"> <AnonymousTemplate>

</AnonymousTemplate> <LoggedInTemplate>

<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %>!</a></li>

</ul> </LoggedInTemplate> </asp:LoginView> </div> </div> </div>

</button>

<a class="navbar-brand" runat="server" href="~/">Skyocean Shop</a> </div>

<li><a runat="server" href="~/Contact">問い合わせ</a></li> <li><a runat="server" href="~/Admin/Admin">管理</a></li> </ul>

</div> </div> </div>

(14)

SkyOcean に戻る

この時点での「Default.aspx」の実行画面

「カート」「登録」「ログイン」ボタンについては、まだプログラムしていません。

(15)

SkyOcean に戻る

「Default.aspx」のデザインを変更します。

次に、Default.aspx のｈｔｍｌコードの下記の部分を削除します。網掛け部分

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div class="jumbotron">

<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="http://www.asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div>

<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="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a> </p>

</div>

<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>

</div>

<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>

</div> </div> </asp:Content>

(16)

SkyOcean に戻る削除後の「Default.aspx」のｈｔｍｌコード。下記コードの「左列」「中列」「右列」のコード部分を追加して下さい。ブラウザーで表示、実行します実行画面実行画面を閉じます。次に、「Default.aspx」のｈｔｍｌビューの“Jumbotron”の下記の場所にツールボックスから、「Image コントロール」をドラッグアンドドロップして下さい。続けて、そのImage を選択して、プロパティウインドウを表示して、Url プロパティを、ソリューションエクスプローラの Images フォルダの配下にある「ChutorialNo2」フォルダの“ShopTop1250300.png”にして下さい。網掛け部分、 Image1 のプロパティ「Width」＝１００％に設定を忘れないようにして下さい

html コード 2

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div class="jumbotron"> </div> <div class="row"> <div class="col-md-4"> <h4>左列</h4> </div> <div class="col-md-4"> <h4>中列</h4> </div> <div class="col-md-4"> <h4>右列</h4> </div> </div> </asp:Content>

<%@ 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/ShopTop1950300.png" Width="100%" />

(17)

SkyOcean に戻る html ビュー画面を右クリックー＞ブラウザーで表示、実行します実行画面実行画面を閉じます。

管理者用フォルダの作成

次に、ネットショップ等では、公開したサイトのページに、頻繁に商品を追加したり、変更したりする作業が必要になります。顧客（ユーザー）には見えないところでの作業になります。ソリューションエクスプローラのルートに新しいフォルダ「Admin」フォルダを作成します。下図後ほど、この「Admin」フォルダに「Web ページ」を追加します。 </div> <div class="row">

</div>

</div>

</div> </div> </asp:Content>

(18)

SkyOcean に戻る

第 2 章 Web サイト管理

新しいデータベースの作成

VS で新規にデータベースを作成する方法。

2 ソリューションエクスプローラの「App_Data」フォルダーを右クリックします。追加―＞SQL サーバーデータベース、を選択します。右図のダイアログウインドウが表示されます。右図のように、「項目名」を“skyocean_DB”と入力して、「OK」ボタンをクリックします。しばらくすると、ソリューションエクスプローラのサーバーエクスプローラのデータ接続のツリー表示が下図のように変わります。

経験メモ---

SQL サーバーが存在して、機能しているかを確認するシーンが開発途中にたびたびありました。SQL サーバーが機能しておりませんというようなエラーが出現したら、次の要領で確認して下さい。コントロールパネルー＞全てのコントロールパネル項目ー＞管理ツールー＞サービスー＞一覧から「SQL サーバー（SQLEXPRESS）を探します、ありましたら選択して、下図のような表示であれば機能しています。上図のような表示になるようにSQL サーバーを設定して下さい。 2_{筆者の場合、VS をインストールしただけでは、データベースが作成出来ませんでした。原因は} SQLServerExpress がインストールされていなかったためでした。Microsoft のダウンロードサイトから無料でダウンロードしたらデータベースの作成が可能になりました) 作成の詳細は、Tutorial１＿４ VS によるデータべー作成方法を参照して下さい。

(19)

SkyOcean に戻る

WebConfig ファイルの確認

この時点で、ソリューションエクスプローラの一番下の「WebConfig」ファイルを開きます。WebConfig ファイルの13 行目の「ConnectionString」に注目して下さい。下記コード網掛け部分 WebConfig ファイルを閉じます。

作成するデータベースの概要

作成するテーブルの概要 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"/>

テーブルの用途

テーブル名

商品を大きく分ける親カテゴリー名を格納する ProdCate テーブル親のカテゴリに属する子のカテゴリー名を格納する ProdSubCate テーブル子のカテゴリーに属する、商品（写真付き）を格納する myProducts テーブル

(20)

SkyOcean に戻る下記のT-SQL 文で「skyocean_DB」に、テーブルを作成して下さい（作成方法は skyocean サイトから無料でダウンロード出来る、Tutorial１＿3 の「データベースの中に「テーブル」を作成」を参照してください。）

データベーステーブルの

T-Sql

下記のTSQL 文をコピペして実行できます。 ProdCate テーブル

Create SQL 1

ProductSubCate テーブル

Create SQL 2

ｍｙProducts テーブル

Create SQL 3

上記の3 個の T-SQL を 1 個づつ実行して、テーブルを「skyocean_DB.mdf」のテーブルフォルダに作成して下さい。作成後は、サーバーエクスプローラの「テーブル」フォルダを右クリックして「最新の情報に更新」をクリックして下さい。作成後のフォルダの内容、下図 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) )

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) )

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) );

(21)

SkyOcean に戻る

(22)

SkyOcean に戻る

管理作業用メニューページの作成

AdminMenu.aspx ページの作成

ソリューションエクスプローラの「Admin」フォルダを右クリックして、「追加」－＞「Web フォーム（マスターあり）」－＞“AdminMenu”という名前の Site.master」をマスターページとする、Web ページを作成して下さい。下図「OK」ボタンをクリックこのページは管理作業全体のメニューを備えたページとして、機能します。

「AdminMenu.aspx」のレイアウト

「AdminMenu.aspx」の基本になるレイアウトのｈｔｍｌコードを入力します。 Html コード入力前の「AdminMenu.aspx」のデフォルトのｈｔｍｌコード「asp:Content」の中にレイアウトの基本になる html コードを入力します、網掛け部分、コピペ可能です

html コード 3

<%@ 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 ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">

</div>

</div> </div>

(23)

SkyOcean に戻る上記の基本レイアウトの「jumbotron<div>」の中に、BootStrap のタブ式メニューを挿入します。その他のコード共、網掛け部分のｈｔｍｌコードを追加入力して下さい。コピペでもOK です

html コード 4

ブラウザーで表示、実行します。下図この時点では、各メニュー、リストのアイテムには、ページ遷移の機能が備わっていいません。 <div class="jumbotron"> <h4>管理者ページ</h4>

<li role="presentation" class="active"><a href="Admin.aspx">管理メニュー</a></li> <li role="presentation"><a href="#">カテゴリー管理</a></li>

</ul> </div>

<%--'BootStrap のパネルです--%> <div class="panel panel-default">

<div class="panel-heading"> <h3>サイト管理</h3> </div> <div class="panel-body"> <h4>下記の項目を選択して管理作業をして下さい</h4> </div> <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"> パネルのフッター </div> </div> </div> </div> </div>

(24)

SkyOcean に戻る

実行画面を閉じます。

(25)

SkyOcean に戻る

マスターページのメニューを変更する

ソリューションエクスプローラから「Site.msster」ページを選択して、html コードの下記の網掛け部分に “Admin/AdminMenu”というコードに変更して下さい。「Default.aspx」のコードビューから、ブラウザーで表示、実行して、黒いバーのメニューから「管理」をクリックして下さい、「AdminMenu.aspx」が表示されていることを確認して、実行画面を閉じてください。 <ul class="nav navbar-nav">

<li><a runat="server" href="~/Contact">問い合わせ</a></li> <li><a runat="server" href="~/Admin/AdminMenu">管理</a></li> </ul>

(26)

SkyOcean に戻る

カテゴリー名登録、編集ページの作成

(27)

SkyOcean に戻る

作成の概要

親カテゴリー名の登録及び子カテゴリー名の登録、そして両カテゴリー名の編集が目的ですので、視覚的にも解りやすく作業が出来るようにTreeView コントロールを使用しました。データの登録、編集は、FormView コントロールの機能がすぐれています。データベースを操作するには、SqlDataSource コントロール、及び ObjectDataSource コントロールの使用になります。

作成の手順

1. 親、子カテゴリー名登録ページのレイアウト 2. TreeView コントロールの配置 3. TreeView 用の DataSource の作成 4. TreeView にノードを表示する 5. FormView コントロールと DataSource の配置 6. FVParent に DataSource を関連つける 7. 親カテゴリー名の登録をプログラムする 8. 子カテゴリー名の登録 9. カテゴリー名の追加、編集、削除

(28)

SkyOcean に戻る

1. カテゴリー名登録ページのレイアウト

Admin フォルダに「Site.master」をマスターページとして、「CreateCategory.aspx」を作成して下さい。「CreateCategory.aspx」の基本レイアウトです、網掛け部分を追加して下さい（下記のコードはコピペ可能です）ブラウザーで表示、実行します、下図これ以後、解説の中で、列の位置をそれぞれ、「左列」「中列」、「右列」と表記して、位置の指定をします。実行画面を閉じます。 BootStrap については読者の皆様自身で、学習して下さい。詳しいサイトがあります。本家サイト http://getbootstrap.com/components/ 基礎習得用サイト日本語 http://bootstrap3-guide.com/

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"> <div class="jumbotron">

<h4><strong>カテゴリ管理</strong></h4> <br />

<li role="presentation"><a href="AdminMenu.aspx">管理メニュー</a></li>

<li role="presentation" class=”active”><a href="CreateCategory.aspx">カテゴリー管理 </a></li>

</ul> </div>

</div>

</div>

</div> </div>

(29)

SkyOcean に戻る

2. TreeView コントロールの配置

3 ツールボックスの「ナビゲーションタブ」から、「TreeView コントロール」をドラッグドロップして左列に配置します。ツールボックスからページへの配置はhtml ビューの任意の位置でも、デザインビューの任意の位置にでもドラッグアンドドロップして配置することができます。現状の場合、html コードビュー内の <h4>左列</h4>の下に配置して下さい。下表配置後のhtml コード ID を「Tree」にします。デザインビューとコードビューを並べて表示して、「Tree」のプロパティを設定して下さい。プロパティウインドウを表示して、TreeView1 のプロパティを設定します。下表にTreeView コントロールのプロパティこれ以後、このTreeView コントロールを ID 値である「Tree」と表現します。

3. TreeView 用の DataSource の作成

次に、デザインビューで、Tree を選択状態にして、Tree の右隣に SqlDataSource をドラッグアンドドロップして配置します。ID は、「sdsParent」にします。下図は配置後 ID を「ｓｄｓParent」にした直後のデザインビューです。「sdsParent」を選択して、右肩のタスクメニューから「データソースの構成」を選択します下図が表示されます。 3_{TreeView コントロールはツールボックスのナビゲーションタブの中にあります。} </div> <div class="row">

<asp:TreeView ID="TreeView1" runat="server"></asp:TreeView> </div>

コントロール名コントロールのID 名プロパティ名値

TreeView Tree NodeIndent ５０

SelectedNodeStyle

BorderColor Red(赤色)

同上 BorderStyle Solid 同上 BorderWidth １ｐｘ

(30)

SkyOcean に戻る

ドロップダウンリストの中から“skyocean_DB.mdf”を選択します。「次へ」ボタンをクリックします。

下図が表示されます

(31)

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

(32)

SkyOcean に戻る

上図の「追加」ボタンをクリックして、WHERE 句を確認します。「OK」ボタンがアクティブになります。「OK」ボタンをクリックします。

下図のダイアログの表示に戻ります。

(33)

SkyOcean に戻る

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

(34)

SkyOcean に戻る

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 イベントのプロシージャが書き込まれます。

プログラムコードファイルのImport セクションに「System.Data.Common」を Import しておいてください。下記網掛け部分のコード

Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load End Sub

Imports System.Data.Common Partial Class Admin_CreateCategory Inherits System.Web.UI.Page

(35)

SkyOcean に戻る

ページの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)

SkyOcean に戻る

親ノードに属する、子ノードを表示する

次に、サーバーエクスプローラの「SiteSqlServer」のフォルダを開いて、「テーブル」フォルダを開きます。

テーブル「ProdSubCate」を右クリックして「テーブルデータの表示」を選択します、下図

「PCID」の列に英数文字で、ProdCate テーブルの“野球”の「PCID」列の値を入力します、「SubCaeName」の列に日本語で「小学生大会」と入力し「Deleted」列に英数字で「False」と入力します。下図注意：「PCID」の値は「tbl_ProdCate」の「CateName」“野球”の ID である「PCID」の値と整合性を保ってください。例えば「tbl_ProdCate」の「CateName」の“野球”の「PCID」列の値が「３」であれば、上図の「PCID」列の値を「３」にして下さい。次に、「SPCID」列の 2 行目の「NULL」をクリックします。下図のようになります。「SPCID」の値は、必ず上図のような値（２）にならない場合があります。テーブルの環境（データを削除したりした場合等）SQL サーバーが自動で付与する ID 値です。テーブルのデータ表示画面を閉じます。

(37)

SkyOcean に戻る

子ノード（子カテゴリー）表示用の DataSource を作成する

「CreateCategory.aspx」の中列「sdsParent」のｓｑｌDataSouce コントロールの右側に新しい SqlDataSource コントロールを配置して下さい、ID を「ｓｄｓChild」にします。下図

右肩のタスクメニューから、「データソースの構成」を選択します。

「ｓｄｓChild」のデータソースの構成

ドロップダウンリストから“SiteSqlServer”を選択「次へ」ボタンをクリクします。

(38)

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

(39)

SkyOcean に戻る

子ノードを表示するプログラム

次に、プログラムコードファイルに移ります。現在ページロードイベントの「Admin_CreateCategory_Load」は、下記のようにプログラムしてあります。上記のコードはテーブル「ProdCate」のデータを Tree のノードとして、表示するプログラムコードです。 TreeView で何かを表示する意義は、複雑な相関関係を一目でわかりやすくする目的でもあります、したがって親のカテゴリー名に属する子のカテゴリー名を、視覚的に解りやすく表示するようにプログラムしていきます。プログラムの手順として、理論的には、複数の親のカテゴリー名をひとつづつ取得する度に、その親に属する子のカテゴリー名（複数）を取得していきTree ノードとして表示するという事です。子のカテゴリー名はテーブル「ProdSubCate」に登録されています。「ｓｄｓChild」はそのテーブルの内容を含んでいます。下記のコードは、親のカテゴリーID をパラメータにした「ｓｄｓChild」のカテゴリー名を読み取ります。 “sdsChild.SelectParameters.Add(("PCID"), 親のカテゴリーID)))” 親のID を持つ、子のデータ行が複数あれば、複数の行を返します。上記のコードを利用して、下記の「追加するコード」を既存のコード内に追加します。わかりやすく、追加する位置を表示してあります（赤色の位置）既存のコード

node.Text = String.Format("{0}.{1}", cnt.ToString(), reader("CateName"))

Private Sub Admin_CreateCategory_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

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

(40)

SkyOcean に戻る 'ツリーノードを作成、表示する '//////// 追加位置ここから '////////////////////////////////////ここまで Tree.Nodes.Add(node) Loop Tree.ExpandAll() End If 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」プロシージャ

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))

(41)

SkyOcean に戻る

'node.Text を設定 nd.Text = Childreader("SubCateName") node.ChildNodes.Add(nd) Loop '////////////////////////////////////ここまで 'ツリーノードを作成、表示する Tree.Nodes.Add(node) Loop Tree.ExpandAll() End If End If Tree.ExpandAll() reader.Close() End Sub 「CreateCategory.aspx」のデザインビュー、コードビューに戻り、ブラウザーで表示して、実行して下さい。下図のようになります。TreeView の部分実行画面を閉じます。

(42)

SkyOcean に戻る。

5. FormView コントロールと DataSource の配置

このFormView コントロールン役割は、親カテゴリーを編集（追加、変更）することです。

「CreateCategory.aspx」のコードビューで、「中列」の下に FormView コントロールを配置して下さい、

ID を FVParentにします。Visible プロパティを False にします。その下に、SqlDataSource コントロールを配置（FVParent の右にドラッグアンドドロップ）して、ID を「ｓｄｓEditParentCate]にします。

[sdsEditParentCate]のデータソースの構成

デザインビューの「ｓｄｓEditParentCate」を選択して、タスクメニューから「データソースの構成」を選択します。下図が表示されますドロップダウンから、「SiteSqlServer」を選択して、「次へ」ボタンをクリックします「テーブルまたはビューから….」は「ProdCate」を選択します。下図 WHERE 句を設定します。

(43)

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

(44)

SkyOcean に戻る

(45)

SkyOcean に戻る

6. 親カテゴリー名の登録をプログラムする

ここまでの本チュートリアルでは、テーブル「ProdCate」と「ProdSubCate」にプログラミングの便宜上両テーブルにデータを手入力で、登録しました。が実際のアプリが最初に起ちあがるときには、両テーブルには何もデータがないはずです。両テーブルのデータを削除して下さい。削除の方法は、サーバーエクスプローラウインドウを開いて、「SiteSqlServer」を開き（左側の▷印をクリック）、テーブルフォルダを開いて、「ProdCate」テーブルを右クリックします、「テーブルデータの表示」を選択、下図上図の「PCID」の左の列の右▶印の 1 行目をクリックします。1 行目が選択状態になったら、その行の左の列の右▶印の列を右クリックして、一番下の「削除」ボタンをクリックします。確認のダイアログで「はい」をクリックします。複数行の場合は、「Shift」キーを使用して複数の行を選択してから、先程の削除動作をおこなって下さい。同様に、テーブル「ProdSubCate」のデータも空にして下さい。テーブル「ProdCate」及び「ProdSubCate」には 1 件も、データが入っていません、ですからこの「CreateCategory.aspx」が Load されても、Tree にデータをバインド出来なくて、何も表示しません。

アプリケーションが最初に起ち上がる時には、必ずこの状態です、またこの状態でなくてはならないでしょう。このアプリを使用する人にとっては、親カテゴリー名、子カテゴリー名ともに独自のオリジナリティを持ったカテゴリー名を自由に作成出来る汎用性が実感できるでしょう。、Web ショップとして、多様な商品の棚を作成するためにもこの汎用性を保たねばなりません。

親カテゴリーのデータが空の場合の処理

このようなアプリが最初に起ちあがった時の処理も必要です。ページのLoad 時において、テーブル「ProdCate」にデータがあるかどうかを検証する必要があります。すでにこのページロード時に下記のコードで検証しています。6 6_{ヘルプキーワード “DataReader によるデータの取得” 是非検索して下さい} Dim reader As DbDataReader = sdsParent.Select(DataSourceSelectArguments.Empty) If reader.HasRows Then

………. End If

(46)

SkyOcean に戻る

プログラムコードファイルに移り、「Admin_CreateCategory_Load」イベントにコードを追加します。青い文字にしてある「If reader.HasRows Then ～ Else ～ End If」という一連のプログラム手順を作成します。

「Else」節は、テーブル「ProdCate]が空の場合、FormView コントロールの「FVParent」を Insert モード

にして表示する、というプログラムです。（データ挿入を促すように） “TreeNods.Add(node)の直下に、網掛けした赤いコード部分を追加して下さいブラウザーで表示、実行します。FVParent が Insert モードで、表示されました。次図上図を見ると、Tree に表示するでーたがないので Tree も表示されませんユーザーに解り易いように「親カテゴリーのデータが１件もありません」というような告知文があればユーザーは解りやすく、何をしたらいいか判断がし易くなります。同時にFVParent についても「親カテゴリーのデータが１件もありません」という、告知を受けたことに対して次にすることを明確に表示出来たらいいと思います。実行画面を閉じます。

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

(47)

SkyOcean に戻る上記2 件について、改善します

左列の文章の非表示について

html コードビューの<h4>左列</h4>のすぐ下に、「Label コントロールをドラッグアンドドロップします。 ID は「LblEmp」にします。次に、FVParent の「InsertItemTemplate」を改良します。FVParent の右肩のタスクメニューを表示して、「テンプレートの編集」を選択します。コントロール名 ID 名プロパティ名値

Label LblEmp Text 親カテゴリーのデータは1 件もあ

りません

Visible False

(48)

SkyOcean に戻る「InsertItemTemplate」は下図のようになっています。上図の「CateNameTextBox」の右側にマウスポインターを置いて、4 行 2 列のテーブルを挿入します。下図を参照テーブルの1 行目の行を全て選択して青色に変えて、「右クリック」―＞「変更」－＞「セルの結合」して、その行内を列なしにします。ここに「Label コントロール」をドラッグドロップします。次に1 行あけて「InsertItemTemplate 」内の「CateNameTextBox」を右列に移動します。その行の左列に「カテゴリー名」という文字を入力します。一番下の行に、「挿入」「キャンセル」ボタンをそれぞれ左列、右列に移動します。「CateNameTextBox」を日本語入力にします。7 次に、「DeleteCheckBox」の行とテーブルの外の、 “CateName”という文字を削除します。テーブルの下の空白を「Delete」キーを使用して、削除します。 Label コントロールの Text プロパティを“新規に親カテゴリー名を登録”にして下さい。そして、ForeColor プロパティを赤に、FontSize を 1.1em にして下さい。改良後の「ItemInsertTemplate」下図 7_{TextBox を日本語入力にする} Html コードの該当する「TextBox コントロール」のタグのコードに下記のコードを追加して下さい、赤色選択部分

<asp:TextBox ID="" runat="server" Text='<%# Bind("CateName") %>'␣ style="ime-mode: active;"/> 本チュートリアルで、これ以後、TextBox を「日本語入力にします」という解説は、上記の「赤色部分」のコードをTextBox のタグに追加することを意味します。（注：style の前に必ず半角スペース（␣）で空けて下さい）

(49)

SkyOcean に戻る

DataSource の「InsertQuery」の修正

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

(50)

SkyOcean に戻る

プログラムコードファイルに移り、ページロードイベントにコードを追加します。下記赤いコード網掛け部分を追加

ブラウザーで表示、実行します

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.Select(DataSourceSelectArguments.Empty)

'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

(51)

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

(52)

SkyOcean に戻る

DataSource コントロールを使用するメリット

プログラマーがDataSource を使用するメリットの一つに、DataSource に関連つけられた「Data コントロ

ール」によってDataSource の内容が変更（新規挿入、変更、削除）された場合に、VS では、それぞれのイベントを発生させて、そのイベントをハンドルすることが出来ます。先程の実行したシーンではFVParent の「InsertItemTemplate」の「挿入」ボタンのクリックによって、「ｓｄｓEditParentCate」を通して「tbl_ProdCate」に「野球」というカテゴリー名を新規に登録しました。その際には「FVParent」の「FVParent_ItemInserted」イベントが発生します。プログラムコードファイルに移り、FVParent のイベント「ItemInserted」を選択、表示します。下記のようにコードを追加します。網掛けした赤いコード部分次に、サーバーエクスプローラを表示して、テーブル「ProdCate」を右クリックして、「テーブルデータの表示」を選択して、先程登録した、「野球」の行を削除します。「テーブルデータの表示」を閉じます。ブラウザーで表示、実行します。カテゴリー名にもう一度「野球」と入力して、登録します。実行画面には、何も表示されなくなりました。LblEmp については、プログラムコードで、Visible＝False にしましたので、表示から消えています。FVParent についても、初期のプロパティ設定で、Visible＝False にしてあるので、ポストバックによる再描画の際にFVParent のプロパティ設定の通り False になります。実行画面を閉じます次は、「FVParent＿ItemInserted」イベントの中のコードで、最後の行の“‘親カテゴリーに新しいデータが登録されたのでTree を再表示する”の行の直下の場所に、Tree を再表示するプログラムをします。

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