ASP.NET GridViewのホームへ戻る

GridViewを並べ替えたときに選択されている行を保持する (GridView03StepUp1.aspx)

 

GridViewから[選択]ボタンをクリックして行を選択した状態で列を並べ替えたときに、選択した行を保持するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

 

  GridViewDataBoundイベントハンドラの使い方

  GridViewPageIndexChangingイベントハンドラの使い方

  GridViewSortingイベントハンドラの使い方

  GridViewSelectedIndexChangedイベントハンドラの使い方

  ViewStateに値を保存したり取り出す方法

 

 

図 行を選択した後に並べ替えしても選択した行が保持される 

 

 

1. 新規Webページ作成

 

ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView03StepUp1.aspx」を作成します。

 

2. コントロール作成

 

GridView03.aspxのデザイナならGridView1SqlDataSource1のオブジェクトをコピーしたら、GridView03StepUp1.aspxのデザイナに貼り付けします。デザイナにGridView1SqlDataSource1のオブジェクトが作成されたら、「GridViewタスク」から「選択を有効にする」をチェックします。「GridViewタスク」から[列の編集]を選択して、「フィールド」ダイアログを表示します。「選択されたフィールド」から[選択]のフィールドをクリックしたら、CommandFieldプロパティからButtonTypeプロパティに[Button]を設定して[OK]をクリックします。

 

3. イベントハンドラ追加

 

デザイナの右クリックから[コードの表示]を選択します。コードビューが表示されたら、「(全般)」のドロップダウンリストから[GridView1]を選択します。「(宣言)」のドロップダウンリストから[DataBound][SelectedIndexChanged][PageIndexChanging][Sorting]を選択して、これらのイベントハンドラを生成したら、次のコードを追加します。

 

Protected Sub GridView1_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.DataBound

  Dim strSelectedValue As String = CType(ViewState("SelectedValue"), String)

  If IsNothing(strSelectedValue) Then

    Return

  End If

  For Each Row As GridViewRow In GridView1.Rows

    Dim strKeyValue As String = CType(GridView1.DataKeys(Row.RowIndex).Value, String)

    If strKeyValue = strSelectedValue Then

      GridView1.SelectedIndex = Row.RowIndex

    End If

  Next

End Sub

 

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged

  If GridView1.SelectedIndex <> -1 Then

    ViewState("SelectedValue") = GridView1.SelectedValue

  End If

End Sub

 

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging

  GridView1.SelectedIndex = -1

End Sub

 

Protected Sub GridView1_Sorting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSortEventArgs) Handles GridView1.Sorting

  GridView1.SelectedIndex = -1

End Sub

 

4. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewCustomersテーブルが表示されます。GridViewから得意先IDが「5」の[選択]ボタンをクリックして行を選択します。次に、GridViewのヘッダーから[ID]2回クリックして降順に並べ替えします。GridViewのページャーから[5]をクリックして最終ページに移動すると、得意先ID5」の行が選択された状態になっています。

 

 

 選択した行が並べ替えしても保持される

 

 

◆解説

 

GridViewから選択した行を並べ替えしても保持するには、選択した行の主キーをViewStateに保存してGridViewが再表示されるときに復元します。

 

GridViewから行を選択したときレコードの主キーを取得するには、GridViewSelectedIndexChangedイベントハンドラを追加します。このイベントハンドラでは、GridViewSelectedIndexプロパティを調べて行が選択されているかチェックします(選択されているときは「-1」以外が格納されている)。行が選択されているときは、GridViewSelectedValueプロパティに格納されている主キー(CustomerID)を取得してViewStateに保存します。

 

ViewStateに主キーを保存すると、Webページがポストバックされても内容が保持されます。ViewStateに主キーを保存するには、Addメソッドを使用します。Addメソッドの引数には、キーと値を指定します。Addメソッドを省略してViewStateの引数に直接キーを指定して記述することもできます。

 

ViewState.Add(key:="SelectedValue", value:=GridView1.SelectedValue)

ViewState("SelectedValue") = GridView1.SelectedValue

 

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged

  If GridView1.SelectedIndex <> -1 Then

    ViewState("SelectedValue") = GridView1.SelectedValue

  End If

End Sub

 

GridViewを並べ替えした後に選択されて行を復元するには、GridViewDataBoundイベントハンドラを追加します。このイベントハンドラでは、ViewStateから選択した行の主キーを取得して変数に保存します。For Each …Nextでは、GridViewRowsコレクションからGridViewRowを取得してDataKeysコレクションに格納されている主キーを検索します。一致する主キーを見つけたら、SelectedIndexプロパティにRowIndexプロパティの値を設定してこの行を選択行とします。GridViewRowRowIndexにはレコードの行番号が格納されています。

 

GridViewDataKeysコレクションに主キーを格納するには、DataKeyNameプロパティに主キーのフィールド名を設定する必要があります。このプロパティは、SqlDataSourceを作成するときテーブルから主キーのフィールド(CustomerID)を選択すると自動的に設定されます。

 

<asp:GridView ID="GridView1" runat="server"

  AllowPaging="True" AllowSorting="True"

  DataKeyNames="CustomerID"・・・>

  ・・・

</asp:GridView>

 

 

Protected Sub GridView1_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.DataBound

  Dim strSelectedValue As String = CType(ViewState("SelectedValue"), String)

  If IsNothing(strSelectedValue) Then

    Return

  End If

  For Each Row As GridViewRow In GridView1.Rows

    Dim strKeyValue As String = CType(GridView1.DataKeys(Row.RowIndex).Value, String)

    If strKeyValue = strSelectedValue Then

      GridView1.SelectedIndex = Row.RowIndex

    End If

  Next

End Sub

 

GridViewPageIndexChangingSortingイベントハンドラでは、GridViewSelectedIndexプロパティに「-1」を設定して現在されている行を無効(通常行に戻す)にします。

 

Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles GridView1.PageIndexChanging

  GridView1.SelectedIndex = -1

End Sub

 

Protected Sub GridView1_Sorting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSortEventArgs) Handles GridView1.Sorting

  GridView1.SelectedIndex = -1

End Sub

 

ASP.NET GridViewのホームへ戻る