Graficar Datos en el Servidor en ASP.NET MVC con llamada asíncrona usando Ajax Form y Vista Parcial
Requerimiento
Se desea crear una aplicación web que permita consultar los productos por categoría y mostrar los datos mas gráficos de diferentes tipos: Barras, Columnas, Lineas y Pie, pero el requisito es que sea conectado o en línea, es decir, el filtro por categoría debe hacerse directo de la base de datos y el gráfico debe crearse dinámicamente en el servidor web.
Solución
- Crear una aplicación en ASP.NET MVC con un método de acción que se conecte a la BD para traer la lista de categorías mas los tipos de gráficos.
- Crear un formulario MVC Ajax que realice una llamada asíncrona cada vez que se selecciona una categoría que llama a una acción que haga la consulta en base de datos y que cree el gráfico dinámicamente devolviendo una vista parcial.
- Para crear los diferentes tipos de gráficos usaremos la librería System.Drawing y el gráfico lo almacenaremos en un MemoryStream, a partir del cual obtendremos su array de bytes y lo almacenaremos en un ViewBag llamado Imagen con el contenido de la imagen en formato base64.
Crear los Procedimientos Almacenados en la Base de Datos Northwind de SQL Server
Para el ejemplo usaremos la Base de Datos Northwind de SQL Server, en la cual crearemos los siguientes Procedimiento almacenado:
Create Procedure [dbo].[uspCategoriesListar]
As
Select CategoryID,CategoryName From Categories
Go
Create Procedure [dbo].[uspProductsListarPorCategoria]
@CategoryId int
As
Select ProductID,ProductName,SupplierID,
CategoryID,UnitPrice,UnitsInStock
From Products
Where CategoryId=@CategoryId
Crear la Librería de Clases de Entidades del Negocio
Crear la librería de clases llamada: "Northwind.Librerias.EntidadesNegocio" y agregar la clase "beCategoria.cs":
namespace Northwind.Librerias.EntidadesNegocio
{
public class beCategoria
{
public int IdCategoria { get; set; }
public string Nombre { get; set; }
}
}
Agregar otra clase a la librería llamada "beProducto.cs":
namespace Northwind.Librerias.EntidadesNegocio
{
public class beProducto
{
public int IdProducto { get; set; }
public string Nombre { get; set; }
public int IdProveedor { get; set; }
public int IdCategoria { get; set; }
public decimal PrecioUnitario { get; set; }
public short Stock { get; set; }
}
}
Grabar y compilar la Librería de Entidades del Negocio.
Crear la Librería de Acceso a Datos
Crear la librería de clases llamada: "Northwind.Librerias.AccesoDatos", referenciar a la librería de clases de entidades creada anteriormente y agregar la clase "daCategoria.cs" y escribir el siguiente código:
using System;
using System.Collections.Generic; //List
using System.Data; //CommandType, CommandBehavior
using System.Data.SqlClient; //SqlConnection, SqlCommand, SqlDataReader
using Northwind.Librerias.EntidadesNegocio; //beCategoria
namespace Northwind.Librerias.AccesoDatos
{
public class daCategoria
{
public List<beCategoria> listar(SqlConnection con)
{
List<beCategoria> lbeCategoria = null;
SqlCommand cmd = new SqlCommand("uspCategoriesListar", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlDataReader drd = cmd.ExecuteReader();
if (drd != null)
{
lbeCategoria = new List<beCategoria>();
beCategoria obeCategoria;
int posIdCat = drd.GetOrdinal("CategoryID");
int posNomCat = drd.GetOrdinal("CategoryName");
while (drd.Read())
{
obeCategoria = new beCategoria();
obeCategoria.IdCategoria = drd.GetInt32(posIdCat);
obeCategoria.Nombre = drd.GetString(posNomCat);
lbeCategoria.Add(obeCategoria);
}
drd.Close();
}
return (lbeCategoria);
}
}
}
Agregar una nueva clase a la librería llamada "daProducto.cs" y escribir el siguiente código:
using System;
using System.Collections.Generic; //List
using System.Data; //CommandType, CommandBehavior
using System.Data.SqlClient; //SqlConnection, SqlCommand, SqlDataReader
using Northwind.Librerias.EntidadesNegocio; //beProducto
namespace Northwind.Librerias.AccesoDatos
{
public class daProducto
{
public List<beProducto> listarPorCategoria(SqlConnection con,int idCategoria)
{
List<beProducto> lbeProducto = null;
SqlCommand cmd = new SqlCommand("uspProductsListarPorCategoria", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter par = cmd.Parameters.Add("@CategoryId", SqlDbType.Int);
par.Direction = ParameterDirection.Input;
par.Value = idCategoria;
SqlDataReader drd = cmd.ExecuteReader(CommandBehavior.SingleResult);
if (drd != null)
{
lbeProducto = new List<beProducto>();
int posIdProducto = drd.GetOrdinal("ProductID");
int posNombre = drd.GetOrdinal("ProductName");
int posIdProveedor = drd.GetOrdinal("SupplierID");
int posIdCategoria = drd.GetOrdinal("CategoryID");
int posPrecioUnitario = drd.GetOrdinal("UnitPrice");
int posStock = drd.GetOrdinal("UnitsInStock");
beProducto obeProducto;
while (drd.Read())
{
obeProducto = new beProducto();
obeProducto.IdProducto = drd.GetInt32(posIdProducto);
obeProducto.Nombre = drd.GetString(posNombre);
obeProducto.IdProveedor = drd.GetInt32(posIdProveedor);
obeProducto.IdCategoria = drd.GetInt32(posIdCategoria);
obeProducto.PrecioUnitario = drd.GetDecimal(posPrecioUnitario);
obeProducto.Stock = drd.GetInt16(posStock);
lbeProducto.Add(obeProducto);
}
drd.Close();
}
return (lbeProducto);
}
}
}
Grabar y compilar la librería de acceso a datos creada.
Crear la Librería de Reglas del Negocio
Crear la librería de clases llamada: "Northwind.Librerias.ReglasNegocio", referenciar a la librería de clases de entidades y también a la de acceso a datos, luego agregar la clase "brCategoria.cs" y escribir el siguiente código:
using System;
using System.Data.SqlClient; //SqlConnection
using System.Collections.Generic; //List
using Northwind.Librerias.EntidadesNegocio; //beCategoria
using Northwind.Librerias.AccesoDatos; //daCategoria
namespace Northwind.Librerias.ReglasNegocio
{
public class brCategoria
{
public List<beCategoria> listar()
{
List<beCategoria> lbeCategoria = null;
string CadenaConexion = ConfigurationManager.ConnectionStrings["conNW"]
.ConnectionString;
using (SqlConnection con = new SqlConnection(CadenaConexion))
{
try
{
con.Open();
daCategoria odaCategoria = new daCategoria();
lbeCategoria = odaCategoria.listar(con);
}
catch (SqlException ex)
{
//grabarLog(ex);
}
catch (Exception ex)
{
//grabarLog(ex);
}
} //con.Close(); con.Dispose();
return (lbeCategoria);
}
}
}
Agregar una nueva clase a la librería llamada "brProducto.cs" y escribir el siguiente código:
using System;
using System.Data.SqlClient; //SqlConnection
using System.Collections.Generic; //List
using Northwind.Librerias.EntidadesNegocio; //beProducto
using Northwind.Librerias.AccesoDatos; //daProducto
namespace Northwind.Librerias.ReglasNegocio
{
public class brProducto
{
public List<beProducto> listarPorCategoria(int idCategoria)
{
List<beProducto> lbeProducto = null;
string CadenaConexion = ConfigurationManager.ConnectionStrings["conNW"]
.ConnectionString;
using (SqlConnection con = new SqlConnection(CadenaConexion))
{
try
{
con.Open();
daProducto odaProducto = new daProducto();
lbeProducto = odaProducto.listarPorCategoria(con,idCategoria);
}
catch (SqlException ex)
{
//grabarLog(ex);
}
catch (Exception ex)
{
//grabarLog(ex);
}
} //con.Close(); con.Dispose();
return (lbeProducto);
}
}
}
Nota: También es necesario hacer una referencia a la librería "System.Configuration" para leer la cadena de conexión definida en la aplicación.
Grabar la librería de reglas de negocio creada y compilarla.
Crear una Aplicación Web de ASP.NET MVC4 en C#
Seleccionar un nuevo proyecto de tipo: "Aplicación web de ASP.NET MVC4" y escribir como nombre "Demo10", luego seleccionar la opción "Vacio" y como motor de vista "Razor" y "Aceptar".
Nota: Antes de iniciar con el código hay que referenciar a las librerías creadas, sobre todo a la Regla de Negocio y las Entidades de Negocio.
Crear un Controlador para el Producto
Clic derecho a la carpeta Controllers y seleccionar "Agregar" y luego "Controlador", llamarle al archivo "ProductoController.cs" y en opciones de plantillas dejarlo en plantilla vacía (Vaciar Controlador MVC). Luego escribir el siguiente código:
using System;
using System.IO;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Northwind.Librerias.EntidadesNegocio;
using Northwind.Librerias.ReglasNegocio;
namespace Demo10.Controllers
{
public class ProductoController : Controller
{
public ActionResult Lista()
{
brCategoria obrCategoria = new brCategoria();
List<beCategoria> lbeCategoria = obrCategoria.listar();
ViewBag.Categorias = lbeCategoria;
List<string> tiposGrafico = new List<string>();
tiposGrafico.Add("Barras");
tiposGrafico.Add("Columnas");
tiposGrafico.Add("Lineas");
tiposGrafico.Add("Pie");
ViewBag.TiposGrafico = tiposGrafico;
return View();
}
public PartialViewResult ConsultaGrafico(int idCategoria,string tipoGrafico)
{
brProducto obrProducto = new brProducto();
List<beProducto> lbeProducto = obrProducto.listarPorCategoria(idCategoria);
int ancho = 800;
int alto = 500;
Bitmap bmp = new Bitmap(ancho, alto);
Graphics grafico = Graphics.FromImage(bmp);
Rectangle rect = new Rectangle(0, 0, ancho, alto);
LinearGradientBrush degradado = new LinearGradientBrush
(rect, Color.Aqua, Color.Blue, LinearGradientMode.BackwardDiagonal);
grafico.FillRectangle(degradado, rect);
int x, y;
Font fuente=new Font("Arial",10);
Pen lapiz=new Pen(Brushes.Yellow,5);
StringFormat formato = new StringFormat(StringFormatFlags.DirectionVertical);
switch (tipoGrafico)
{
case "Barras":
x = 20;
y=20;
foreach(beProducto obeProducto in lbeProducto)
{
x = 20;
grafico.DrawString(obeProducto.Nombre, fuente,
Brushes.White, x, y);
x = 200;
rect = new Rectangle(x, y, obeProducto.Stock, 20);
grafico.FillRectangle(Brushes.Yellow, rect);
x = 220 + obeProducto.Stock;
grafico.DrawString(obeProducto.Stock.ToString(), fuente,
Brushes.White, x, y);
y += (int)fuente.GetHeight() + 20;
}
break;
case "Columnas":
x = 20;
y=350;
foreach(beProducto obeProducto in lbeProducto)
{
grafico.DrawString(obeProducto.Nombre, fuente,
Brushes.White, x, y, formato);
alto = 340 - obeProducto.Stock;
rect = new Rectangle(x, alto, 20, obeProducto.Stock);
grafico.FillRectangle(Brushes.Yellow, rect);
grafico.DrawString(obeProducto.Stock.ToString(), fuente,
Brushes.White, x, alto - 20);
x += 50;
}
break;
case "Lineas":
x = 20;
y=350;
for(int i=0;i<lbeProducto.Count;i++)
{
grafico.DrawString(lbeProducto[i].Nombre, fuente,
Brushes.White, x, y, formato);
if (i < lbeProducto.Count - 1)
{
grafico.DrawLine(lapiz, new Point(x, 340 - lbeProducto[i].Stock),
new Point(x + 50, 340 - lbeProducto[i + 1].Stock));
}
grafico.DrawString(lbeProducto[i].Stock.ToString(), fuente,
Brushes.White, x, 320 - lbeProducto[i].Stock);
x += 50;
}
break;
case "Pie":
decimal total = lbeProducto.Sum(obj => obj.Stock);
float anguloInicio = 00.0F;
float anguloFin;
rect = new Rectangle(100, 10, ancho-200, alto - 20);
int R, G, B;
Color color;
Random oAzar = new Random();
for (int i = 0; i < lbeProducto.Count; i++)
{
R = oAzar.Next(255);
G = oAzar.Next(255);
B = oAzar.Next(255);
color = Color.FromArgb(R, G, B);
anguloFin = (float)((lbeProducto[i].Stock * 360) / total);
grafico.FillPie(new SolidBrush(color), rect, anguloInicio, anguloFin);
anguloInicio += anguloFin;
}
break;
}
byte[] imagen=null;
using (MemoryStream ms = new MemoryStream())
{
bmp.Save(ms, ImageFormat.Png);
imagen = ms.ToArray();
}
ViewBag.Imagen = String.Format("data:image/png;base64,{0}",
Convert.ToBase64String(imagen));
return PartialView("Grafico", lbeProducto);
}
}
}
Nota: Para el gráfico de Pie se esta creando un color al azar para cada producto.
Crear una Hoja de Estilos para la Vista
Primero crear una carpeta llamada "Content", luego clic derecho "Agregar" y luego "Hoja de estilos" y como nombre llamarle "ACME.css" y escribir el siguiente código:
body {
background-color:gray;
}
.Titulo {
background-color:black;
color:white;
font-size:larger;
}
.Subtitulo {
background-color:white;
color:black;
font-size:large;
}
.AnchoTotal {
width:100%;
}
.Centrado {
text-align:center;
}
.FilaCabecera {
background-color:lightgray;
color:black;
}
.FilaDatos {
background-color:white;
color:black;
}
Crear la Vista Productos para mostrar los datos
Ir al controlador y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", desmarcar todos los check ya que es una vista sin tipo y escribir el siguiente código:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Lista</title>
<link href="~/Content/ACME.css" rel="stylesheet" />
</head>
<body>
<div>
@using (Ajax.BeginForm("ConsultaGrafico", "Producto",
new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace,
UpdateTargetId = "divGrafico" }, new { id = "frmGrafico" }))
{
<table class="AnchoTotal">
<tr class="Titulo">
<td colspan="2">Gráficar Datos en el Servidor en ASP.NET MVC
con llamada asíncrona usando Ajax Form y Vista Parcial</td>
</tr>
<tr class="Subtitulo">
<td colspan="2">Consulta de Productos por Categoría</td>
</tr>
<tr>
<td style="width:40%">Seleccione la Categoría</td>
<td style="width:60%">Seleccione el Tipo de Gráfico</td>
</tr>
<tr>
<td>
@Html.DropDownList("idCategoria",
new SelectList(ViewBag.Categorias,"IdCategoria","Nombre"))
</td>
<td>
@Html.DropDownList("tipoGrafico",
new SelectList(ViewBag.TiposGrafico))
</td>
</tr>
<tr>
<td colspan="2">
<div id="divGrafico"></div>
</td>
</tr>
</table>
}
</div>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/Rutinas.js"></script>
<script>iniciarLista();</script>
</body>
</html>
Nota: Es mejor colocar los archivos de JavaScript al final de la página para renderizar mas rápido.
Crear la Vista Parcial con la Consulta y el Gráfico a Mostrar
Ir nuevamente al controlador y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", cambiar de nombre a la vista por "Grafico", seleccionar el check "Crear como vista parcial" y escribir el siguiente código:
@using Northwind.Librerias.EntidadesNegocio
@model List<beProducto>
<table class="AnchoTotal">
<tr>
<td style="vertical-align:top">
<table class="AnchoTotal">
<tr class="FilaCabecera">
<td style="width:200px">Nombre del Producto</td>
<td style="width:10px">Stock</td>
</tr>
@foreach (beProducto obeProducto in Model)
{
<tr class="FilaDatos">
<td>@obeProducto.Nombre</td>
<td>@obeProducto.Stock</td>
</tr>
}
</table>
</td>
<td>
<img src="@ViewBag.Imagen" width="800" height="500" />
</td>
</tr>
</table>
Crear el archivo JavaScript con el código cliente
Antes que nada crear una carpeta llamada "Scripts" y arrastrar del explorador de Windows el archivo de jQuery: "jquery-1.8.2.min.js" y "jquery.unobtrusive-ajax.min.js" (necesario para el Ajax Form), luego agregar un archivo de JavaScript llamado "Rutinas.js" y escribir el siguiente código:
function iniciarLista() {
$("#frmGrafico").submit();
var cboIdCategoria = document.getElementById("idCategoria");
cboIdCategoria.onchange = function () { llamadaAsincrona(); };
var cboTipoGrafico = document.getElementById("tipoGrafico");
cboTipoGrafico.onchange = function () { llamadaAsincrona(); };
function llamadaAsincrona() {
$("#frmGrafico").submit();
}
}
Nota: Cuando se carga la página se esta haciendo un submit al formulario "frmGrafico" via jQuery el cual es asíncrono por que el formulario en un Ajax Form. También ocurre lo mismo al seleccionar una categoría del combo.
Modificar el archivo web.config para incluir la cadena de conexión
<configuration>
<connectionStrings>
<add name="conNW" providerName="SQLServer"
connectionString="uid=UsuarioNW;pwd=123456;
data source=DSOFT\Sqlexpress;database=Northwind"/>
</connectionStrings>
.....
</configuration>
Configurar el inicio y ejecutar la aplicación web
Para probar la aplicación web debemos configurar el inicio para lo cual nos vamos a la carpeta "App_Start" y abrimos el archivo "RouteConfig.cs" cambiando el nombre del controlador y la acción tal como sigue: controller = "Producto", action = "Lista".
Ejecución y Pruebas de la Aplicación Web ASP.NET MVC
Finalmente, grabar y pulsar F5 para ejecutar la aplicación, mostrándose el resultado similar a la siguiente figura:
Por defecto se muestra la categoría "Bebidas" y en el tipo de gráfico "Barras", cambiar el tipo de gráfico a "Columnas" y se verá la siguiente figura:
Probar ahora con el gráfico de "Lineas" y se mostrará algo similar a la siguiente figura:
Finalmente, cambiar el tipo de gráfico a "Pie" y se verá lo siguiente:
Nota: En el gráfico de Pie falta agregar una leyenda para distinguir cada producto de acuerdo al color generado. Esto queda como tarea para que aprendan mas sobre Drawing.
Comentario Final
En este post hemos visto como trabajar en forma conectada, y también hemos aprendido a crear gráficos dinámicamente usando la librería System.Drawing y las clases: Bitmap, Graphics, Rectangle, Font, Pen, StringFormat, Color, SolidBrush, las enumeraciones: Brushes y StringFormatFlags, también el Namespace: System.Drawing.Drawing2D para usar la clase: LinearGradientBrush (degradado).
En un anterior post vimos como crear gráficos en el Cliente usando HTML5 Canvas con JSON:
Aunque en apariencia los Demos son similares el anterior es desconectado de la base de datos y del servidor web, este demo es conectado o en línea para ver los últimos datos, por ejemplo muy útil para reportes gerenciales en línea.
Descarga del código
Video del Demo
Nota: El video es muy similar al código presentado en el Demo, pero la versión original era desconectada del servidor de datos y usaba una sesión, en cambio el demo es totalmente conectado, la diferencia solo es en el controller y es mínima.
