Kendo UI JSON Ergebnis zu ASP.NET MVC5 Aktion als Parameter

Question

Ich benutze Kendo UI Javascript - kendoGrid - (nicht die ASP.NET MVC) und ASP.NET MVC dahinter.

Ich habe eine Frage:

Wo führe ich die Synchronisierungsmethode von der Datenquelle in Kendo wenn

autoSync = false und Batch = true.

Der Parameter in der Action-Methode erkennt das JSON-Objekt, wenn autoSync = true ist. Nicht, wenn es auf false gesetzt ist.

Ich habe versucht, es auf das Ereignis speichern in kendoGrid aufrufen, aber das hat nichts getan. Vielen Dank im Voraus für die Hilfe :)

Hier ist, was ich getan habe:

Ansichtsmodell:

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; } 
} 

Controller:

public ActionResult Edit(TaskControllerViewModel model) 

Ausblick:

<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

Gelöst es.

Wenn Sie die Batch-Bearbeitung aktivieren, werden Ihre JSON-Objekte als Array an den Controller übergeben. Sie müssen den Parameter in Ihrer Controller-Aktion in eine Liste oder irgendetwas IEnumerable vielleicht ändern. Hier

ist der Code für meine Probe, die Sie gerade Schleife durch jedes Element:

Controller Aktion:

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); 
    } 

Ansichtsmodell:

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; } 
} 

Ausblick:

<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"); 
     },   
    }); 
}); 

Ich hoffe, dass dies jemand in der Zukunft helfen kann.