チェックボックスの GridView 列を追加する (VB)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

このチュートリアルでは、チェック ボックスの列を GridView コントロールに追加して、ユーザーが GridView の複数の行を直感的に選択できるようにする方法について説明します。

はじめに

前のチュートリアルでは、特定のレコードを選択するために GridView にラジオ ボタンの列を追加する方法を調べました。 ラジオ ボタンの列は、ユーザーがグリッドから最大 1 つの項目を選択するように制限されている場合に適したユーザー インターフェイスです。 ただし、ユーザーがグリッドから任意の数の項目を選択できるようにする場合があります。 たとえば、Web ベースの電子メール クライアントでは、通常、チェック ボックスの列を含むメッセージの一覧が表示されます。 ユーザーは任意の数のメッセージを選択し、メールを別のフォルダーに移動したり、削除したりするなどのアクションを実行できます。

このチュートリアルでは、チェックボックスの列を追加する方法と、ポストバックでチェックされたチェックボックスを決定する方法について説明します。 特に、Web ベースの電子メール クライアントのユーザー インターフェイスを厳密に模倣する例を構築します。 この例では、各行にチェック ボックスが付いたデータベース テーブル内の製品を Products 一覧表示するページ付きの GridView を含めます (図 1 を参照)。 [選択した製品の削除] ボタンをクリックすると、選択した製品が削除されます。

各製品行にはチェックボックスが含まれています

図 1: 各製品行にはチェックボックスが含まれています (フルサイズの画像を表示する場合はクリックします)

手順 1: 製品情報をListsする Paged GridView の追加

チェック ボックスの列の追加について心配する前に、まず、ページングをサポートする GridView に製品を一覧表示することに焦点を当ててみましょう。 まず、フォルダー内のページをEnhancedGridViewCheckBoxField.aspx開き、GridView をツールボックスからDesignerにドラッグし、 を ID に設定しますProducts。 次に、 という名前 ProductsDataSourceの新しい ObjectDataSource に GridView をバインドすることを選択します。 クラスを使用するように ObjectDataSource を ProductsBLL 構成し、 メソッドを GetProducts() 呼び出してデータを返します。 この GridView は読み取り専用であるため、UPDATE、INSERT、DELETE タブのドロップダウン リストを (None) に設定します。

ProductsDataSource という名前の新しい ObjectDataSource を作成する

図 2: 名前付きの ProductsDataSource 新しい ObjectDataSource を作成する (フルサイズの画像を表示する場合はクリックします)

GetProducts() メソッドを使用してデータを取得するように ObjectDataSource を構成する

図 3: メソッドを使用して GetProducts() データを取得するように ObjectDataSource を構成する (フルサイズの画像を表示するにはクリックします)

[更新]、[挿入]、[削除] タブの Drop-Down Lists を [(なし)] に設定します

図 4: UPDATE、INSERT、および DELETE タブの Drop-Down Lists を に設定します ([なし] をクリックするとフルサイズの画像が表示されます)

データ ソースの構成ウィザードが完了すると、Visual Studio によって、製品関連のデータ フィールドに対して BoundColumns と CheckBoxColumn が自動的に作成されます。 前のチュートリアルで行ったように、、CategoryName、および BoundFields を除くProductNameすべてを削除しUnitPrice、プロパティを HeaderText Product、Category、Price に変更します。 BoundField を UnitPrice 構成して、その値が通貨として書式設定されるようにします。 また、スマート タグの [ページングを有効にする] チェック ボックスをオンにして、ページングをサポートするように GridView を構成します。

選択した製品を削除するためのユーザー インターフェイスも追加してみましょう。 GridView の下にボタン Web コントロールを追加し、その コントロールを ID に DeleteSelectedProducts 設定し、その Text プロパティを [選択した製品の削除] に設定します。 実際にデータベースから製品を削除するのではなく、この例では、削除された製品を示すメッセージだけを表示します。 これに対応するには、[ボタン] の下にラベル Web コントロールを追加します。 その ID を に DeleteResults設定し、そのプロパティを Text クリアし、その Visible プロパティと EnableViewState プロパティを に False設定します。

これらの変更を行った後、GridView、ObjectDataSource、Button、および Label の宣言型マークアップは次のようになります。

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

ブラウザーでページを表示します (図 5 を参照)。 この時点で、最初の 10 個の製品の名前、カテゴリ、価格が表示されます。

最初の 10 個の製品の名前、カテゴリ、および価格が一覧表示されます

図 5: 最初の 10 個の製品の名前、カテゴリ、および価格が一覧表示されています (フルサイズの画像を表示する をクリックします)

手順 2: チェックボックスの列を追加する

ASP.NET 2.0 には CheckBoxField が含まれるため、GridView にチェックボックスの列を追加するために使用できると考えられる場合があります。 残念ながら、CheckBoxField はブール型のデータ フィールドを操作するように設計されているため、そうではありません。 つまり、CheckBoxField を使用するには、値が参照される基になるデータ フィールドを指定して、レンダリングされたチェック ボックスがオンになっているかどうかを判断する必要があります。 CheckBoxField を使用して、チェック ボックスをオフにした列だけを含めることはできません。

代わりに、TemplateField を追加し、CheckBox Web コントロールを その ItemTemplateに追加する必要があります。 先に進み、GridView に TemplateField を Products 追加し、最初の (左端) フィールドにします。 GridView のスマート タグから [テンプレートの編集] リンクをクリックし、ツールボックスから CheckBox Web コントロールを に ItemTemplateドラッグします。 この CheckBox s プロパティを ID に ProductSelector設定します。

ProductSelector という名前の CheckBox Web コントロールを TemplateField の ItemTemplate に追加する

図 6: TemplateFields に名前付きの ProductSelector CheckBox Web コントロールを追加する (フルサイズのItemTemplate画像を表示する 場合はクリックします)

TemplateField と CheckBox Web コントロールが追加された状態で、各行にチェックボックスが含まれるようになりました。 図 7 は、TemplateField と CheckBox が追加された後に、ブラウザーで表示された場合のこのページを示しています。

各製品行にチェックボックスが含まれるようになりました

図 7: 各製品行にチェックボックスが含まれるようになりました (フルサイズの画像を表示する場合はクリックします)

手順 3: ポストバック時にチェックされたチェック ボックスを決定する

この時点で、チェック ボックスの列がありますが、ポストバックでチェックされたチェック ボックスを決定する方法はありません。 ただし、[選択した製品の削除] ボタンをクリックすると、それらの製品を削除するためにチェック されたチェック ボックスを知る必要があります。

GridView の Rows プロパティ を使用すると、GridView 内のデータ行にアクセスできます。 これらの行を反復処理し、プログラムによって CheckBox コントロールにアクセスし、そのプロパティを Checked 参照して CheckBox が選択されているかどうかを確認できます。

Button Web コントロールの Click イベントのイベント ハンドラーをDeleteSelectedProducts作成し、次のコードを追加します。

Protected Sub DeleteSelectedProducts_Click(sender As Object, e As EventArgs) _
    Handles DeleteSelectedProducts.Click
    
    Dim atLeastOneRowDeleted As Boolean = False
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing AndAlso cb.Checked Then
            ' Delete row! (Well, not really...)
            atLeastOneRowDeleted = True
            ' First, get the ProductID for the selected row
            Dim productID As Integer = _
                Convert.ToInt32(Products.DataKeys(row.RowIndex).Value)
            ' "Delete" the row
            DeleteResults.Text &= String.Format( _
                "This would have deleted ProductID {0}<br />", productID)
            '... To actually delete the product, use ...
            ' Dim productAPI As New ProductsBLL
            ' productAPI.DeleteProduct(productID)
            '............................................
        End If
    Next
    ' Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted
End Sub

プロパティは Rows 、GridView の GridViewRow データ行を構成するインスタンスのコレクションを返します。 ここでのループは For Each 、このコレクションを列挙します。 オブジェクトごとに GridViewRow 、行の CheckBox には を使用して row.FindControl("controlID")プログラムでアクセスします。 CheckBox がオンの場合、対応する ProductID 行の値がコレクションから DataKeys 取得されます。 この演習では、単に Label に有益なメッセージをDeleteResults表示しますが、実際のアプリケーションでは、代わりに クラスの DeleteProduct(productID) メソッドを呼び出しますProductsBLL。

このイベント ハンドラーを追加すると、[選択した製品の削除] ボタンをクリックすると、選択した製品の が表示 ProductID されるようになります。

[選択した製品の削除] ボタンがクリックされると、選択した製品の ProductID が一覧表示されます

図 8: [選択した製品の削除] ボタンがクリックされると、選択した製品 ProductID が一覧表示されます (クリックするとフルサイズの画像が表示されます)

手順 4: [すべてチェック] ボタンと [すべてのチェック ボックスをオフにする] ボタンを追加する

ユーザーが現在のページ上のすべての製品を削除する場合は、各 10 個のチェック ボックスをチェックする必要があります。 このプロセスを迅速化するには、[すべて確認] ボタンを追加します。このボタンをクリックすると、グリッド内のすべてのチェック ボックスが選択されます。 [すべてオフ] ボタンも同様に役立ちます。

ページに 2 つのボタン Web コントロールを追加し、GridView の上に配置します。 最初の s ID を に CheckAll 設定し、その Text プロパティを Check All に設定し、2 番目の s ID を に UncheckAll 設定し、その Text プロパティを [すべてオフ] に設定します。

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

次に、呼び出されたときに GridView のコレクションを列挙Productsし、各 CheckBox Checked のRowsプロパティを、渡された checkState パラメーターの値に設定するという名前ToggleCheckState(checkState)の分離コード クラスに メソッドを作成します。

Private Sub ToggleCheckState(ByVal checkState As Boolean)
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing Then
            cb.Checked = checkState
        End If
    Next
End Sub

次に、 ボタンと UncheckAll ボタンのイベント ハンドラーをCheckAll作成Clickします。 イベント ハンドラーではCheckAll、 で をUncheckAllToggleCheckState(False)呼び出ToggleCheckState(True)すだけです。

Protected Sub CheckAll_Click(sender As Object, e As EventArgs) _
    Handles CheckAll.Click
    
    ToggleCheckState(True)
End Sub
Protected Sub UncheckAll_Click(sender As Object, e As EventArgs) _
    Handles UncheckAll.Click
    
    ToggleCheckState(False)
End Sub

このコードでは、[すべて確認] ボタンをクリックするとポストバックが発生し、GridView 内のすべてのチェック ボックスがオンになります。 同様に、[すべてオフ] をクリックすると、すべてのチェック ボックスがオフになります。 図 9 は、[すべて確認] ボタンをオンにした後の画面を示しています。

[すべてチェック] ボタンをクリックすると、すべてのチェック ボックスがオンになります

図 9: [すべてチェック] ボタンをクリックすると、すべてのチェックボックスが選択されます (クリックするとフルサイズの画像が表示されます)

注意

チェックボックスの列を表示する場合、すべてのチェックボックスを選択または選択解除する方法の1つは、ヘッダー行のチェックボックスを使用することです。 さらに、現在の Check All/Uncheck All 実装にはポストバックが必要です。 ただし、チェック ボックスは、クライアント側のスクリプトを使用して完全にオンまたはオフにできるため、よりわかりやすいユーザー エクスペリエンスが提供されます。 クライアント側の手法の使用に関する説明と共に、[すべてチェック] と [すべてオフ] のヘッダー行のチェック ボックスを使用して詳しく調べるには、「Client-Side スクリプトを使用して GridView のすべての CheckBox をチェックする」と「Check All CheckBox」をチェックします。

まとめ

続行する前に、ユーザーが GridView から任意の数の行を選択できるようにする必要がある場合は、チェックボックスの列を追加することが 1 つのオプションです。 このチュートリアルで説明したように、GridView にチェック ボックスの列を含めると、CheckBox Web コントロールを使用して TemplateField を追加する必要があります。 Web コントロールを使用して (前のチュートリアルで行ったように、テンプレートにマークアップを直接挿入する代わりに) ASP.NET は、CheckBoxes の内容を自動的に記憶し、ポストバック全体でチェックされませんでした。 また、プログラムによってコード内の CheckBox にアクセスして、特定の CheckBox がチェックされているかどうかを判断したり、チェック状態を変更したりすることもできます。

このチュートリアルと最後のチュートリアルでは、GridView に行セレクター列を追加する方法について説明しました。 次のチュートリアルでは、少しの作業で、GridView に挿入機能を追加する方法について説明します。

幸せなプログラミング!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、 4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・自分自身 ASP.NET 24時間で2.0です。 にアクセスmitchell@4GuysFromRolla.comすることも、ブログを介して アクセスすることもできます。これは でhttp://ScottOnWriting.NET確認できます。

前へ次へ