Persist data using JSON

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

You don't use CodeBehind for this, you use a new action.

Your action will take an argument which can be materialized from your posted data (which, in your case, is a JavaScript object, not JSON). So you'll need a type like:

public class Link
{
    public int? Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public string Url { get; set; }
}

Note the nullable int. If you have non-nullable types in your edit models, binding will fail if the user does not submit a value for that property. Using nullable types allows you to detect the null in your controller and give the user an informative message instead of just returning null for the whole model.

Now you add an action:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DoStuff(IEnumerable<Link> saveList)
{
    Repository.SaveLinks(saveList);
    return Json(true);
}

Change your JS object to a form that MVC's DefaultModelBinder will understand:

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

Finally, call the action in your JS:

//This is where I don't know what to do with my array.  Now you do!
// presumes jQuery -- this is much easier with jQuery
$.post("/path/to/DoStuff", links, function() { 
    // success!
    },
    'json');

Answer 2

Unfortunately, JavaScript does not have a built-in function for serializing a structure to JSON. So if you want to POST some JSON in an Ajax query, you'll either have to munge the string yourself or use a third-party serializer. (jQuery has a a plugin or two that does it, for example.)

That said, you usually don't need to send JSON to the HTTP server to process it. You can simply use an Ajax POST request and encode the form the usual way (application/x-www-form-urlencoded).

You can't send structured data like nested arrays this way, but you might be able to get away with naming the fields in your links structure with a counter. (links.id_1, links.id_2, etc.)

If you do that, then with something like jQuery it's as simple as

jQuery.post( '/foo/yourapp', links, function() { alert 'posted stuff' } );

Then you would have to restructure the data on the server side.

Answer 3

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.