Updating .NET Charts using ajax.beginform

Question

I'm using .NET Charts to create some dynamic charts from a table in a database, and each chart is a separate view, with a corresponding action in the controller.

Then they are displayed in a main view as images:

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

Now I want to be able to filter the charts by date, and I've added the parameters to the actions and a couple datepickers for a start date and an end date.

I'm trying to refresh the charts using Ajax, but I'm having trouble. Without Ajax, the filter works, but redirects to a page containing just the updated chart.

With Ajax, nothing happens, or rather, if I set the UpdateTargetId to a div it gets filled with text, like byte code or something. This is what I'm using:

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

How can I fix this problem?

Answer 1

You need to pass the dates to your action method and let the action method uses these dates to generate a filtered data set which will be used to generate the chart.

You can simply use jQuery Ajax to do this.

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

Now when user clicks the form, pass the dates

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

Now of course your action method should accept the dates and return the data as needed:

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

I am using the Url.Action action method to generate the correct path to the Chart1 action method. This code will work if your JavaScript code is inside a Razor view. If your code is inside an external js file, Use the approach mentioned in this post