記事一覧

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


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


aspnet_treeview.png



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



1.ポストバック用の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>



2.TreeViewにJavascriptを設定する

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



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

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



4.サンプルコード

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>

VB
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") = "グループ1"
        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) %>


関連記事

コメント

コメントの投稿

アルバム

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。