インフラジスティックス・ジャパン株式会社のBlog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

HTML要素の属性追加について

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を例に実際に属性追加を行ってみます。

image

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

まずはノードの作成です。以下では Page_Load でルートノードとそれに紐づく2つの子ノードを作成しています。各ノードに対して、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);
        }
    }

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

ここで実行してみます。

image実行結果

image
実行時の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 を取り出し、ダイアログ表示しています。

image 実行結果

 

 

 

 

今回はWebDataTreeを例として使いましたが、どのコントロールに対しても行えます。サーバサイドからクライアントサイドに渡したい情報を付加する方法として使えます。

※注意点
追加した属性はポストバック対象とならないので、フルポストバックした際に追加した属性は引き継がれず消えてしまいます。サーバサイドで値を引きまわすための領域としては使えません。

 

無料トライアルダウンロードはこちら

jp.infragistics.com