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

}

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

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

现在我希望图表可变：

如何从视图中调用此函数？我的理解是，使用局部视图不会在datetimepickers值改变时调用函数，因此我认为我需要另一种方法来执行此操作。
假设上面有一个解决方案，是否可以在视图中保持datetimepicker的DateTime以传递到按Load chart样式按钮的函数？

Answer 1

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

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

并且假设您有{2}和StartDate ID的日期选择器的2个输入，您可以使用ajax调用控制器方法，该方法返回基于的部分视图日期

EndDate

然后创建一个控制器方法以返回包含图表的局部视图。请注意，由于您的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）

_Chart.cshtml

然后控制器将

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

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

1 个答案: