コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
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>
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") = "グループ１"
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
