Question

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

SELECT 
    col, case when patindex('%systemuser|%', col) = 0 then NULL else
    SUBSTRING(col, patindex('%systemuser|%', col) + 11, 36) end
FROM #temp

我的观点

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

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助手在视图中显示我的图表？

1 个答案: