Question

我已经更新了代码，但我仍然遇到问题......我想我目前在意大利面条代码中丢失了。

我的财务期控制人：

    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
    }

我的INDEX视图：

                <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 })" />

我已经更新了代码，但我仍然遇到问题......我想我目前在意大利面条代码中丢失了。

Answer 1

您可以使用ajax调用控制器方法，该方法返回更新图表的部分视图。假设你有一个控制器方法

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
}

和_Chart.cshtml视图

<img src="@Url.Action("GetChartImage", new { checkedCash = ViewBag.CheckedCash, checkedPrepaidExpenses = checkedExpenses })"/>

反过来调用您的GetChartImage()来生成图表。请注意，方法的返回类型应为

return File(chart, "image/bytes");

然后在视图中，包含一个更新图表的按钮

<button type="button" id="updatechart">Update chart</button>

并包含一个脚本来处理按钮.click()事件并使用jquery .load()方法更新DOM。

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  });
});

请注意，生成初始图像的代码可以使用@Html.Action()使用相同的方法（传入必要的默认值）

<div id="graphRight">@Html.Action("Chart", new { checkedCash = false, checkedExpenses = false })</div>

MVC / Razor将表单变量传递给图表图像方法

1 个答案: