Kendo UI 远程数据源修改

Question

我有一个 Kendo 数据源，它从远程服务器 (Json) 获取数据，并将数据绑定到客户端的 kendo 模板。

在客户端，现在我只显示数据。但是，我也想 add/remove 数据源中的数据。如何将修改后的数据源发送回服务器并将其存储在那里？

这是我正在尝试做的一个很好的例子。虽然此示例从局部变量读取数据，但请告诉我：

用户在客户端修改后，如何将dataSource存储在服务器端？

例如，add 方法只是在客户端更新数据源。但是，我想将它发送到服务器并以某种方式存储在那里。因此，如果其他人在另一个客户端中打开相同的网页，he/she 也可以看到更改。

$("#add").click(function(e){
     e.preventDefault();

     var $todo = $("input[name='description']");

     currentId += 1;
     dataSource.add({
     id: currentId,
     done: false,
     description: $todo.val()
     });

     $todo.val("");
     $todo.focus();
});

我在服务器端使用 C# .Net MVC。

Answer 1

据我了解，您问的是如何根据客户端的更改来更改服务器？如果是这样，您可以做三件事：

捕获您修改（添加、删除、更新）的数据，
序列化为JSON,
发送到控制器的动作。

下面是如何从数据源读取数据的简单示例：

 var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
  ] 
});

dataSource.fetch(function(){
    // reading data from dataSource
    var raw = dataSource.data();
    // entire dataSource
    alert("This is entire dataSource: " + JSON.stringify(raw)); 
    // this is what will be removed
    alert("This is removed: " + JSON.stringify(raw[0]));    
    dataSource.remove(raw[0]);          
    // this is what is rest
    alert("This is rest: " + JSON.stringify(raw));
});

将这些数据分配给某个对象后，您可以使用以下方法序列化为 JSON：JSON.stringify(data) 方法。

你可以post将这些数据用于控制器的操作并做一些工作。如何postJSON到MVC控制器是常见问题，请阅读here。

删除和更新类似。基本上你必须捕获你想要的数据，序列化并 post 采取行动。

Answer 2

您可以在数据源上使用 add 方法并指定 post 新数据的位置。 KendoUI 文档中有一个example。从那里您还可以配置 edit/remove 方法。

Answer 3

要从数据源对象获取 JSON 数组，请使用 toJSON 方法

dataSource.data().toJSON()

然后你可以post它返回到服务器

Demo

Kendo UI 远程数据源修改

Kendo UI Remote DataSource Modification

c#

asp.net

asp.net-mvc-4

kendo-ui

kendo-datasource