如何在MVC Razor中使用SQL Server数据库填充Google图表 [英] How to populate google charts using SQL Server Database in MVC Razor

问题描述

我希望用SQL Server数据库替换硬编码的数据. 但是，我对此还很陌生.我刚刚尝试了Google图表及其使用硬编码值的方法，请逐步指导我将值更改为数据库中的数据.

如果您需要任何信息，请告诉我.我会尽力提供.谢谢大家的帮助！ ):

我的模型的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ChartInMvcApplication.Models
{
    public class ProductModel
    {
        public string YearTitle { get; set; }
        public string SaleTitle { get; set; }
        public string PurchaseTitle { get; set; }
        public Product ProductData { get; set; }
    }
    public class Product
    {
        public string Year { get; set; }
        public string Purchase { get; set; }
        public string Sale { get; set; }
    }
}

我的控制器代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ChartInMvcApplication.Models;

namespace ChartInMvcApplication.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            ProductModel objProductModel = new ProductModel();
            objProductModel.ProductData = new Product();
            objProductModel.ProductData = GetChartData();
            objProductModel.YearTitle = "Year";
            objProductModel.SaleTitle = "Sale";
            objProductModel.PurchaseTitle = "Purchase";
            return View(objProductModel);

        }
        /// <summary>
        /// Code to get the data which we will pass to chart
        /// </summary>
        /// <returns></returns>
        public Product GetChartData()
        {
            Product objproduct = new Product();
            /*Get the data from databse and prepare the chart record data in string form.*/
            objproduct.Year = "2009,2010,2011,2012,2013,2014";
            objproduct.Sale = "2000,1000,3000,1500,2300,500";
            objproduct.Purchase = "2100,1400,2900,2400,2300,1500";
            return objproduct;
        }
    }
}

我的视图的代码:

 @model ChartInMvcApplication.Models.ProductModel
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        // Create and populate the data table.
        var years = [@Model.ProductData.Year];
        var sales = [@Model.ProductData.Sale];
        var Purchase = [@Model.ProductData.Purchase];

        var data = new google.visualization.DataTable();
        data.addColumn('string', '@Model.YearTitle');
        data.addColumn('number', '@Model.SaleTitle');
        data.addColumn('number', '@Model.PurchaseTitle');
        for (i = 0; i < years.length; i++) {
            data.addRow([years[i].toString(), sales[i], Purchase[i]]);
        }
        var options = {
            title: 'Sale and Purchase Compare',
            hAxis: { title: '@Model.YearTitle', titleTextStyle: { color: 'red'} }
        };

        var chart = newgoogle.visualization.ColumnChart(document.getElementById('chartdiv'));
        chart.draw(data, options);
    }
</script>
<div id="chartdiv" style="width: 500px; height: 300px;">
</div>

解决方案

您必须向每个产品对象添加数据.

public Product GetChartData()
        {
            Product objproduct = new Product();
            //Get Data for years as a string list.
            List<string> years = Database.GetYears();
            foreach(var year in years) 
              GetChartDataForYear(year, ref objproduct);
            return objproduct; 
        }


        public void GetChartDataForYear(string year, Product objproduct out)
        {  
            if(!string.IsNullorEmpty(objproduct.Year))      
            objproduct.Year += (",");      


            if(!string.IsNullorEmpty(objproduct.Sale))      
            objproduct.Sale += (",");    

            if(!string.IsNullorEmpty(objproduct.Purchase ))      
            objproduct.Purchase += (",");      

            objproduct.Year += year.ToString();
            objproduct.Sale += GetSale(int year);
            objproduct.Purchase += GetPurchase(int year);

        }





public string GetSale(string year)
        {
            // To get from DB.
             return "";
        }




 public string GetPurchase(string year)
    {
       // To get from DB.
       return "";
    }

I wish to replace the hard coded data with SQL Server Database. However, I'm stucked as I am still new to this.. I just tried the Google Chart and its working with hard-coded values, please guide me step-by-step to change the values to data from my database.

If theres any informations you need, please let me know. I'll try to provide them. Thanks for the help in advance guys! ):

Code for my Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ChartInMvcApplication.Models
{
    public class ProductModel
    {
        public string YearTitle { get; set; }
        public string SaleTitle { get; set; }
        public string PurchaseTitle { get; set; }
        public Product ProductData { get; set; }
    }
    public class Product
    {
        public string Year { get; set; }
        public string Purchase { get; set; }
        public string Sale { get; set; }
    }
}

Code for my Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ChartInMvcApplication.Models;

namespace ChartInMvcApplication.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            ProductModel objProductModel = new ProductModel();
            objProductModel.ProductData = new Product();
            objProductModel.ProductData = GetChartData();
            objProductModel.YearTitle = "Year";
            objProductModel.SaleTitle = "Sale";
            objProductModel.PurchaseTitle = "Purchase";
            return View(objProductModel);

        }
        /// <summary>
        /// Code to get the data which we will pass to chart
        /// </summary>
        /// <returns></returns>
        public Product GetChartData()
        {
            Product objproduct = new Product();
            /*Get the data from databse and prepare the chart record data in string form.*/
            objproduct.Year = "2009,2010,2011,2012,2013,2014";
            objproduct.Sale = "2000,1000,3000,1500,2300,500";
            objproduct.Purchase = "2100,1400,2900,2400,2300,1500";
            return objproduct;
        }
    }
}

Code for my View:

 @model ChartInMvcApplication.Models.ProductModel
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        // Create and populate the data table.
        var years = [@Model.ProductData.Year];
        var sales = [@Model.ProductData.Sale];
        var Purchase = [@Model.ProductData.Purchase];

        var data = new google.visualization.DataTable();
        data.addColumn('string', '@Model.YearTitle');
        data.addColumn('number', '@Model.SaleTitle');
        data.addColumn('number', '@Model.PurchaseTitle');
        for (i = 0; i < years.length; i++) {
            data.addRow([years[i].toString(), sales[i], Purchase[i]]);
        }
        var options = {
            title: 'Sale and Purchase Compare',
            hAxis: { title: '@Model.YearTitle', titleTextStyle: { color: 'red'} }
        };

        var chart = newgoogle.visualization.ColumnChart(document.getElementById('chartdiv'));
        chart.draw(data, options);
    }
</script>
<div id="chartdiv" style="width: 500px; height: 300px;">
</div>

解决方案

You have to add data to each product object.

public Product GetChartData()
        {
            Product objproduct = new Product();
            //Get Data for years as a string list.
            List<string> years = Database.GetYears();
            foreach(var year in years) 
              GetChartDataForYear(year, ref objproduct);
            return objproduct; 
        }


        public void GetChartDataForYear(string year, Product objproduct out)
        {  
            if(!string.IsNullorEmpty(objproduct.Year))      
            objproduct.Year += (",");      


            if(!string.IsNullorEmpty(objproduct.Sale))      
            objproduct.Sale += (",");    

            if(!string.IsNullorEmpty(objproduct.Purchase ))      
            objproduct.Purchase += (",");      

            objproduct.Year += year.ToString();
            objproduct.Sale += GetSale(int year);
            objproduct.Purchase += GetPurchase(int year);

        }





public string GetSale(string year)
        {
            // To get from DB.
             return "";
        }




 public string GetPurchase(string year)
    {
       // To get from DB.
       return "";
    }

这篇关于如何在MVC Razor中使用SQL Server数据库填充Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！