使用Kendo UI网格通过ajax发送表单数据到控制器

Question

我想通过kendo ui网格将模型数据从表单发送到控制器。我还没有找到任何帮助。

1. 我可以使用表单数据并将其作为参数发送吗？

这里是我的网码，

enter@(Html.Kendo().Grid<LookupGridResults>() 
           .Name("grid") 

           .Columns(columns => 
           { 
            columns.Bound(p => p.FirstName).Width(225); 
            columns.Bound(p => p.LastName).Width(225); 
            columns.Bound(p => p.City).Width(225); 
            columns.Bound(p => p.County).Width(225); 
            columns.Bound(p => p.State).Width(225); 
            columns.Bound(p => p.Zip).Width(225); 
           }) 
           .Pageable() 
           .Sortable() 
           .Scrollable() 
           .HtmlAttributes(new { style = "height:550px;" }) 
           .DataSource(dataSource => dataSource 
            .Ajax() 
            .PageSize(50) 
            .ServerOperation(true) 
            .Read(read => read.Action("ReadLeads", "LeadsManagement")) 

           ) 

            ) 

我想尝试这样做，因为一个AJX呼叫控制器如果可能的话。

Answer 1

您可以使用grid.dataSource.read方法与数据对象参数（http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read）：

var optionalData = { foo: 42, bar: "baz" }; 
dataSource.read(optionalData); 

或者，如果你想自定义操作要求，再有就是无证dataSource.success方法：

$.ajax({ 
    type: "POST", 
    url: '...', 
    data: {....}, 
    success: function (data) { 
     //data is array of grid items to rebind 
     grid.dataSource.success(data); 
    } 
}); 

更新

要从表单中收集数据我正在使用jQuery扩展serializeObject（https://stackoverflow.com/a/1186309/5575536）：

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

和使用是未来：

var data = $('#form').serializeObject(); 
//or 
var data = $('#container').find('input,select,textarea').serializeObject();