Treeview (Kendo UI) с TextBox на същата страница най-добри практики в MVC4?

Да кажем, че имам изглед с дървовиден изглед на Kendo, ограничен към отдалечен източник на данни.

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