我如何使用 mvc 助手在视图中显示我的图表？

Question

我正在使用 mvc 助手根据员工工作时间与月份的总和创建条形图。我正在使用下拉列表，按员工姓名过滤这些图表。但是我遇到了一个问题，当我点击下拉列表时，正确的图表显示但只是图像而不是页面视图。我该如何解决？请帮忙。我在控制器中的方法。

   public ActionResult CharterColumn(string Status)

                {
                    var results = (from c in db.Clockcards select c);




                var groupedByMonth = results
                    .Where(a => a.Name == Status)
                    .OrderByDescending(x => x.Date)
                    .GroupBy(x => new {x.Date.Year, x.Date.Month}).ToList();



                List<string> monthNames = groupedByMonth

                    .Select(a => a.FirstOrDefault().Date.ToString("MMMM"))
                    .ToList();

                List<double> hoursPerMonth = groupedByMonth
                    .Select(a => a.Sum(p => p.Hours))
                    .ToList();


                ArrayList xValue = new ArrayList(monthNames);
                ArrayList yValue = new ArrayList(hoursPerMonth);

                new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: xValue, yValues: yValue)
                    .Write("bmp");

                return null;
            }



            public ActionResult Index()
            {

                ViewBag.Status = (from r in db.Clockcards
                    select r.Name).Distinct();


                return View();
            }

我的观点

    <p>
        @using (Html.BeginForm("CharterColumn", "Chart", FormMethod.Get))
        {
            <b>Search by Full Name:</b><font color="black">@Html.DropDownList("Status", new SelectList(ViewBag.Status), new { onchange = "this.form.submit()" })</font>


        }
    </p>

Answer 1

对于评论，我有点不清楚确切的问题是什么。但我认为这就是你想要的。对于控制器

public ActionResult Index() 
        {
            ViewBag.Status = new[] { "A", "B" };

            return View();
        }
//This controller returns an jpeg image you can use bmp but I think this will be better.
        public ActionResult Chart(string status) 
        {
            WebImage image;
            switch (status)
            {
                case "A":
                    image = new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: new[] { "A" }, yValues: new[] { 10 })
                    .ToWebImage("jpeg");
                    break;
                default:
                    image = new Chart(width: 800, height: 400, theme: ChartTheme.Blue)
                    .AddTitle("Chart")
                    .AddSeries("Default", chartType: "Column", xValue: new[] { "B" }, yValues: new[] { 20 })
                    .ToWebImage("jpeg");
                    break;
            }

            return File(image.GetBytes(), "image/jpeg");

        }

和视图

<b>Search by Full Name:</b>
<font color="black">
    @Html.DropDownList("Status", new SelectList(ViewBag.Status), new { id="dropdown", onchange = "updateChart()" })
</font>
<img id="chart" src="Chart?status=@ViewBag.Status[0]" />
<script>
    function updateChart()
    {
        var list = document.getElementById('dropdown');
        var value = list.options[list.selectedIndex].value;
        document.getElementById('chart').setAttribute('src', 'Chart?status=' + value);
    }
</script>

您需要在 html 中提供 img 标签的来源。如果您只想更新图像而不想往返服务器，则需要使用一些 javascript。但它真的很简单，它只是从下拉列表中获取值并将其发送到服务器。 src 只是控制器的路径，您可以使用您想要发送的任何内容。请记住，您不能在 javascript 中使用标签助手，因为它们是在服务器上呈现的。

我如何使用 mvc 助手在视图中显示我的图表？

How do i display my chart in a view using mvc helpers?

c#

asp.net-mvc

charts

asp.net-mvc-helpers

asp.net-mvc-5