使用 KendoUI 树视图作为输入值
Use KendoUI tree view as input value
我在 ASP.NET MVC 中使用 Kendo UI TreeView 和 Kendo UI MVC Wrappers 项目。
我有 HTML 表格。这是我的 view:
的代码
<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>
树视图运行完美。这是 Categories
action:
的代码
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 代码解决方案)
我找到了解决方法。
首先: 使用所需参数创建隐藏输入:
<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);
}
如果有人知道更好的解决方案欢迎补充。
我在 ASP.NET MVC 中使用 Kendo UI TreeView 和 Kendo UI MVC Wrappers 项目。
我有 HTML 表格。这是我的 view:
的代码<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>
树视图运行完美。这是 Categories
action:
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 代码解决方案)
我找到了解决方法。
首先: 使用所需参数创建隐藏输入:
<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);
}
如果有人知道更好的解决方案欢迎补充。