Question

I’m tryping to use JSON to update records in a database without a postback and I’m having trouble implementing it. This is my first time doing this so I would appreciate being pointed in the right direction.

(Explanation, irrelevant to my question: I am displaying a list of items that are sortable using a jquery plugin. The text of the items can be edited too. When people click submit I want their records to be updated. Functionality will be very similar to this.).

This javascript function creates an array of the objects. I just don’t know what to do with them afterwards. It is called by the button’s onClick event.

 function SaveLinks() {
     var list = document.getElementById('sortable1');
     var links = [];

     for (var i = 0; i < list.childNodes.length; i++) {
         var link = {};
         link.id = list.childNodes[i].childNodes[0].innerText;
         link.title = list.childNodes[i].childNodes[1].innerText;
         link.description = list.childNodes[i].childNodes[2].innerText;
         link.url = list.childNodes[i].childNodes[3].innerText;

         links.push(link);
     }

     //This is where I don't know what to do with my array.         
 }

I am trying to get this to call an update method that will persist the information to the database. Here is my codebehind function that will be called from the javascript.

    public void SaveList(object o )
    {
        //cast and process, I assume
    }

Any help is appreciated!

Answer 1

I have recently done this. I’m using MVC though it shouldn’t be too different.

It’s not vital but I find it helpful to create the contracts in JS on the client side and in C# on the server side so you can be sure of your interface.

Here’s a bit of sample Javascript (with the jQuery library):

var item = new Item();
item.id = 1;
item.name = 2;
$.post("Item/Save", $.toJSON(item), function(data, testStatus) {
  /*User can be notified that the item was saved successfully*/
  window.location.reload();
}, "text");

In the above case I am expecting text back from the server but this can be XML, HTML or more JSON.

The server code is something like this:

public ActionResult Save()
{
    string json = Request.Form[0];

    var serializer = new DataContractJsonSerializer(typeof(JsonItem));
    var memoryStream = new MemoryStream(Encoding.Unicode.GetBytes(json));
    JsonItem item = (JsonItem)serializer.ReadObject(memoryStream);
    memoryStream.Close();

    SaveItem(item);

    return Content("success");
}

Hope this makes sense.