树视图（剑道 UI）与 MVC4 中同一页面上的 TextBox 最佳实践？

Question

假设我有一个 Kendo 树视图绑定到远程数据源的视图。

@(Html.Kendo().TreeView()
    .Name("schemas")
    .DataTextField("name")
    .DataSource(dataSource => dataSource.Read(read => read.Action("Schemas", "Forms")))
    .Events(events => events
    .Select("onSelected")))

所以树视图只是在我的FormsController 中调用Schemas 操作

在同一页面上我还有一个表单，它只是一个文本框和一个提交表单的按钮

@using (Html.BeginForm("Load", "Forms", FormMethod.Post))
{   
    <div id="rootNode">
        @Html.TextBox("rootElementName")            
        @Html.Button("next")
    </div>
}

所以我只是想知道处理用户输入并将其传递给FormsController 的Load 操作的最佳方法是什么？用户应该选择树视图中的选项之一并将值输入到文本框中。 或者我应该为我的视图创建某种视图模型，其中包含我的所有节点+文本框输入和选定节点的两个附加字段？

Answer 1

我会取出表单元素，离开：

<div id="rootNode">
    @Html.TextBox("rootElementName")            
    @Html.Button("next")
</div>

下面的 js，这将在选择时获取树项 id。 第二个函数将使用参数调用您的表单控制器操作。

<script>
    var selectedNodeid;

    //get the tree selected item id
    function onSelected(e) {
        var data = $('#schemas).data('kendoTreeView').dataItem(e.node);
        selectedNodeid = data.id;
    }

    //button on click event
    $(document).ready(function () {
        $("#next")
        .bind("click", function () {  
           //get parameters then pa
           var id = selectedNodeid;
           var rootElementName = $('#rootElementName).val()
           $.ajax({ 
             url: "Form/Load", 
             data:{id:id,rootElementName:rootElementName},
             success: function () { } 
           });
        }
     })
</script>

我没有对此进行测试，但它应该很接近。 我期待有人添加更好的方法。