MultiSelectTreeView.Mvc 演示使用

Install-Package bootstrap

public class ProductCategory
    {
        public int ProductCategoryId { get; set; }

        public string ProductCategoryName { get; set; }

        public string ProductCategoryDescription { get; set; }        
    }

public class ProductCategoryLevel
    {
        public int ProductCategoryLevelId { get; set; }

        public int ProductCategoryId { get; set; }

        public int ParentProductCategoryId { get; set; }

        public ProductCategory ProductCategory { get; set; }

        public ProductCategory ParentProductCategory { get; set; }        
    }

 

在这里，ProductCategoryLevel 定义了每个 ProductCategory 实例之间的父子关系。这可以是您应用程序中的任何类似对象。例如，Employee 和 Employee 汇报级别等。

第五步：配置数据转换的映射配置文件

- 为了将源数据集合转换为树视图兼容数据，我们需要定义对象之间的映射。映射应在应用程序启动时配置。

确保导入以下命名空间

using DTech.Models;
using DTech.Core.Builders;

这是我们为演示项目配置映射配置文件的方式 -

using AutoMapper;
using DTech.Models;
using TreeViewHelper.Mvc.Demo.Models;
        protected void Application_Start()
        {
            ......
            SetupMappingProfile();
        }

        public static void SetupMappingProfile()
        {
            AutoMapper.Mapper.CreateMap<ProductCategoryLevel, HierarchyNodeRawModel>()
                            .ForMember(dest => dest.NodeId, opt => opt.MapFrom(src => src.ProductCategoryLevelId))
                            .ForMember(dest => dest.EntityId, opt => opt.MapFrom(src => src.ProductCategoryId))
                            .ForMember(dest => dest.ParentEntityId, opt => opt.MapFrom(src => src.ParentProductCategoryId))
                            .ForMember(dest => dest.NodeTitle, opt => opt.MapFrom(src => src.ProductCategory.ProductCategoryName))
                            .ForMember(dest => dest.NodeDescription, opt => opt.MapFrom(src => src.ProductCategory.ProductCategoryDescription));
        }

Nuget 包提供了 **DTech.Models** 命名空间，其中包含与 TreeView 控件兼容的模型。
类型 **HierarchyNodeRawModel** 代表 TreeView 上的每个节点。
NodeId >> 在 HierarchyNodeRawModel 集合中必须是唯一的。如果关系不是多对多，并且 EntityId 是唯一的，则可以是与 EntityId 相同的字段。
EntityId >> 表示子实体的 ID 字段
ParentEntityId >> 表示父实体的 ID 字段
NodeTitle >> 理想情况下，用于在树节点上显示子实体名称的字段
NodeDescription >> 用于在树节点上显示子实体描述的字段。此字段是可选的，如果没有此类字段，则可以将其设置为空。

第六步：构建源数据集合，并调用 View。

- 使用源数据集合的类型实例化 HierarchicalDataBuilder
- 在控制器中从数据源（或服务）获取源数据集合
- 构建一个标识 ID（NodeId）的字符串集合，用于默认选择 TreeView 中的节点（如果有）。
- 将对象转换为树视图兼容类型（即 HierarchicalDataModel）。
- 将转换后的模型传递到托管 TreeView 控件的 View。

For simplicity of the demo, we have used following -
        public ActionResult Index()
        {

HierarchicalDataBuilder<ProductCategoryLevel> productCategoryLevelsBuilder = new HierarchicalDataBuilder<ProductCategoryLevel>();

            List<ProductCategoryLevel> categoryLevels = ProductCategoryLevel.GetAll();
            List<String> selectedCategoryLevels = new List<string>();
            selectedCategoryLevels.Add("7");
            selectedCategoryLevels.Add("4");
            HierarchicalDataModel dataModel = productCategoryLevelsBuilder.CreateHierarchicalDataModel(categoryLevels, true, "/ProductCategory/Details/[id]", "[id]", selectedCategoryLevels, "HierarchyNodes");
            return View(dataModel);
        }

请记住，在更实际的情况下，源数据集合的检索以及所选 NodeIds 的字符串集合的构建可能与上面所示的情况大不相同。它可以直接来自实际数据存储，或通过服务，具体取决于您的应用程序的体系结构。

此外，我们直接将 HierarchicalDataModel 传递给视图，而在实际情况中，此对象可能只是另一个模型的一部分。

例如，有一个 Product 类，它包含 ProductCategoryLevel 的集合。Product 类应作为视图的模型，而不是 List 的转换对象。这意味着，Product 类必须在其内部拥有 HierarchicalDataModel 属性，并将其分配给 List 的转换对象。
但为了演示目的，我们直接传递 HierarchicalDataModel。

_此外，HierarchicalDataBuilder 类中有各种 CreateHierarchicalDataModel 方法的重载，但为了演示目的，我们使用的是功能最全面的那个。_
此方法的每个重载都在控件中有文档记录，将在智能感知中为您提供有关方法及其每个参数的必要详细信息。

我们演示中使用的该方法及其参数的一些关键说明 -

HierarchicalDataModel dataModel = productCategoryLevelsBuilder.CreateHierarchicalDataModel(categoryLevels, true, "/ProductCategory/Details/[id]", "[id]", selectedCategoryLevels, "HierarchyNodes");

"/ProductCategory/Details/[id]" >> 参数：ManageActionUrl - 调用“管理”链接时应调用的控制器操作的 URL。[id] 是 ID 占位符，将被替换为显示按钮的节点的实际 ID 值。
请注意，“管理”链接并非总是出现，具体取决于使用的重载。而且，“管理”可以通过在方法中提供适当的参数来重命名为“查看”、“详细信息”或任何您想要的名称。

"[id]" >> 占位符，应与“ManageActionUrl”中指定的 ID 占位符相似。

"HierarchyNodes" >> 参数：dataBindControlIDPrefix - 在 MVC 中，当我们使用绑定控件数组到视图时，Post 操作会期望“name”属性具有特定格式才能提交模型。这应与 ModelName.ControllArrayName 相同。
例如，如果绑定到视图的模型是 Product，则此属性应提供为“Product.HierarchyNodes”，这样您才能在 Post 操作中获取选定的节点。

第七步：设计您的 View

确保导入以下命名空间

@using DTech.Models;
@using DTech.MVC;

将您的视图与预期的 Model 绑定

@model DTech.Models.HierarchicalDataModel

_在更实际的情况下，这可能是包含源数据集合和 HierarchicalDataModel 作为其属性的模型。例如，Product 实体将拥有 List 作为其属性，因此，HierarchicalDataModel 也应该是其属性。_

@Html.Raw(new _TreeViewHelper().GetTreeView(Model))

上面的语句将在视图中以树状表示的形式呈现数据。

如果需要将选择提交到控制器操作，则可能是这样的 -

@using (Html.BeginForm())
{   
    @Html.Raw(new _TreeViewHelper().LoadTreeView(Model))
    <input type="submit" value="Save and Continue" title="Save the selection, and continue to next screen to check the selected Items" />
} 

第八步：在 Submit 事件中处理选择

当用户在宿主视图中单击提交按钮时，将调用一个 HttpPost 控制器操作，并传递提交的模型。此时，HierarchicalDataModel 必须具有每个树节点的选中和未选中状态。使用 HierarchicalDataBuilder 类的 GetSelectedNodeIDs 方法检索选定节点的 ID。

例如，

        [HttpPost]
        public ActionResult Index(HierarchicalDataModel dataModel)
        {
            List<string> selectedProductCategoryLevelIDs = productCategoryLevelsBuilder.GetSelectedNodeIDs(dataModel.HierarchyNodes);
.......
        }

调用 GetSelectedNodeIDs 方法后，字符串集合应包含选定节点的 ID。这些 ID 将标识每个选定节点，可用于根据您的要求进一步将选择保存到数据库或任何其他操作。

问题/讨论