Verwenden von ChartJs mit MVC 5 Razor

Question

Ich möchte helfen, ich versuche, die Daten meiner Abfrage in einem Diagramm anzeigen die ChartJs. Wie kann ich die Daten in JSON zurückgeben?

FaturamentoIvel.cs

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

namespace BiDAL.Entity.Graficos 
{ 
    public class FaturamentoIvel 
    { 
     public string Operacao { get; set; } 
     public string AnoMes { get; set; } 
     public float ValorNF { get; set; } 
     public bool TradeMarketing { get; set; } 
    } 
} 

FaturamentoIvelDAL.cs

using BiDAL.Entity.Graficos; 
using System; 
using System.Collections.Generic; 
using System.Data; 
using System.Data.SqlClient; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

namespace BiDAL.Persistence 
{ 
    public class FaturamentoIvelDAL : Conexao 
    { 
     public List<FaturamentoIvel> FindAllFaturamentoIvel() 
     { 
      try 
      { 
       OpenConnection(); 
       Cmd = new SqlCommand("SELECT Operacao, AnoMes, TradeMarketing, SUM(ValorNF) AS ValorTotal FROM dbo.FatoFaturamentoIVEL WHERE TradeMarketing = 0 GROUP BY Operacao, AnoMes, TradeMarketing ORDER BY SUM(ValorNF) DESC", Con); 

       Dr = Cmd.ExecuteReader(); 
       List<FaturamentoIvel> lista = new List<FaturamentoIvel>(); 

       while (Dr.Read()) 
       { 
        FaturamentoIvel ft = new FaturamentoIvel(); 
        ft.Operacao = Convert.ToString(Dr["Operacao"]); 
        ft.AnoMes = Convert.ToString(Dr["AnoMes"]); 
        ft.ValorNF = Convert.ToSingle(Dr["ValorNF"]); 

        lista.Add(ft); 
       } 
       return lista; 
      } 
      catch (Exception ex) 
      { 
       throw new Exception("Erro ao listar Faturamento: " + ex.Message); 
      } 
     } 


    } 
} 

Mein Controller-Admincontroller

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

namespace BiFrontEnd.Controllers 
{ 
    public class AdminController : Controller 
    { 
     // GET: Home 
     public ActionResult Home() 
     { 
      return View(); 
     } 


    } 
} 

Meine Ansicht

@{ 
    ViewBag.Title = "Home"; 
    Layout = "~/Views/Template/_Layout.cshtml"; 
} 

<label>Gráfico Mês Atual</label> 
<select id="ddlOperacao"> 
    <option>Venda</option> 
    <option>Troca</option> 
    <option>Bonificação</option> 
    <option>Outras</option> 
</select> 
<button id="btnGerarGraficoMesAtual">Exibir</button> 

Answer 1

Dies ist nur ein Beispiel, wie es funktionieren sollte. In Ihrem Controller machen Sie etwas ähnliches wie folgt.

public ActionResult Chart() 
{ 
    var Value1 = db.MYTABLE.Where(i => i.Value1); 
    var Value2 = db.MYTABLE.Where(i => i.Value2);   
    var dataForChart = new[] 
    { 
     new 
     { 
     label = "Your Label1", 
     value = Value1.Count() 
     }, 
     new 
     { 
     label = "Your Label2", 
     value = Value2.Count() 
     }     
    }; 

    var result = Json(dataForChart, JsonRequestBehavior.AllowGet); 
    return result; 

} 

Ihr JavaScript sollte wie folgt aussehen:

$.get("/ControllerName/Chart", function (response) {    
    //Construct your ChartJS here.   
}); 

Platz diese in Ihrer Ansicht zu nennen:

<canvas id="Chart" width="400" height="400"></canvas>