HTML要素の属性追加について - インフラジスティックス・ジャパン株式会社Blog

ASP.NET コントロールは、サーバ側のスクリプトによりコントロール（またはそれに紐づく要素）に対して HTML 属性を追加することができます。弊社のASP.NET向けコントロールもこれを踏襲しており、コントロールやその要素に対してHTML属性を付加することができます。

MSDN - ASP.NET Web ページのコントロールの HTML 属性を設定する
http://msdn.microsoft.com/ja-jp/library/7a9d6h4f%28v=vs.100%29.aspx

今回は、WebDataTreeを例に実際に属性追加を行ってみます。

WebDataTreeは、階層データを表示するために使用できるコントロールで、展開可能なツリーノードによって構成されています。今回はサーバサイドでノードを構成する際に、各ノードに対して属性追加し付加情報をクライアントサイドで取り出せるようにします。

まずはノードの作成です。以下では Page_Load でルートノードとそれに紐づく２つの子ノードを作成しています。各ノードに対して、Attributs.Add() で ExtraIDという属性を新たに追加しています。

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //ルートノードの作成
            DataTreeNode root = new DataTreeNode();
            root.Text = "root1";
            root.Value = "root_1";
            root.Attributes.Add("ExtraID", "みかん"); //ExtraID属性を追加
            
            //ルートノードに子ノードを追加
            DataTreeNode node1 = new DataTreeNode();
            node1.Text = "test1";
            node1.Value = "test_1";
            node1.Attributes.Add("ExtraID", "れもん"); //ExtraID属性を追加
            root.Nodes.Add(node1);

            //ルートノードに子ノードを追加
            DataTreeNode node2 = new DataTreeNode();
            node2.Text = "test2";
            node2.Value = "test_2";
            node2.Attributes.Add("ExtraID", "りんご"); //ExtraID属性を追加
            root.Nodes.Add(node2);

            //ルートノードをWebDataTreeに追加
            this.WebDataTree1.Nodes.Add(root);
        }
    }

ルートノードに対しては”みかん”、１つ目の子ノードには”れもん”、２つ目の子ノードには”りんご”という文字列が ExtraID 属性として追加されました。

ここで実行してみます。

実行結果

実行時のHTMLの各ノード（ li エレメント）

実行時のHTMLを覗いてみるとしっかりExtraIDが追加されていますね！

続いて、Javascriptでこれらの属性の中身を取り出す処理を書きます。今回は、クライアントサイドのノードクリックのイベントで、クリックされたノードのExtraID属性を取り出します。

function WebDataTree1_NodeClick(sender, eventArgs)
{
    //クリックされたノードのExtraID属性の取り出し
    extraID = eventArgs.getNode().get_element().getAttribute("extraid");
    alert(extraID); //表示
}

get_element() メソッドによりクリックされたノードに対するHTML要素（<li>）を取得したら、あとは getAttribute() メソッドにより ExtraID を取り出し、ダイアログ表示しています。

実行結果