ASP.NET と Visual Basic .NET を使用して、DataGrid 列の CheckBox コントロール値をループして調べる

  • [アーティクル]

この記事では、ASP.NET DataGrid コントロールの各行をループする方法と、行を識別するために使用される checkBox サーバー コントロール ASP.NET が選択されているかどうかを判断する方法について説明します。

元の製品バージョン: Visual Basic
元の KB 番号: 321881

概要

この記事のサンプル コードでは、Microsoft SQL Server Northwind データベースを使用して DataGrid コントロールを設定し、各行の最初の列に CheckBox サーバー コントロールを追加します。 これは、ユーザーが DataGrid 内の複数の特定の行を選択できるようにする一般的な手法です。

この記事では、次の.NET Framework クラス ライブラリ名前空間について説明します。

  • System.Data.SqlClient
  • System.Text

要件

  • Windows
  • .NET Framework
  • インターネット インフォメーション サービス (IIS)
  • Visual Studio .NET

Visual Basic .NET を使用して ASP.NET Web アプリケーションを作成する

  1. Visual Studio .NET を起動します。
  2. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] を選択します。
  3. [新しいプロジェクト] ダイアログ ボックスの [プロジェクトの種類] で [Visual Basic プロジェクト] を選択し、[テンプレート] で [ASP.NET Web アプリケーション] を選択します。
  4. [ 場所 ] ボックスで、 WebApplication# の既定の名前を MyWebApp に置き換えます。 ローカル サーバーを使用している場合は、サーバー名を として http://localhost残すことができます。 結果の [場所 ] ボックスが として http://localhost/MyWebApp表示されます。

サンプル Web フォーム ページを作成する

  1. 次のように、新しい Web フォームを ASP.NET Web アプリケーションに追加します。

    1. ソリューション エクスプローラーでプロジェクト ノードを右クリックし、[追加] をポイントし、[Web フォームの追加] をクリックします。
    2. [ 名前 ] ボックスに「 MySample.aspx」と入力し、[ 開く] を選択します。

  2. [ プロパティ ] ウィンドウで、ドキュメントの pageLayout プロパティを FlowLayout に変更します。 サンプル コードを使用するためにこれを行う必要はありませんが、これによりプレゼンテーションがクリーンに表示されます。

  3. 次のように、DataGrid、Button、および Label サーバー コントロールをページに追加します。

    1. ASP.NET DataGrid サーバー コントロールを Web Forms ツールボックスからページにドラッグします。
    2. [ プロパティ ] ウィンドウで、DataGrid コントロールの ID をDemoGrid に変更します。
    3. ASP.NET Button サーバー コントロールを Web Forms ツールボックスから DataGrid の下のページにドラッグします。
    4. [ プロパティ ] ウィンドウで、Button コントロールの ID をGetSelections に変更し、 Text プロパティを [選択項目の取得] に変更します。
    5. Web Forms ツールボックスから ASP.NET ラベル サーバー コントロールを Button コントロールの下のページにドラッグします。
    6. [ プロパティ ] ウィンドウで、ラベル コントロールの ID をResultsInfo に変更し、 Text プロパティ内の任意のテキストを削除します。

  4. エディターで HTML ビューに切り替えます。 既定の DataGrid テンプレートにコードを追加して、列を構築します。 コントロールの結果のコードは次のように表示されます。

    <asp:DataGrid id="DemoGrid" runat="server" DataKeyField="CustomerID">
    <Columns>
        <asp:TemplateColumn HeaderText="Customer">
            <ItemTemplate>
                <asp:CheckBox ID="myCheckbox" Runat="server" />
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>

  5. ページを右クリックし、[ コードの表示] をクリックします。 これにより、エディターで分離コード クラス ファイルが開きます。 分離コード クラス ファイルに次の名前空間参照を追加します。

    Imports System.Data.SqlClient
Imports System.Text

  6. イベント ハンドラーの既存のコードを Page_Load 次のコードに置き換えます。

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   If Not IsPostBack Then
      'Create a SqlConnection object.
      'Modify the connection string as necessary for your environment.
      Dim cn As SqlConnection = New SqlConnection("Server=localhost;database=Northwind;UID=sa;PWD=")
      Dim cmd As SqlCommand = New SqlCommand("SELECT * FROM Customers", cn)
      cn.Open()
      Dim reader As SqlDataReader = cmd.ExecuteReader()
      DemoGrid.DataSource = reader
      DataBind()
      reader.Close()
      cn.Close()
   End If
End Sub

  7. [デザイン] ビューに切り替え、[ GetSelections] をダブルクリックします。 これにより、エディターで分離コード クラス ファイルが開きます。 イベント ハンドラー内の既存のコードを GetSelections_Click 次のコードに置き換えます。

    Private Sub GetSelections_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GetSelections.Click
    Dim rowCount As Integer = 0
    Dim gridSelections As StringBuilder = New StringBuilder()'Loop through each DataGridItem, and determine which CheckBox controls
    'have been selected.
    Dim DemoGridItem As DataGridItem
    For Each DemoGridItem In DemoGrid.Items

        Dim myCheckbox As CheckBox = CType(DemoGridItem.Cells(0).Controls(1), CheckBox)
        If myCheckbox.Checked = True Then
            rowCount += 1
            gridSelections.AppendFormat("The checkbox for {0} was selected<br>", _
            DemoGrid.DataKeys(DemoGridItem.ItemIndex).ToString())
        End If
    Next
    gridSelections.Append("<hr>")
    gridSelections.AppendFormat("Total number selected is: {0}<br>", rowCount.ToString())
    ResultsInfo.Text = gridSelections.ToString()
End Sub

動作することを確認する

  1. [ ファイル ] メニューの [ すべて保存 ] をクリックして、Web フォームとプロジェクトに関連付けられている他のファイルを保存します。

  2. Visual Studio .NET 統合開発環境 (IDE) の [ ビルド ] メニューで、[ソリューションの ビルド] をクリックします。

  3. ソリューション エクスプローラーで、[Web フォーム] ページ (MySample.aspx) を右クリックし、[ブラウザーで表示] をクリックします。 ページにグリッド内のデータが表示されていることに注意してください。 さらに、各行の最初の列にチェック ボックスが表示されます。 ユーザーは、このチェック ボックスをクリックして特定の行をマークできます。

  4. クリックして行のチェックボックスをいくつか選択し、[選択項目の取得] をクリックします。

    ページがサーバーへのラウンド トリップを行い、イベント ハンドラーでコードを GetSelections_Click 実行すると、前の手順で選択した項目の一覧が表示されます。 イベント ハンドラーの GetSelections_Click コードは、ASP.NET DataGrid サーバー コントロール内の各 DataGridItem をループ処理し、関連する CheckBox コントロールの Checked プロパティが true かどうかを判断し、DataGrid のその特定の位置 DataKeys にある関連するキー値を記録します。

関連情報