Render fusionchart with Mvc3 and Razor engine

Question

Since yesterday, I try to run a sample of code to display a chart with FusionCharts and Mvc3 Razor and nothing works. Please.... help!!! :)

Here is what I have done:

1. I took the projet from Libero. here

2. After that, I used the project convertor here to upgrade the project from Mvc2 to Mvc3.

3. When I try to run to code (F5 and show the result in browser), that works fine; all graphics are displayed correctly.

If I just create a new view with razor (.cshtml) instead of the current .aspx (replacing a view from the old syntax to the new razor) and I try to displayed the same graphic, the page is displayed correctly but without graphic. When I look into the page source with firebug or any other tools, no code is behind the scene. I also don't have any errors while looking with the Web Developer tool in Firefox.

I just tried to add a Html.Raw in front of the code that generate the javascript to not encode the output and I have the same result. Also trying with returning HtmlString but again same result; no graphic is displayed.

The key to don't miss in this problem is that if I try the exact same code but with an .aspx file, all is correct.

In .aspx, the code looks like this:

<%=Html.FChart("Chart01", ViewData["MyChart"], 600, 400)%>

And in .cshtml:

@{Html.FChart("Chart01", ViewData["MyChart"], 600, 400); }

And finally, the html helper to generate this bunch of code:

  private static string RenderChart(string controlId, string xmlData, FusionChartBase chart, int width, int height)
  {
     String sControlId = controlId;
     String sJsVarId = "_lib_JS_" + controlId;
     String sDivId = "_lib_DIV_" + controlId;
     String sObjId = "_lib_OBJ_" + controlId;
     String sWidth = width.ToString();
     String sHeight = height.ToString();

     StringBuilder oBuilder = new StringBuilder();

     oBuilder.AppendLine(@"<div id=""" + sDivId + @""" align=""center""></div>");

     oBuilder.AppendLine(@"<script type=""text/javascript"">");

     oBuilder.AppendLine(@"var " + sControlId + @" = (function() {");
     oBuilder.AppendLine(@"    return {");
     oBuilder.AppendLine(@"        containerId: '" + sDivId + "',");
     oBuilder.AppendLine(@"        xmlData: '',");
     oBuilder.AppendLine(@"        chartType: '',");
     oBuilder.AppendLine(@"        showChart: function() {");
     oBuilder.AppendLine();
     oBuilder.AppendFormat(@"          var chartURL = '{0}' + this.chartType.replace('Chart', '{1}');", UrlSWF, SufixSWF);
     oBuilder.AppendLine(@"            var " + sJsVarId + @" = new FusionCharts(chartURL, """ + sObjId + @""", """ + sWidth + @""", """ + sHeight + @""");");
     oBuilder.AppendLine(@"            " + sJsVarId + @".setDataXML(this.xmlData);");
     oBuilder.AppendLine(@"            " + sJsVarId + @".render(""" + sDivId + @""");");
     oBuilder.AppendLine(@"        }");
     oBuilder.AppendLine(@"    }");
     oBuilder.AppendLine(@"})();");

     oBuilder.AppendLine(@"setTimeout(function(){");
     oBuilder.AppendLine(@"    " + sControlId + @".xmlData = """ + xmlData.Replace(@"""", @"'") + @""";");
     oBuilder.AppendLine(@"    " + sControlId + @".chartType = """ + chart.ChartType + @""";");
     oBuilder.AppendLine(@"    " + sControlId + @".showChart();");
     oBuilder.AppendLine(@"},0);");

     oBuilder.AppendLine(@"</script>");

     return oBuilder.ToString();
  }

I don't know if I must set some configuration options in the web.config or what I don't understand in the behavior of Mvc2 compare to Mvc3, but it's very frustrating.

If you have any idea, a big thanx in advance.

Answer 1

It should be @Html.FChart("Chart01", ViewData["MyChart"], 600, 400) instead of @{Html.FChart("Chart01", ViewData["MyChart"], 600, 400); }