Using the Chart Helper

As its name suggests, the chart helper produces charts and graphs. This is another ASP.NET Web Forms
control that you are able to employ in MVC Framework applications (and are ungainly to use as a
consequence). Unlike the other helpers, the chart helper produces images rather than HTML.
The chart helper has many, many options and can display a wide range of different chart types and
styles—so many that we are going to give you only the briefest introduction in this book. The best way to
learn more about the capabilities of this helper is by experimentation. The MSDN section on MVC is
pretty thin on details, but the Web Forms coverage of the Chart control is more helpful. The simplest way
to use the chart helper is to define an action method that returns void.

public void ChartImage() {
IEnumerable<Product> productList = new List<Product> {
new Product {Name = “Kayak”, Category = “Watersports”, Price = 275m},
new Product {Name = “Lifejacket”, Category = “Watersports”, Price = 48.95m},
new Product {Name = “Soccer ball”, Category = “Football”, Price = 19.50m},
new Product {Name = “Corner flags”, Category = “Football”, Price = 34.95m},
new Product {Name = “Stadium”, Category = “Football”, Price = 150m},
new Product {Name = “Thinking cap”, Category = “Chess”, Price = 16m}
};
Chart chart = new Chart(400, 200,
@”<Chart BackColor=””Gray”” BackSecondaryColor=””WhiteSmoke””
BackGradientStyle=””DiagonalRight”” AntiAliasing=””All””
BorderlineDashStyle = “”Solid”” BorderlineColor = “”Gray””>
<BorderSkin SkinStyle = “”Emboss”” />
<ChartAreas>
<ChartArea Name=””Default”” _Template_=””All”” BackColor=””Wheat””
BackSecondaryColor=””White”” BorderColor=””64, 64, 64, 64″”
BorderDashStyle=””Solid”” ShadowColor=””Transparent””>
</ChartArea>
</ChartAreas>
</Chart>”);
chart.AddSeries(
chartType: “Column”,
yValues: productList.Select(e => e.Price).ToArray(),
xValue: productList.Select(e => e.Name).ToArray()

);
chart.Write();
}

Advertisements

Using the WebGrid Helper

The WebGrid helper generates HTML to display data items in a grid format, using the HTML table
element. This helper is a wrapper around a ASP.NET Web Pages control. It is a nice bonus to be able to
use it with the MVC Framework but, as you will see, it is a little awkward.

To start with, you need a source of items to display. We have created an
action method that returns a collection of Product objects.

public ActionResult Grid() {
IEnumerable<Product> productList = new List<Product> {
new Product {Name = “Kayak”, Category = “Watersports”, Price = 275m},
new Product {Name = “Lifejacket”, Category = “Watersports”, Price = 48.95m},
new Product {Name = “Soccer ball”, Category = “Football”, Price = 19.50m},
new Product {Name = “Corner flags”, Category = “Football”, Price = 34.95m},
new Product {Name = “Stadium”, Category = “Football”, Price = 79500m},
new Product {Name = “Thinking cap”, Category = “Chess”, Price = 16m}
};
return View(productList);
}

The action method passes an IEnumerable<Product> as the view model object. Now we will shows
how we can display this data using the WebGrid helper.

@model IEnumerable<DynamicData.Models.Product>
@{
var grid = new WebGrid(
source: Model,
rowsPerPage: 4);
}
@grid.GetHtml(
tableStyle: “grid”,
headerStyle: “header”,
rowStyle: “row”,
footerStyle: “footer”,
alternatingRowStyle: “altRow”,
columns: grid.Columns (
grid.Column(“Name”, “Item”, style:”textCol”),
grid.Column(“Price”, style: “numberCol”,
format: @<text>$@string.Format(“{0:F2}”, item.Price) </text>)
))