Treeview (Kendo UI) с TextBox на одной странице с лучшими практиками в MVC4?

Допустим, у меня есть представление с древовидным представлением Кендо, привязанным к удаленному источнику данных.

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

Таким образом, древовидное представление просто вызывает действие Schemas в моем FormsController

Также на той же странице у меня есть форма, которая представляет собой просто текстовое поле и кнопку для отправки формы.

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

Поэтому мне просто интересно, как лучше всего обрабатывать пользовательский ввод и передавать его действию Load действия FormsController? Пользователь должен выбрать один из вариантов в дереве и ввести значение в текстовое поле. Или мне следует создать какую-то модель представления для моего представления со всеми моими узлами внутри + два дополнительных поля для ввода текстового поля и выбранного узла?


c# asp.net-mvc asp.net-mvc-3 kendo-ui telerik-mvc
person Jevgenij Nekrasov    schedule 29.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы убрал элементы формы, оставив:

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

В следующем js это подберет идентификатор элемента дерева при выборе. Вторая функция вызовет действие контроллера формы с параметрами.

<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>

Я не тестировал это, но это должно быть близко. Я с нетерпением жду, когда кто-то добавит лучший подход.

person Neepheed    schedule 29.10.2012
comment
Хорошо, но как мне вернуться и показать представление из действия «Загрузить»? - person Jevgenij Nekrasov; 30.10.2012
comment
Вы хотите перенаправить на представление или показать его как частичное на текущей странице? - person Neepheed; 30.10.2012