Question

我使用.NET图表从数据库中的表创建一些动态图表，每个图表都是一个单独的视图，在控制器中有相应的操作。

然后它们在主视图中显示为图像：

<img src="~/Controller/Chart1" class="centered" />

现在我希望能够按日期过滤图表，并且我已将参数添加到操作中，并为开始日期和结束日期添加了几个日期选择器。

我尝试使用Ajax刷新图表，但我遇到了麻烦。如果没有Ajax，过滤器可以工作，但会重定向到只包含更新图表的页面。

使用Ajax，没有任何反应，或者更确切地说，如果我将UpdateTargetId设置为div，它将填充文本，如字节代码或其他东西。这就是我正在使用的：

<div>
    using (Ajax.BeginForm("Chart1", "controller",
         new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "Chart1"
        }))
    {
    <p>
        <input type="text" name="begindate" class="datefield" placeholder="Begin Date" />
        <input type="text" name="enddate" class="datefield" placeholder="End Date" />
        <input type="submit" value="Filter" />
    </p>

    <img src="~/controller/Chart1" class="centered" />
</div>

如何解决此问题？

Answer 1

您需要将日期传递给您的操作方法，并让操作方法使用这些日期生成过滤后的数据集，该数据集将用于生成图表。

您可以简单地使用jQuery Ajax来执行此操作。

<div>
     <input type="text" name="begindate" class="datefield" placehold="Begin Date" />
     <input type="text" name="enddate" class="datefield" placeholder="End Date" />
     <input type="submit" id="btnFilter" value="Filter" />
     <img src="~/controller/Chart1" id="chartImg" class="centered" />
</div>

现在，当用户点击表单时，传递日期

$(function(){
  $("#btnFilter").click(function(e){
    e.preventDefault();

    var d1 = $("input[name='begindate']").val();
    var d2 = $("input[name='enddate']").val();
    var url = "@Url.Action("Chart1", "YourControllerName")";
    url += "?beginDate=" + d1 + "&endDate=" + d2;
    $("#chartImg").attr("src", url);
  });
});

当然，您的操作方法应该接受日期并根据需要返回数据：

public ActionResult Chart1(DateTime beginDate,DateTime endDate)
{
  // Return the chart image
}

我正在使用Url.Action操作方法生成Chart1操作方法的正确路径。如果您的JavaScript代码位于Razor视图中，则此代码将起作用。如果您的代码位于外部js文件中，请使用this post

中提到的方法

使用ajax.beginform

1 个答案: