使用 KendoUI 树视图作为输入值答案

【问题标题】：Use KendoUI tree view as input value使用 KendoUI 树视图作为输入值
【发布时间】：2015-02-07 17:23:15
【问题描述】：

我在我的 ASP.NET MVC 项目中使用 Kendo UI TreeView 和 Kendo UI MVC Wrappers。

我的视图中有 HTML 表单。这是我的视图的代码：

<form method="POST" action="@Url.Action("Review")">
    @* ... *@
    @(Html.Kendo().TreeView()
        .Name("CategoryId")
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Categories", "ReviewCategories"))
        )
    )
    @* ... *@
    <input type="submit" class="btn btn-primary" value="Submit" />
</form>

树视图运行良好。这是Categoriesaction的代码：

public JsonResult Categories(int? id)
{
    var categories = this.forumCategoriesService.All()
       .Where(x => id.HasValue ? x.ParentId == id : x.ParentId == null)
       .Select(x => new { id = x.Id, Name = x.Title, hasChildren = x.Children.Any() });

    return this.Json(categories, JsonRequestBehavior.AllowGet);
}

问题是，当我点击submit 按钮时，表单会发送除所选CategoryId 的值以外的所有数据。

当我提交表单时，让 Kendo UI TreeView 发送CategoryId 的最优雅的方式是什么？

（如果没有简单的方法将其作为输入值发送，我将接受任何自定义 JavaScript 代码解决方案）

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc kendo-treeview

【解决方案1】：

我找到了一个解决方法。

首先：使用所需参数创建隐藏输入：

<input type="hidden" name="CategoryId" id="CategoryId" value="@Model.CategoryId" />

第二个：为树形视图添加on select事件处理程序：

@(Html.Kendo().TreeView()
    .Name("CategoryIdTreeView")
    .DataTextField("Name")
    .Events(ev => ev.Select("onCategorySelect"))     @* <--------------- *@
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("Categories", "ReviewCategories"))
    )
)

第三：实现handler，改变其中#CategoryId的值

function onCategorySelect(ev) {
    var dataItem = this.dataItem(ev.node);
    var categoryId = dataItem.id;
    $("#CategoryId").val(categoryId);
}

如果有人知道更好的解决方案，欢迎添加另一个答案。

【讨论】：