Question

I have an input

<input type="button" id="test" value="test" />

My action on the ‘Home’ controller:

public ActionResult DataUsage(DateTime startDate, DateTime endDate, string userName)
{
  var data = FetchDataFromDB(startDate, endDate, uName);
  return PartialView("DataUsageChartViewPartial", data);
}

The div I want to load the result form DataUsage in

<div id="myChart"></div>

jQuery code

$(function() {
    $("#test").click(function () {
        $.ajax({
               url: '/Home/DataUsage',
               type: 'POST',
               data: { startDate: $('#startDate').val(), endDate: $('#endDate').val(), userName: $('#userName').val() },
               success: function (result) {
                   alert("success " +result);
              },
              error: function (err) {
                 alert("error "+err);
             }
            });
            return false;
        });
    }
 );

When I click the button I want the div(myChart) to be populated with the result from the action in the controller.
I’m not sure if my jQuery is correct as I keep getting an error and the breakpoint in my controller/action is never hit.
Can someone please tell me what I’m doing wrong and how to correct it

Answer 1

Maurice,

I think it could well be a very simple case of not having the correct url being called. You should try using the helpers in mvc:

url: '@Url.Action("DataUsage", "Home")'

Also, you might want to decorate your action with HttpPost to ensure that it’s in step with your ajax type, i.e:

[HttpPost]
public ActionResult DataUsage(...)

this should take you one step closer, if not solve the issue completely.

The final step is to ensure that you have a div called ‘myChart’ inside your ‘calling’ view, then populate it as thus:

<div id='myChart'></div>

success: function (result) {
    $('#myChart').html(result);
}

hope this helps