在表单提交时在 Kendo UI Listview 中创建列表答案

【问题标题】：Create list in Kendo UI Listview on form submit在表单提交时在 Kendo UI Listview 中创建列表
【发布时间】：2014-08-26 14:36:31
【问题描述】：

想象以下视图模型，其中我有一个空模型和表单要填写。

 Public Class McGuffinViewModel
  {
       public int FieldA {get; set;}
       public string FieldB {get; set;}
       public Ienumerable<Listitem> Items {get; set;}
  }

所以我转到 Create Mcguffin 页面，在表单中我包含了以下部分内容：

@model IEnumerable<Listitem>

//Item Template Defined here

@(Html.Kendo().ListView<SidetracksViewModel>(Model)
                      .Name("listView")
                      .TagName("div")
                      .ClientTemplateId("templateA")
                      .BindTo(Model)
                      .DataSource(ds => ds.Model(m => m.Id("Id"))
                          .Read(read => read.Action("Read", "McGuffin"))
                          .Create(create => create.Action("Create", "McGuffin"))
                          .Update(update => update.Action("Update", "McGuffin"))
                          .Destroy(destroy => destroy.Action("Remove", "McGuffin"))
                                )
                      .Editable()
)
 //Style Here

每当我提交表单时，添加到列表视图中的所有列表项都不会与常规模型状态相关联。 Listview 计数始终为 0。如何让此列表与模型实际绑定和更新？如果不是这样，BindTo 甚至能为我做什么？

【问题讨论】：

标签： asp.net-mvc forms listview kendo-ui asp.net-mvc-5

【解决方案1】：

我有一个类似的问题，并通过绑定表单的提交事件并创建一个隐藏的列表框并将剑道数据项移动到列表框来解决这个问题

var data = $("#listView").data("kendoListView").dataSource.data();
                            var selectOptions = "<select name='Items' style='display:none' multiple='multiple' >";
                            for (var i = 0 ; i < data.length; i++) {
                                selectOptions += "<option value='" + data[i].Id + "'>" + data[i].Id + "</option>"
                            }
                            selectOptions += "</select>";

                            $('form').append(selectOptions); 
                            $("select[name='Items'] option").attr("selected", "selected");

【讨论】：

【解决方案2】：

我从 Telerik 找到了这个解决方案： Post Selected Items Back To Controller

JS 斌： Post Selected Items Back To Controller

$("form").submit(function(e){
  var form = $(this);

  var list = $("#listView").data("kendoListView");  
  var selected = list.select();
  for(var i = 0; i< selected.length; i++){
    var dataItem = list.dataSource.getByUid($(selected[i]).attr("data-uid"));
    var newFormElement = $("<input name='products["+i+"]' type='hidden'>").val(dataItem.ProductName);
    form.append(newFormElement); 
  }
});

【讨论】：