fc2ブログ

記事一覧

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) %>





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


関連記事

コメント

コメントの投稿

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

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

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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