TreeViewでチェックボックスの変更イベントを発生させる方法（ポストバック方法）

TreeViewでチェックボックスの変更イベントを発生させる方法（ポストバック方法） | asp.net

2017/03/05
21:29

asp.netにてポストバックを発生させる方法は、通常の場合サーバーコントロールに AutoPostBack="True" としますが、TreeViewでは AutoPostBackは効果が無く、Javascriptによってポストバックを発生させる必要があります。その方法について今回はご紹介いたします。

前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降

１．ポストバック用のJavascriptを作成する

<script type="text/javascript">
function PostBackForTreeView()
{
    var o = window.event.srcElement;
    if (o.tagName == "INPUT" && o.type == "checkbox")
    {
        //__doPostBack("","");
        <%= Page.ClientScript.GetPostBackEventReference(Me, String.Empty) %>
    } 
}
</script>

２．TreeViewにJavascriptを設定する

AutoPostBackは設定せず、onclickに作成したJavascript関数名を設定します。
<asp:TreeView ID="trvTest" runat="server" onclick="PostBackForTreeView();" >

３．VBにてチェックボックスが変更された際のイベントを作成する

チェックボックスをON/OFFした際の処理であれば、TreeNodeCheckChangedイベントが無難でしょう。以下のコードを記述します。
Private Sub TreeView1_TreeNodeCheckChanged(sender As Object, e As TreeNodeEventArgs) Handles TreeView1.TreeNodeCheckChanged

４．サンプルコード

aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TreeViewTest.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
    function PostBackForTreeView()
    {
        var o = window.event.srcElement;
        if (o.tagName == "INPUT" && o.type == "checkbox")
        {
            //__doPostBack("","");
            <%= Page.ClientScript.GetPostBackEventReference(Me, String.Empty) %>
        } 
    }
</script>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TreeViewTest</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="trvTest" runat="server" onclick="PostBackForTreeView();"  >
        </asp:TreeView>
    </div>
    </form>
</body>
</html>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        Dim ds As New DataSet
        Dim dt1 As New DataTable
        Dim dt2 As New DataTable
        Dim col0 As New DataColumn
        Dim col1 As New DataColumn
        Dim col2 As New DataColumn
        Dim col3 As New DataColumn
        Dim col4 As New DataColumn
        Dim col5 As New DataColumn
        Dim col6 As New DataColumn
        col0.ColumnName = "check"
        col1.ColumnName = "group"
        col2.ColumnName = "code"
        col3.ColumnName = "name"
        col4.ColumnName = "check"
        col5.ColumnName = "group"
        col6.ColumnName = "name"
        col0.DataType = GetType(System.Boolean)
        col1.DataType = GetType(System.Int32)
        col2.DataType = GetType(System.Int32)
        col3.DataType = GetType(System.String)
        col4.DataType = GetType(System.Boolean)
        col5.DataType = GetType(System.Int32)
        col6.DataType = GetType(System.String)
        dt1.Columns.Add(col0)
        dt1.Columns.Add(col1)
        dt1.Columns.Add(col2)
        dt1.Columns.Add(col3)
        For i As Integer = 1 To 5
            Dim row As DataRow = dt1.NewRow()
            row("check") = False
            row("group") = 1
            row("code") = i
            row("name") = "名前" + i.ToString()
            dt1.Rows.Add(row)
        Next i

        dt2.Columns.Add(col4)
        dt2.Columns.Add(col5)
        dt2.Columns.Add(col6)
        Dim row2 As DataRow = dt2.NewRow()
        row2("check") = False
        row2("group") = 1
        row2("name") = "グループ１"
        dt2.Rows.Add(row2)

        dt1.TableName = "childTable"
        dt2.TableName = "parentTable"
        ds.Tables.Add(dt1)
        ds.Tables.Add(dt2)
        ds.Relations.Add("relation1", dt2.Columns("group"), dt1.Columns("group"))

        Dim parentRow As DataRow = ds.Tables("parentTable").Rows(0)
        Dim parentNode As TreeNode = New TreeNode(parentRow.Item(1) & " " & parentRow.Item(2))
        parentNode.ShowCheckBox = True
        parentNode.ToolTip = parentRow.Item(1) & " " & parentRow.Item(2)
        Me.trvTest.Nodes.Add(parentNode)

        Dim childRow As DataRow
        Dim childNode As TreeNode
        For Each childRow In parentRow.GetChildRows("relation1")
            childNode = New TreeNode(childRow(1) & " " & childRow(2) & " " & childRow(3))
            childNode.ShowCheckBox = True
            childNode.ToolTip = childRow(1) & " " & childRow(2) & " " & childRow(3)
            parentNode.ChildNodes.Add(childNode)
        Next
    End If
End Sub
Private Sub trvTest_TreeNodeCheckChanged(sender As Object, e As TreeNodeEventArgs) Handles trvTest.TreeNodeCheckChanged
    If e.Node.Checked = True Then
        e.Node.Text = "チェックされました。"
    Else
        e.Node.Text = e.Node.ToolTip
    End If
End Sub

2017/04/10追記
ポストバックのjavascriptである __doPostBack は公開されていないasp.netのFunctionなので、将来的な仕様変更が担保されておらず、推奨されない為、以下のようにコードブロックにてClientScriptManager.GetPostBackEventReferenceを使用する記述に変更しました。
<%= Page.ClientScript.GetPostBackEventReference(Me, String.Empty) %>

最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。

関連記事

データが無い状態でもListViewでヘッダーを表示する方法 | asp.net
TreeViewにおいて親子関係のチェックを付ける方法 | asp.net
TreeViewでチェックボックスの変更イベントを発生させる方法（ポストバック方法） | asp.net
ListViewで行毎にテキストボックスのTextChangedイベントを発生させる方法 | asp.net
ListViewの行インデックスを取得する方法 | asp.net

TreeViewにおいて親子関係のチェックを付ける方法 | asp.net ホーム LinqでDictionary型から条件を指定してフィルターし、ToDictionaryで元の型に変換する方法 | VB.NET

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

　入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

ITブログ時々なんでもブログ