ASP.NET MVC コントロールヘルプ
画像
コントロールの使用 > TreeView > TreeViewの使用 > 画像

TreeViewコントロールにはさまざまな外観を与えることができます。そのために、柔軟な画像カスタマイズ機能とカスタムユーザーインタフェース（UI）オプションを指定するプロパティが提供されています。TreeViewでは、ノード、接続線、および展開/折りたたみアイコンを表す画像を使用できます。ImageMemberPathプロパティを使用して、画像URLを含むデータ項目のプロパティの名前を指定することで、ノードに画像を追加できます。

このサンプルでは、electronics.png、phones.png、toys.png、およびhome.pngを使用しています。これらの画像は、アプリケーションの/Content/images/フォルダに保存されています。データソースにはImageフィールドが含まれており、その値として画像URLが含まれています。

次のコード例は、TreeViewノードに画像を追加する方法を示します。

コードの場合

モデル - Property.cs
C#
コードのコピー 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

public class Property
    {
        public string Header { get; set; }
        public string Image { get; set; }
        public bool NewItem { get; set; }
        public Property[] Items { get; set; }
        public static Property[] GetData(UrlHelper urlHelper)
        {
            return new Property[]
            {
                new Property
                {
                    Header = "電子機器",
                    Image = urlHelper.Content("~/Content/images/electronics.png"),
                    Items = new Property[]
                    {
                        new Property { Header="トリマー/シェーバー" },
                        new Property { Header="タブレット" },
                        new Property { Header="携帯電話",
                            Image =urlHelper.Content("~/Content/images/phones.png"),
                            Items = new Property[] {
                                new Property { Header="Apple" },
                                new Property { Header="Motorola", NewItem=true },
                                new Property { Header="Nokia" },
                                new Property { Header="Samsung" }}
                        },
                        new Property { Header="スピーカー", NewItem=true },
                        new Property { Header="モニター" }
                    }
                },
                new Property{
                    Header = "玩具",
                    Image = urlHelper.Content("~/Content/images/toys.png"),
                    Items = new Property[]{
                        new Property{ Header = "縫いぐるみ" },
                        new Property{ Header = "列車セット" },
                        new Property{ Header = "クレーンゲーム", NewItem = true },
                        new Property{ Header = "プロポ" },
                        new Property{ Header = "玩具銃" }
                    }
                },
                new Property{
                    Header = "ホーム",
                    Image = urlHelper.Content("~/Content/images/home.png"),
                    Items = new Property[] {
                        new Property{ Header = "コーヒーメーカー" },
                        new Property{ Header = "パンメーカー", NewItem = true },
                        new Property{ Header = "ソーラーパネル", NewItem = true },
                        new Property{ Header = "仕事台" },
                        new Property{ Header = "プロパングリル" }
                    }
                }
            };
        }
    }

TreeViewController

TreeViewController.cs
コードのコピー 
using <ApplicationName>.Models;
    
public ActionResult Index()
{
   return View(Property.GetData(url));
}

ビュー - Index.cshtml

Razor
コードのコピー 
@using <ApplicationName.Models>
@model Property[]

@(Html.C1().TreeView()
    .Bind(Model)
    .DisplayMemberPath("Header")
    .ChildItemsPath("Items")
    .ImageMemberPath("Image"))

 

 

Copyright © MESCIUS, Inc. All rights reserved.