在Asp.net MVC中的图表中显示本地JSON文件数据

时间:2017-10-31 16:56:14

标签: c# asp.net json asp.net-mvc bar-chart

我第一次在ASP.NET MVC中使用JSON操作,因此面临的问题很少。我想做的是:

1)使用C#MVC读取本地JSON文件中的所有数据 2)然后使用任何图表/图表显示所需的提取数据。

控制器代码:

    public class MoviesController : Controller
        {
   public ActionResult Index()
        {
            using (StreamReader sr = new StreamReader(Server.MapPath("~/App_Data/Genres.json")))
            {
                var jsonResult = JsonConvert.DeserializeObject<List<Genres>>(sr.ReadToEnd());

            return View(jsonResult);

        }
    }

    public ActionResult Movies()
    {
        using (StreamReader sr = new StreamReader(Server.MapPath("~/App_Data/Movies.json")))
        {
            var json = JsonConvert.DeserializeObject<List<Movies>>(sr.ReadToEnd());
            return View(json);
        }
    }

Genres.cs:

public class Genres
    {
        public int id { get; set; }
        public string name { get; set; }
    }

Movies.cs:

public class Movies
    {
        public string Overview { get; set; }
        public DateTime ReleaseDate { get; set; }
        public Array GenreIDs { get; set; }
        public int MovieID { get; set; }
        public string OriginalTitle { get; set; }
        public string OriginalLanguage { get; set; }
        public string Title { get; set; }
        .
        .
        .
    }

Genres.json:

[{
                "id": 28,
                "name": "Action"
            }, {
                "id": 12,
                "name": "Adventure"
            }, {
                "id": 16,
                "name": "Animation"
            }, {
                "id": 35,
                "name": "Comedy"
            }, {
                "id": 27,
                "name": "Horror"
            }, {
                "id": 10402,
                "name": "Music"
            }, {
                "id": 9648,
                "name": "Mystery"
            }, {
                "id": 10749,
                "name": "Romance"
            }
        ]

Movies.json: [{

            "overview": "Raj is a rich, carefree, happy-go-lucky second generation NRI. Simran is the daughter of Chaudhary Baldev Singh, who in spite of being an NRI is very strict about adherence to Indian values. Simran has left for India to be married to her childhood fiancé. Raj leaves for India with a mission at his hands, to claim his lady love under the noses of her whole family. Thus begins a saga.",
            "release_date": "1995-10-20",
            "genre_ids": [35, 18, 10749],
            "id": 19404,
            "original_title": "Dilwale Dulhania Le Jayenge",
            "original_language": "hi",
            "title": "Dilwale Dulhania Le Jayenge",
        }, {
            "overview": "Framed in the 1940s for the double murder of his wife and her lover, upstanding banker Andy Dufresne begins a new life at the Shawshank prison, where he puts his accounting skills to work for an amoral warden. During his long stretch in prison, Dufresne comes to be admired by the other inmates -- including an older prisoner named Red -- for his integrity and unquenchable sense of hope.",
            "release_date": "1994-09-23",
            "genre_ids": [18, 80],
            "id": 278,
            "original_title": "The Shawshank Redemption",
            "original_language": "en",
            "title": "The Shawshank Redemption",
        }, {
            "overview": "The true story of how businessman Oskar Schindler saved over a thousand Jewish lives from the Nazis while they worked as slaves in his factory during World War II.",
            "release_date": "1993-11-29",
            "genre_ids": [18, 36, 10752],
            "id": 424,
            "original_title": "Schindler's List",
            "original_language": "en",
            "title": "Schindler's List",
        }
]

这是我已成功阅读流派和电影的JSON文件的更新代码。现在我想做的是以图表的形式显示这些JSON文件的数据(饼图,条形图等),然后也应用一些过滤器。我怎样才能做到这一点?提前谢谢。

2 个答案:

答案 0 :(得分:0)

我已经创建了一个关于如何在asp.net mvc中使用Highcharts的视频。你可以在https://www.youtube.com/watch?v=aRwID9v5iKA&t=1s

找到它

更新的答案:

 public ActionResult YourActionName()
    {
        //I dont know whether you load data from database or other resource 
        //But lets see your data as form of two lists
        var movies=new List<Movie>()
        {
            new Movie() { Overview="Raj is a rich,....." // other properties }
            //other movies here
        };

        var genres = new List<Genre>()
        {
            new Genre() { Name="Action"// other properties } }
            //other movies here
        };


        return Json(new {Movies= movies, Genres= genres });
    }

样品:

请查看this sample

答案 1 :(得分:0)

您可以使用第三方图表,例如AMCharts https://www.amcharts.com/demos/exporting-chart-to-image/或Google Charts