C# Online Compiler | .NET Fiddle

<no name> by Anonymous

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class MyModel
	{
		public string First_Name { get; set; }

		public string Salary { get; set; }
		
		public bool Full_Time_Employee { get; set; }
	}
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class MyModel
    {
        public string First_Name { get; set; }
​
        public string Salary { get; set; }
        
        public bool Full_Time_Employee { get; set; }
    }
}

@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap 101 Template</title>

		<!-- CSS Includes -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		
		<style type="text/css">

			.field-validation-error {
				color: #ff0000;
			}

		</style>
	</head>
	
	<body>
		<div class="container">
			<div class="col-md-6 col-md-offset-3">
				<div id="Chart01Div"></div>
			</div>
		</div>

		<!-- JS includes -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	
		<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
		<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		<script type="text/javascript">
		
			function drawChart01() {
				//alert('testing1');
				var googleApiClass = {
					'headerRow': 'header-style',
					'tableCell': 'table-rows'
				};
				var options = {
					title: 'Total',
					'is3D': true,
					'width': '100%',
					'height': '100%',
					cssClassNames: googleApiClass
				};
			
				$.ajax({
					type: "POST",
					//url: "/Home/GetData",
					url: '@Url.RouteUrl(new { action="GetData", controller="Home" })',
					data: '{}',
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function (r) {
						//alert("sucess" + r);
						var data = new google.visualization.DataTable();
						data.addColumn('string', 'First_name');
						data.addColumn('string', 'Salary');
						data.addColumn('boolean', 'Full_Time_Employee');
			
						var rows = [];
						$.each(r, function (i, obj) {
							rows.push([obj.First_Name, obj.Salary, obj.Full_Time_Employee]);
						});
						data.addRows(rows);
						
						var chart = new google.visualization.Table($("#Chart01Div")[0]);
						chart.draw(data, options);
					},
					failure: function (r) {
						console.log(r);
						alert("Failure: " + r);
					},
					error: function (r) {
						console.log(r);
						alert("Error: " + r);
					}
				});
			/*
						var chart = new google.visualization.Table($("#Chart01Div")[0]);
						var data = new google.visualization.DataTable();
						data.addColumn('string', 'First_name');
						data.addColumn('string', 'Salary');
						data.addColumn('boolean', 'Full_Time_Employee');
						data.addRows([
							['Mike', '$10,000', true],
							['Jim', '$8,000', false],
							['Alice', '$12,500', true],
							['Bob', '$7,000', true]
						]);
			 
						chart.draw(data, options);
			*/
			}
		
			$(function(){
				google.load("visualization", "1", { packages: ["table"] });
    			google.setOnLoadCallback(drawChart01);
			
			});

		</script>
	</body>
</html>

View

 
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
​
        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        
        <style type="text/css">
​
            .field-validation-error {
                color: #ff0000;
            }
​
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <div id="Chart01Div"></div>
            </div>
        </div>
​
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
        
            function drawChart01() {
                //alert('testing1');
                var googleApiClass = {
                    'headerRow': 'header-style',
                    'tableCell': 'table-rows'
                };
                var options = {
                    title: 'Total',
                    'is3D': true,
                    'width': '100%',
                    'height': '100%',
                    cssClassNames: googleApiClass
                };
            
                $.ajax({
                    type: "POST",
                    //url: "/Home/GetData",
                    url: '@Url.RouteUrl(new { action="GetData", controller="Home" })',
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        //alert("sucess" + r);
                        var data = new google.visualization.DataTable();
                        data.addColumn('string', 'First_name');
                        data.addColumn('string', 'Salary');
                        data.addColumn('boolean', 'Full_Time_Employee');
            
                        var rows = [];
                        $.each(r, function (i, obj) {
                            rows.push([obj.First_Name, obj.Salary, obj.Full_Time_Employee]);
                        });
                        data.addRows(rows);
                        
                        var chart = new google.visualization.Table($("#Chart01Div")[0]);
                        chart.draw(data, options);
                    },
                    failure: function (r) {
                        console.log(r);
                        alert("Failure: " + r);
                    },
                    error: function (r) {
                        console.log(r);
                        alert("Error: " + r);
                    }
                });
            /*
                        var chart = new google.visualization.Table($("#Chart01Div")[0]);
                        var data = new google.visualization.DataTable();
                        data.addColumn('string', 'First_name');
                        data.addColumn('string', 'Salary');
                        data.addColumn('boolean', 'Full_Time_Employee');
                        data.addRows([
                            ['Mike', '$10,000', true],
                            ['Jim', '$8,000', false],
                            ['Alice', '$12,500', true],
                            ['Bob', '$7,000', true]
                        ]);
             
                        chart.draw(data, options);
            */
            }
        
            $(function(){
                google.load("visualization", "1", { packages: ["table"] });
                google.setOnLoadCallback(drawChart01);
            
            });
​
        </script>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View();
		}
		
		[HttpPost]
		//[Route("Home/GetData")]
		public JsonResult GetData()
		{
			return Json(new List<MyModel>
			{
				new MyModel { First_Name = "Mike", Salary= "10000",  Full_Time_Employee = true }
			});
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
        
        [HttpPost]
        //[Route("Home/GetData")]
        public JsonResult GetData()
        {
            return Json(new List<MyModel>
            {
                new MyModel { First_Name = "Mike", Salary= "10000",  Full_Time_Employee = true }
            });
        }
    }
}

View in Full Screen

View IL Code