C# 如何使用mvc帮助程序在视图中显示图表？

我正在使用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>

我的看法

    <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>

---

很抱歉，我有点不清楚确切的问题是什么。 但我想这就是你想要的。 对于控制器

    <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>

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

        }

那景色呢

    <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>

<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中使用标记帮助程序，因为它们是在服务器上呈现的。

只有一个问题，您使用的是什么字符？我使用的是图表帮助程序OK抱歉，我不明白，我以为您正在创建自己的帮助程序。您只需要在视图上执行写入功能，而不是在控制器中。只需执行.writebmp部分？您可以，但我不建议这样做。我建议您在模型中传递数据xValue和yValue，并在UI中执行整个图表定义。这对于层分离来说是最好的，因此，如果您想在任何时候更改正在使用的图表，您都不需要更改控制器和视图。请记住，在您的用例中可能不会出现性能问题，但是System.Web.Helpers图表不能很好地扩展，因此使用一些javascript图表库在客户端执行所有操作是大多数情况下的推荐方式。您可以看看它是否有社区许可证，这就是为什么我向您或其他客户机UI库推荐它的原因。

    <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>