Kendo UI JSON結果到ASP.NET MVC5 Action作爲參數

Question

我正在使用Kendo UI Javascript - kendoGrid - （不是ASP.NET MVC）和ASP.NET MVC。

我有一個問題：

我在哪裏運行數據源的同步方法劍道時

同步=虛假和批量= TRUE。

當autoSync = true時，Action方法中的參數可識別JSON obj。 它不會被設置爲false。

我試圖在kendoGrid中的save事件中調用它，但是什麼也沒做。在此先感謝所有幫助:)

這裏是我做了什麼：

視圖模型：

public class TaskControllerViewModel 
{ 
    public string Address { get; set; } 
    public DateTime DateCreated { get; set; } 
    public string FirstName { get; set; } 
    public int Id { get; set; } 
    public bool IsActive { get; set; } 
    public string LastName { get; set; } 
    public string UserName { get; set; } 
} 

控制器：

public ActionResult Edit(TaskControllerViewModel model) 

查看：

<script> 
$(function() { 

    var dataSource = new kendo.data.DataSource({   
     transport: { 
      read: { 
       url: "@Url.Action("GetAllUsers","Task")", 
       dataType: "json" 
      }, 
      update: { 
       url: "@Url.Action("Edit","Task")", 
       dataType: "json", 
       contentType: "application/json;charset=utf-8", 
       type:"POST" 
      }, 
      destroy: { 
       url: "@Url.Action("Delete","Task")", 
       dataType: "json", 
       contentType: "application/json;charset=utf-8", 
       type:"POST" 
      }, 
      parameterMap: function(data,type) 
      {      
       return kendo.stringify(data); 
      } 
     }, 
     schema: { 
      model: { 
        id: "Id", 
        fields: { 
         Id: { editable: false }, 
         UserName: { type: "string" }, 
         FirstName: { type: "string" }, 
         LastName: { type: "string" }, 
         Address: { type: "string" }, 
         IsActive: { type: "boolean" }, 
         DateCreated: { type: "date" } 
        } 
       } 
     }, 
     batch: true, 
     pageSize: 20,   
    }); 

    $("#allUsers").kendoGrid({ 
     dataSource:dataSource, 
     height: 550, 
     groupable: true, 
     sortable: true, 
     pageable: { 
      refresh: true, 
      pageSizes: true, 
      buttonCount: 5 
     }, 
     columns: [ 
     { field: "UserName",title: "User Name" }, 
     { field: "FirstName",title: "First Name" }, 
     { field: "LastName",title: "Last Name" }, 
     { field: "Address",title: "Address" }, 
     { field: "IsActive",title: "Active" }, 
     { field: "DateCreated",title: "Join Date",format: "{0:dd-MM-yyyy}" }, 
     { command: "edit" }, 
     { command: "destroy" } 
     ], 
     editable: { 
      mode: "inline", 
      update: true, 
      destroy: true, 
      confirmation: true 
     }, 
     edit: function (event) { 
      console.log("at edit event"); 

     }, 
     save: function(event) 
     { 
      console.log("at saveChanges event"); 
      dataSource.sync(); 
     } 

    }); 
}); 

Answer 1

解決了它。

啓用批量編輯意味着您的JSON對象將作爲數組傳遞給Controller。您必須將Controller Action中的參數更改爲List或任何可能的IEnumerable。

這裏是我的樣品，你只是通過每個項循環代碼：

控制器動作：

public JsonResult Edit(List<TaskControllerViewModel> model) 
    { 
     foreach(var item in model) 
     { 
      var userToEdit = users.GetUser(item.Id); 

      if(userToEdit != null) 
      { 
       userToEdit.Contact.FirstName = item.FirstName; 
       userToEdit.Contact.LastName = item.LastName; 
       userToEdit.Username = item.UserName; 
       userToEdit.Contact.Address = item.Address; 
       userToEdit.IsActive = item.IsActive; 
      } 
      unitOfWork.SaveChanges(); 
     } 

     return Json(model); 
    } 

視圖模型：

public class TaskControllerViewModel 
{ 
    public string Address { get; set; } 
    public DateTime DateCreated { get; set; } 
    public string FirstName { get; set; } 
    public int Id { get; set; } 
    public bool IsActive { get; set; } 
    public string LastName { get; set; } 
    public string UserName { get; set; } 
} 

查看：

<script> 
$(function() { 

    var dataSource = new kendo.data.DataSource({   
     transport: { 
      read: { 
       url: "@Url.Action("GetAllUsers","Task")", 
       dataType: "json" 
      }, 
      update: { 
       url: "@Url.Action("Edit","Task")", 
       dataType: "json", 
       contentType: "application/json;charset=utf-8", 
       type:"POST" 
      }, 
      destroy: { 
       url: "@Url.Action("Delete","Task")", 
       dataType: "json", 
       contentType: "application/json;charset=utf-8", 
       type:"POST" 
      }, 
      parameterMap: function(data,type) 
      {      
       return kendo.stringify(data.models);    
      } 
     }, 
     schema: { 
      model: { 
        id: "Id", 
        fields: { 
         Id: { editable: false }, 
         UserName: { type: "string" }, 
         FirstName: { type: "string" }, 
         LastName: { type: "string" }, 
         Address: { type: "string" }, 
         IsActive: { type: "boolean" }, 
         DateCreated: { type: "date" } 
        } 
       } 
     }, 
     batch: true, 
     pageSize: 20,   
    }); 

    $("#allUsers").kendoGrid({ 
     dataSource:dataSource, 
     height: 550, 
     groupable: true, 
     sortable: true, 
     navigatable: true, 
     pageable: { 
      refresh: true, 
      pageSizes: true, 
      buttonCount: 5 
     }, 
     columns: [ 
     { field: "UserName",title: "User Name" }, 
     { field: "FirstName",title: "First Name" }, 
     { field: "LastName",title: "Last Name" }, 
     { field: "Address",title: "Address" }, 
     { field: "IsActive",title: "Active" }, 
     { field: "DateCreated",title: "Join Date",format: "{0:dd-MM-yyyy}" }, 
     { command: "destroy" } 
     ], 
     toolbar: ["save","cancel"], 
     editable: { 
      mode: "incell", 
      update: true, 
      destroy: true, 
      confirmation:true 
     },   
     edit: function (event) { 
      console.log("at edit event"); 

     }, 
     save: function(event) 
     { 
      console.log("at saveChanges event"); 
     },   
    }); 
}); 

我希望這可以幫助未來的人。