asp.net-mvc - 无法获取 kendo MVC Treeview 中 HtmlAttributes 项的值

Question

我正在使用 Kendo MVC 包装器扩展从我的模型创建 TreeView。我想将一些数据从具有 HtmlAttributes 的模型传递到 View 。这是我的行动:

public ActionResult Index()
    {
        var nodeList = new List<TreeViewItemModel>();
        nodeList.Add(new TreeViewItemModel
        {
            Id = "1",
            Text = "Item 1",
            HasChildren = true,
            HtmlAttributes = new Dictionary<string, string>
            {
                {"class","XXXX"}
            },
            Items = new List<TreeViewItemModel>
                {
                    new TreeViewItemModel{Id="1.1", Text = "sub Item 1.1",HasChildren = false},
                    new TreeViewItemModel{Id="1.2", Text = "sub Item 1.2",HasChildren = false}
        });
        nodeList.Add(new TreeViewItemModel { Id = "2", Text = "Item 2", HasChildren = false });

        return View(nodeList);
    }

这是我的观点:

@using Kendo.Mvc.UI
@model IEnumerable<Kendo.Mvc.UI.TreeViewItemModel>
@(Html.Kendo().TreeView()
.Name("treeView")
   .BindTo(Model)
   .DragAndDrop(true)
            )

这是来自 Chrome 的元素

<li class="k-item k-first" data-id="1" data-uid="6263f4c5-85f3-446c-a843-7d3786fb0f68" role="treeitem" id="treeView_tv_active">

正如你所看到的，我的 li 标签中没有任何 class:XXX 那么我怎样才能将 XXX 类赋予 li 标签呢？

Answer 1

我不知道如何自动执行此操作，因此这里有一个解决方法。

C# 传回 List<Kendo.Mvc.UI.TreeViewItemModel>()到 Treeview ->数据源->传输->读取事件:

var items = new List<Kendo.Mvc.UI.TreeViewItemModel>();

////////////////////////////////////////////////////////////////////////////////

// areas of expertise
var aoe = new Kendo.Mvc.UI.TreeViewItemModel()
{
    Text = "Areas of Expertise",
    Id = "resume-treeview-category-AreasOfExpertise",
    HasChildren = false,
    HtmlAttributes = new Dictionary<string, string>(){{ "class", "resume-treeview-category"}, {"cat-id", "AreasOfExpertise" }},

};
items.Add(aoe);

return Json(items, JsonRequestBehavior.AllowGet);

然后，我 Hook dataBound 事件以将上述属性添加到 Treeview 项中。

jQuery(document).ready(function ($) {
    $("#document-treeview").kendoTreeView({
        dataTextField: "Text",
        dataSource: {
            transport: {
                read: {
                    type: 'POST',
                    url: "@Url.Action("GetAllTreeData", "Document2")",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json'
                },
                parameterMap: function (data, type) {
                    if (type == "read") {
                        return JSON.stringify({
                            id: ResumeId
                        });
                    }
                }
            },
            schema: {
                model: {
                    id: "Id",
                    hasChildren: "HasChildren",
                    children: "Items"
                }
            }
        },
        dataBound: function(e) {
            // Apparently reading an item after treeview creation doesn't apply the html attributes. Do that here.

            var len = this.dataSource.data().length;

            for (var i = 0; i < len; i++)
            {
                var dataItem = this.dataSource.data()[i];

                var uid = dataItem.uid;
                var li = $('#document-treeview li[data-uid="' + uid + '"]');

                li.addClass(dataItem['HtmlAttributes']['class']);
                li.attr('cat-id', dataItem['HtmlAttributes']['cat-id']);
            }
        }
    });
}

请注意，从 C# 添加的 HtmlAttributes 在 JavaScript 中显式处理 =/