Kendo UI Remote DataSource Modification

问题

I have a Kendo DataSource that takes its data from a remote server (Json) and it bind the data to a kendo template in the client-side.

On the client, right now I just display the Data. However, I want to add/remove data in the dataSource as well. How can I send the dataSource after modification back to server and store it in there ?

Here is a good example of what I am trying to do. While this example reads its data from a local variable, would you please let me know:

How can I store the dataSource on the server-side after user make modification on the client ?

http://jsfiddle.net/derickbailey/D4g8S/

For example the add method just update the datasource on the client side. However, I want to send it to the Server and store it some how there. As a results, if someone else open the same web page in another client, he/she can see the changes as well.

$("#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();
});

I am using C# .Net MVC on the server side.

回答1:

As I understand you are asking how you can made server changes based on changes on client side? If is that true you can do three things:

catch data which you modify (added, deleted, updated),
Serialize to JSON,
send to the controller's action.

Here is simple example how you can read data from your datasource:

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

After you assign these data to some object you can serialize into JSON with: JSON.stringify(data) method.

Than you can post these data to controller's action and do some work. How to post JSON to MVC controller is common question, please read here.

For deleting and updating is similar. Basically you have to catch data which you want, serialize and post to action.

回答2:

You can use the add method on the data source and specify there where to post the new data. There is an example in the KendoUI documentation. From there you can also configure the edit/remove methods.