Nouveaux contrôles graphiques asp.net - fonctionneront-ils (éventuellement) avec MVC ?

Question

Scott Gu vient de publier un article sur un nouvel ensemble de contrôles graphiques distribués par l'équipe .NET. Ils semblent incroyables : http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx

La question à un million de dollars est la suivante : travailleront-ils avec MVC, et si oui, quand ?

Answer 1

Vous pouvez utiliser les contrôles graphiques de deux manières :

Générer l'image à partir d'un contrôleur

En générant le graphique et en le renvoyant sous forme d'image à partir d'une action (ce à quoi Chatuman fait référence, je pense) :

Chart chart = new Chart();
chart.BackColor = Color.Transparent;
chart.Width = Unit.Pixel(250);
chart.Height = Unit.Pixel(100);

Series series1 = new Series("Series1");
series1.ChartArea = "ca1";
series1.ChartType = SeriesChartType.Pie;
series1.Font = new Font("Verdana", 8.25f, FontStyle.Regular);
series1.Points.Add(new DataPoint { 
                AxisLabel = "Value1", YValues = new double[] { value1 } });
series1.Points.Add(new DataPoint {
                AxisLabel = "Value2", YValues = new double[] { value2 } });
chart.Series.Add(series1);

ChartArea ca1 = new ChartArea("ca1");
ca1.BackColor = Color.Transparent;
chart.ChartAreas.Add(ca1);

using (var ms = new MemoryStream())
{
    chart.SaveImage(ms, ChartImageFormat.Png);
    ms.Seek(0, SeekOrigin.Begin);

    return File(ms.ToArray(), "image/png", "mychart.png");
}

Style WebForms

De cette façon, il vous suffit d'inclure le graphique dans vos vues .aspx (comme avec les formulaires web traditionnels). Pour cela, vous devez ajouter les éléments pertinents dans votre web.config.

<controls>
    ...
    <add tagPrefix="asp"
         namespace="System.Web.UI.DataVisualization.Charting"
         assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>

<httpHandlers>
    ...
    <add path="ChartImg.axd"
         verb="GET,HEAD"
         validate="false"
         type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</httpHandlers>

<handlers>
    ...
    <add name="ChartImageHandler"
         preCondition="integratedMode" 
         verb="GET,HEAD"
         path="ChartImg.axd"
         type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</handlers>

Vous ne pouvez pas exécuter de code à l'intérieur des éléments DataPoint lors de la construction du graphique, donc pour connecter vos données vous aurez besoin d'une méthode dans la classe View. Cela fonctionne bien pour moi. En travaillant de cette manière, le contrôle rend une URL vers une image générée par le gestionnaire http du contrôle du graphique. Dans votre déploiement, vous devrez fournir un dossier accessible en écriture pour la mise en cache des images.

* Support VS 2010 / .NET 4 *

Pour que cela fonctionne dans .NET 4, vous devez modifier les références de la carte à la version 4.0.0.0 avec le jeton de clé publique approprié.

Il semble également que le contrôle du graphique génère maintenant des urls vers le chemin de la requête en cours plutôt que vers la route de la requête. Pour moi, cela signifie que toutes les demandes de graphiques ont donné lieu à des erreurs 404 car /{Controller}/ChartImg.axd et équivalents ont été bloqués par des routes. Pour corriger cela, j'ai ajouté des appels IgnoreRoute supplémentaires qui couvrent mes usages - une solution plus générale serait meilleure :

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("ChartImg.axd/{*pathInfo}");
    routes.IgnoreRoute("{controller}/ChartImg.axd/{*pathInfo}");
    routes.IgnoreRoute("{controller}/{action}/ChartImg.axd/{*pathInfo}");
...

Answer 2

Pour les personnes qui veulent utiliser le contrôle graphique avec MVC 3 en utilisant le moteur Razor, voir le lien suivant

Comment utiliser MS Charts avec MVC3 avec Razor

Answer 3

Vous pouvez déjà les utiliser avec MVC ; il suffit de les rendre sous forme d'images.

Answer 4

Créez un Usercontrol à la place, donnez-lui l'objet Chart complet et laissez-le s'auto-rendre :

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.Web.UI.DataVisualization.Charting.Chart>" %>
<%
    Model.Page = this.Page;
    var writer = new HtmlTextWriter(Page.Response.Output);
    Model.RenderControl(writer);
%>

nommez-la Chart.ascx et mettez-la dans votre dossier Shared view.

maintenant vous aurez tout le html supplémentaire, comme l'image map etc. gratuitement ainsi que la mise en cache.

dans votre contrôleur :

public ActionResult Chart(){
 var c = new Chart();
 //...
 return View(c);
}

dans votre vue :

<% Html.RenderPartial("Chart", Model); %>

Answer 5

Cet article a été le meilleur pour moi :

http://www.codecapers.com/post/Build-a-Dashboard-With-Microsoft-Chart-Controls.aspx

Il n'y a pas d'erreur concernant "Object not set to an instance of an object" ou "Session id was available but the response stream has been flushed" (la formulation exacte de ces erreurs n'est pas exacte).

Je n'étais pas disposé à les rendre simplement sous forme d'image, car si vous effectuez des explorations, des infobulles ou d'autres actions par clic sur le graphique, le rendu sous forme d'image ne préserve rien de tout cela.

La clé pour mes besoins était de mettre le(s) graphique(s) dans un modèle, de passer le modèle à la vue (ou à la vue partielle) et de mettre un asp:panel dans la vue et d'ajouter le(s) graphique(s) au panel dans le balisage de la vue.

Soit dit en passant, c'était avec VS.net 2008 et MVC 2 le 3 septembre 2010 (les dates étaient quelque chose que j'ai trouvé important lors de la recherche de réponses en raison des changements qui se produisent continuellement à MVC).