使用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();