MVC/Razor Passing form variables to a chart image method - asp.net-mvc

Question

I have updated the code, but am still running into problems... I think I'm lost in spaghetti code at the moment.
My financial periods controller:
public ActionResult GetChartImage(bool checkedCash, bool checkedPrepaidExpenses)
{
var sql = String.Format("select * from FinancialPeriods");
var chartData = db.FinancialPeriods.SqlQuery(sql);
var myChart = new Chart(width: 600, height: 400);
myChart.AddSeries(name: "Prepaid Expenses", chartType: "Line", xValue: chartData, xField: "Year", yValues: chartData, yFields: "PrepaidExpenses");
/*
if (checkedCash)
{
myChart.AddSeries(name: "Cash", chartType: "Line", xValue: chartData, xField: "Year", yValues: chartData, yFields: "Cash").AddLegend("Legend");
}
*/
return File(myChart.ToWebImage().GetBytes(), "image/bytes");
}
//bool checkedCash, bool checkedPrepaidExpenses
public ActionResult Chart(bool checkedCash, bool checkedExpenses)
{
ViewBag.CheckedCash = checkedCash;
ViewBag.CheckedExpenses = checkedExpenses;
var sql = String.Format("select * from FinancialPeriods");
var chartData = db.FinancialPeriods.SqlQuery(sql);
var myChart = new Chart(width: 600, height: 400);
if (checkedCash)
{
myChart.AddSeries(name: "Cash", chartType: "Line", xValue: chartData, xField: "Year", yValues: chartData, yFields: "Cash").AddLegend("Legend");
}
return PartialView("_Chart"); // returns a partial view of the chart based on the model
}
My INDEX View:
<tr><td><input type="submit" class="btn btn-default" id="updatechart" value="Update Chart"></td></tr>
</table>
</p>
</div>
}
<div id="graphRight"> #Html.Action("GetChartImage", new { checkedCash = false, checkedPrepaidExpenses = false })</div>
</div>
<script src ="/assets/plugins/jquery-1.8.3.min.js" type="text/javascript">
var url = '#Url.Action("Chart")';
var imgcontainer = $('graphRight');
$('#updatechart').click(function () {
var isCash = $('#checkedCash').is(':checked');
var isExpenses = $('#checkedPrepaidExpenses').is(':checked');
imgcontainer.load(url, { checkedCash: isCash, checkedPrepaidExpenses: isExpenses });
});
</script>
_Chart.cshtml (shared)
#model IEnumerable<FinancialAnalysisSite.Models.FinancialPeriod>
<img src="#Url.Action("Chart", new { checkedCash = ViewBag.CheckedCash, checkedPrepaidExpenses = ViewBag.checkedPrepaidExpenses })" />
I have updated the code, but am still running into problems... I think I'm lost in spaghetti code at the moment.

Answer 1

You can use ajax to call a controller method that returns a partial view of the updated chart. Assuming you have a controller method
public ActionResult Chart(bool checkedCash, bool checkedExpenses)
{
ViewBag.CheckedCash = checkedCash;
ViewBag.CheckedExpenses = checkedExpenses;
return PartialView("_Chart"); // returns a partial view of the chart based on the model
}
and the _Chart.cshtml view
<img src="#Url.Action("GetChartImage", new { checkedCash = ViewBag.CheckedCash, checkedPrepaidExpenses = checkedExpenses })"/>
which in turn calls your GetChartImage() to generate the chart. Note the return type of your method should be
return File(chart, "image/bytes");
Then in the view, include a button to update the chart
<button type="button" id="updatechart">Update chart</button>
and include a script to handle the buttons .click() event and update the DOM using the jquery .load() method.
var url = '#Url.Action("Chart")';
var imgcontainer = $('graphRight');
$('#updatechart').click(function() {
var isCash = $('#checkedCash').is(':checked');
var isExpenses = $('#checkedExpenses').is(':checked');
imgcontainer.load(url, { checkedCash: isCash, checkedExpenses: isExpenses });
});
Note the code for generating the initial image could then use the same method using #Html.Action() (passing in whatever default values are necessary)
<div id="graphRight">#Html.Action("Chart", new { checkedCash = false, checkedExpenses = false })</div>