Tuesday, November 10, 2015

ASP.Net MVC draw chart.js with jQuery Ajax call

Following is a Ajax call example:
//Read
var GetDataList = function (date, callback) {
    $.ajax({
        type: 'GET',
        url: '/Test/GetMyDataList',
        dataType: 'html',
        data: {
            date: date
        },
        success: function (data) {
            if (callback) callback(data);
        }
     });
 };
The above example passed data as parameter which contains date, and once the call is success, another callback function will be used to process the returned data.
//Save
var UpdateDatalist = function (model, callback, callback2) {
    $.ajax({
        type: 'POST',
        url: '/Test/UpdateDatalist',
        dataType: 'json',
        processData : false,
        data: JSON.stringify(model),
        cache: false,
        success: function (data) {
            if (data.ReturnedModel) callback2(data);
            if (isError(data)) return;
            if (callback) callback(data);
        }
    });
};
The above example send a JavaScript object as a JSON string to the server with an AJAX request, you need to convert the JavaScript object to a JSON string and send the string as raw data.

HTTP requests can be send as either, GET, POST, PUT, DELETE or HEAD requests.

Note here it's better to use List<Class> over Dictionary<Key, String> because List can be converted directly into JSON while you need to write customized code to convert Dictionary to JSON data.

Source:
http://forums.asp.net/t/2000850.aspx?json+data+to+a+chart+via+a+JsonResult+Action+in+MVC
https://gist.github.com/dancameron/18ad7e46399406259323
http://stackoverflow.com/questions/19894952/draw-a-chart-js-with-ajax-data-and-responsive-a-few-problems-and-questions
http://tutorials.jenkov.com/jquery/ajax.html#receiving-json

No comments:

Post a Comment