遅延ロード

TreeViewを使用する場合は、項目のコレクションに連結するのが一般的なプロセスです。しかし、ノードの子項目が実際に必要になるまで、子項目のロードを遅らせたいこともあります。この手法は、多数のレベルと子ノードから成る極めて深いツリーがある場合に特に役立ちます。Windowsコンピュータのフォルダ構成が典型的な例です。

TreeViewコントロールでは、遅延ロードを簡単に実装できます。遅延ロードモードでTreeViewを表示するには、タグヘルパーの場合は、必要になったときに項目をロードするアクションを定義し、lazy-load-action-urlタグにアクションURLを設定します。HTMLヘルパーの場合は、遅延ロードデータを返すアクションとして、Bindプロパティの2番目のパラメータを使用する必要があります。

これとは別に、JavaScriptコードを使用して、クライアント側で遅延ロードを設定することもできます。LazyLoadFunctionプロパティを、ユーザーがノードを展開したときに呼び出す関数名に設定します。この関数は、2つのパラメータとして、親ノードと、データが利用可能になったときに呼び出されるコールバックを受け取ります。

以下のコード例を参考に、TreeViewコントロールで遅延ロード機能を実装する方法を理解してください。

メモ：このサンプルでは、TreeViewコントロールのデータソースとして、C1Nwind.mdfデータベースファイルとEmployeeEx.csを使用しています。デフォルトでは、C1Nwind.mdf ファイルは、システムのC:\Users\<username>\Documents\ComponentOne Samples\ASP.NET MVC\MVC\CS\MvcExplorer\App_Dataフォルダに用意されています。C1Nwindデータベースの詳細については、「データの設定」を参照してください。

コードの場合

モデル - EmployeeEx.cs

C#	コードのコピー
using System.Collections.Generic; using System.Linq; using System.Data.Entity; namespace LazyLoading.Models { public class EmployeeEx { private static DbSet employees = new C1NWindEntities().Employees; public int EmployeeID { get; set; } public string Name { get; set; } public EmployeeEx[] SubExployees { get; set; } public static IEnumerable GetEmployees(int? leaderID) { return employees.Where(e => e.ReportsTo == leaderID).ToList().Select(e => new EmployeeEx { EmployeeID = e.EmployeeID, Name = e.FirstName + " " + e.LastName, SubExployees = employees.Any(ep => ep.ReportsTo == e.EmployeeID) ? new EmployeeEx[0] : null }); } } }

コードのコピー

using System.Collections.Generic;
using System.Linq;
using System.Data.Entity;

namespace LazyLoading.Models
{
    public class EmployeeEx
    {
        private static DbSet employees = new C1NWindEntities().Employees;
        public int EmployeeID { get; set; }
        public string Name { get; set; }
        public EmployeeEx[] SubExployees { get; set; }

        public static IEnumerable GetEmployees(int? leaderID)
        {
            return employees.Where(e => e.ReportsTo == leaderID).ToList().Select(e => new EmployeeEx
            {
                EmployeeID = e.EmployeeID,
                Name = e.FirstName + " " + e.LastName,
                SubExployees = employees.Any(ep => ep.ReportsTo == e.EmployeeID) ? new EmployeeEx[0] : null
            });
        }
    }
}

コントローラー - LazyLoadingController.cs

Razor	コードのコピー
using C1.Web.Mvc; using System.Web.Mvc; using <ApplicationName.Models>; namespace LazyLoading.Controllers { partial class TreeViewController : Controller { // GET: LazyLoad public ActionResult LazyLoading() { return View(); } public ActionResult Load() { return Json(EmployeeEx.GetEmployees(null)); } public ActionResult LazyLoading_LoadAction([C1JsonRequest]TreeNode node) { var leaderID = (int?)node.DataItem["EmployeeID"]; return Json(EmployeeEx.GetEmployees(leaderID)); } } }

Razor

コードのコピー

using C1.Web.Mvc;
using System.Web.Mvc;
using <ApplicationName.Models>;

namespace LazyLoading.Controllers
{
    partial class TreeViewController : Controller
    {

        // GET: LazyLoad
        public ActionResult LazyLoading()
        {
            return View();
        }

        public ActionResult Load()
        {
            return Json(EmployeeEx.GetEmployees(null));
        }

        public ActionResult LazyLoading_LoadAction([C1JsonRequest]TreeNode node)
        {
            var leaderID = (int?)node.DataItem["EmployeeID"];
            return Json(EmployeeEx.GetEmployees(leaderID));
        }
    }
}

ビュー - LazyLoading.cshtml

Razor	コードのコピー
@(Html.C1().TreeView() .Bind(Url.Action("Load"), Url.Action("LazyLoading_LoadAction")) .DisplayMemberPath("Name") .ChildItemsPath("SubExployees"))

先頭に戻る