JsonResult Class in MVC Part .1

by

JsonResult is an ActionResult type in MVC. It helps to send the content in JavaScript Obect Notation (JSON) format.you will get an idea of the following things.

  1. About JsonResult and its properties
    • ContentEncoding
    • ContentType
    • Data
    • JsonRequestBehavior
    • MasJsonLength
    • RecursionLimit
  2. Sample project with various scenarios using JsonResult:
    • Send JSON content welcome note based on user type
    • Get the list of users in JSON Format
    • How to create JSON data at the client side and send it to the controller
    • How to handle a huge amount of JSON Data

 

JsonResult and its properties

The JSON format is an open standard format. The format of data looks very easy to understand and the data objects consist of attribute-value pairs.

ContentEncoding: It helps to indicate the content encoding type, the default encoding for JSON is UTF-8.

ContentType: It helps to indicate the content type. The default content type for JSON is application/json; charset=utf-8.

Note: ContentType and ContentEncoding are not necessary to mention when sending the data in JSON format as the HTTP headers are having a responsibility to tell the recipient what kind of content they're dealing with.

Data: This indicates what the content data is, that means what you will send in JSON format.

JsonRequestBehavior: This property has two options. Those are AllowGet and DenyGet. The default option is DenyGet. When you send data in JSON format, using Get Request, it's necessary to specify the property as AllowGet otherwise it shows the error as “The request would be blocked since the JSON data is considered as sensitive data information”.

MaxJsonLength: This helps to get or set the maximum JSON content length that you will send. The default value for this is 2097152 characters, that is equal to 4 MB of Unicode string data. You can even increase the size based if needed, for that you will get an idea later in this article.

RecursionLimit: Indicates the constraining number of object levels to process. The default value is 100. It means you can serialize the objects that are nested to a depth of 100 objects referencing each other. In a general scenario the default limit 100 is obviously sufficient when you deal with a JsonResult so there is no need to increase it even though you have the option to increase the limit if required.

 

 

Source:c-sharpcorner , MSDN

Google Charts with ASP.NET MVC5

by

 

Google Charts with ASP.NET MVC5

How to use Google Chart in your ASP.net MVC Project.

I will explain 2 ways .

1- return data with ViewBag .

2- Using JSON .

Code with ViewBag .

C# Code :

 public ActionResult GetChart()        {                       var result =// here Your Data From SQLServer As List                       var datachart = new object[result.Count ];                     int j = 0;            foreach(var i in result)            {                              datachart[j] = new object[] { i.CategoryName.ToString(), i.Frequence };                j++;            }            string datastr = JsonConvert.SerializeObject(datachart, Formatting.None);            ViewBag.dataj =new HtmlString(datastr);                                                          return View();        }

 

HTML Code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script>    var data1 = '@ViewBag.dataj';    var datass = JSON.parse(data1);   </script><script type="text/javascript">      // Load the Visualization API and the corechart package.      google.charts.load('current', {'packages':['corechart']});      // Set a callback to run when the Google Visualization API is loaded.      google.charts.setOnLoadCallback(drawChart);      // Callback that creates and populates a data table,      // instantiates the pie chart, passes in the data and      // draws it.      function drawChart() {          // Create the data table.        var data = new google.visualization.DataTable();        data.addColumn('string', 'CategoryName');        data.addColumn('number', 'Frequence');        data.addRows(datass);        // Set chart options        var options = {'title':'Categories',                       'width':400,                       'height':300};        // Instantiate and draw our chart, passing in some options.        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));        chart.draw(data, options);      }</script><div id="chart_div"></div>

 

 

Second one , With Ajax :

   [WebMethod]        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]        public  JsonResult GetChartData()        {            var result = //Your Data From SQL Server as List             var chartData = new object[result.Count + 1];            chartData[0] = new object[]{                    "CategoryName",                    "Frequence"                };            int j = 0;            foreach (var i in result)            {                j++;                chartData[j] = new object[] { i.CategoryName.ToString(), i.Frequence };            }            // return chartData;            return Json(chartData,JsonRequestBehavior.AllowGet);        }

HTML Code :

<script src="~/scripts/jquery-3.1.1.js"></script> <%-- Here We need to write some js code for load google chart with database data --%><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script>                var chartData; // globar variable for hold chart data              //  google.load("visualization", "1", { packages: ["corechart"] });                google.charts.load('current', { 'packages': ['corechart'] });                // Here We will fill chartData                $(document).ready(function () {                    $.ajax({                        url: "GetChartData",                        data: "",                        dataType: "json",                        type: "POST",                        contentType: "application/json; chartset=utf-8",                        success: function (data) {                                                       chartData = data;                        },                        error: function () {                            alert("Error loading data! Please try again.");                        }                    }).done(function () {                        // after complete loading data                        google.setOnLoadCallback(drawChart);                        drawChart();                    });                });                    function drawChart() {                    var data = google.visualization.arrayToDataTable(chartData);                    var options = {                        title: "Categories",                        pointSize: 5                    };                    var pieChart = new google.visualization.Bar(document.getElementById('chart_div'));                    pieChart.draw(data, options);                }</script><div id="chart_div" style="width:500px;height:400px">    <%-- Here Chart Will Load --%></div>

 

 

You can find more in my Youtube Channal .

https://youtu.be/F-iD2ADMG-k

 

code:

https://github.com/Alaeddinalhamoud/GoogleChart-MVC