C# MVC - 使用 datetimepickers 创建动态图表

Question

我正在尝试在我的网站中创建一个图表模块，客户可以在其中查看他们的数据。我最初创建了一些预设图表（年度、每月）来表示我数据的不同方面，但现在我想更改它，以便用户通过两个 DateTimePickers 动态选择用于填充图表的日期窗口。

我的数据：

public class visitItem
{

    public int VisitId { get; set; }

    public int ContactId { get; set; }

    public int LocationId { get; set; }

    public DateTime FirstSeen { get; set; }

    public DateTime LastSeen { get; set; }

    public double Duration { get; set; }

}

我的控制器中有一个动作方法：

public ActionResult dateGapDuration(DateTime start, DateTime end)
{
        //Fetch client data
        visits = getList();

        //Cut down list to elements within interval.
        var Model = visits.Where(x => x.FirstSeen.Ticks > start.Ticks && x.FirstSeen.Ticks < end.Ticks).ToList<visitItem>();

        //My generic chart format initialiser.
        var chart1 = getChartSetup();
        chart1.Width = 1100;
        chart1.Height = 500;

        //Check Interval Length and apply relevant list grouping (i.e. to avoid displaying every day is interval is 4 years)
        if (interval < 60 * TimeSpan.TicksPerDay)
        {
             var chartList = Model.AsEnumerable().GroupBy(v => v.FirstSeen.Day)
            .Select(g => new visitItem
            {
                FirstSeen = DateTime.Parse(g.Key.ToString()),
                Duration = g.Sum(i => i.Duration)
            });
        }       

        //Cycle through chartList and populate data points.
        //Return image to view...

}

然后图表作为要显示的图像返回。

我以前在局部视图中呈现我的预设图表，然后使用按钮隐藏/显示。部分视图通常看起来像这样，例如：

<div id="annualdur" hidden="hidden">
<img src="@Url.Action("annualDuration", "Analytics", new { year = "2014" })" />

现在我希望图表是可变的：

1. 如何从视图中调用此函数？我的理解是，当 datetimepickers 值发生更改时，为此使用部分视图不会调用该函数，因此我认为我需要另一种方法来执行此操作。

2. 假设上述 1. 的解决方案，是否可以在视图中保留 datetimepicker 的 DateTime，以便在按下 Load chart 样式按钮时传递给函数？

Answer 1

假设您希望允许用户在重新加载图表之前选择开始日期和结束日期，我建议在视图中包含按钮元素

<button type="button" id="update-chart">Update</button>
// Place holder for the chart
<div id="chart"><div>

还假设您有 2 个日期选择器输入，ID 为 StartDate 和 EndDate，您可以使用 ajax 调用控制器方法，该方法根据日期返回部分视图

var chart = $('#chart);
var url = '@Url.Action("UpdateChart", yourController)';
$('#update-chart).click(function() {
  var start = $('#StartDate').val();
  var end = $('#EndDate').val();
  chart.load(url, { startDate: start, endDate: end });
});

然后创建一个控制器方法来返回一个包含图表的局部视图。注意我不确定你在做什么，因为你的<img> 标签正在调用annualDuration() 方法，但是你已经展示了一个名为dateGapDuration 的方法，但我最好的猜测是你需要一个局部视图（比如@987654328 @) 包含

<img src="@Url.Action("dateGapDuration", "Analytics", new { start = ViewBag.StartDate, end = ViewBag.EndDate })" />

那么控制器就是

[HttpPost]
public ActionResult UpdateChart(DateTime startDate, DateTime endDate)
{
  // Pass the dates to the partial view
  ViewBag.StartDate = startDate;
  ViewBag.EndDate = endDate;
  return PartialView("_Chart"); // rename to suit
}