AJAX not calling the required C# controller method

Question

So I've been stuck on this one for some time and am fairly new to using AJAX, the issue I am having is with the below AJAX when I set a break point on the C# method it is supposed to call it is never reached and no errors are displayed.

The function getCheckBoxes is being called and executed as I stepped through what is happening with FireBug.

The second part will be the C# method I am attempting to execute with the AJAX, I got rid of the code inside as it is not even reaching it so it cannot be the problem. It is contained in TestScriptResultsController. I have tried with both POST and GET types. Any help would be appreciated.

getCheckBoxes = function getCheckBoxes () {
    //var firstDate = '@Model.FirstDate';
    //var lastDate = '@Model.LastDate';
    var fDateChanged = $("#FirstDate").datepicker('getDate');
    var lDateChanged = $("#LastDate").datepicker('getDate');
    var platformConfig = '@Model.PlatformConfigSelected';
    var triggered = '@Model.TriggeredSelected';

    $.ajax({
        url: '@Url.Action("BranchCheckBoxes", "TestScriptResults")',
        type: 'POST',
        data: { fDateChanged: firstDate, lDateChanged: lastDate, platformConfig: platformConfig, triggered: triggered },
        success: function (data) { $('#checkBoxes').html(data); }
    });
}

The controller action :

    public ActionResult BranchCheckBoxes(DateTime firstDate, DateTime lastDate, string platformConfig, string triggered)
    {

        return PartialView(trs);
    }

http://stackoverflow.com/questions/38937185/asp-mvc-5-how-to-read-object-from-request-with-the-help-of-json-net , also check one more time how variable names, sometimes the problem with them but you don't see this. — Nikita, Aug 17 '16 at 20:44
[HTTP/1.1 500 Internal Server Error 211ms] I believe is what you are wanting Jason. Just found this in FireBug as I am new to it also looking into this error now. — syghts, Aug 18 '16 at 14:12
I was looking around a bit more and found the actual html response and this is must likely the problem. Thanks for pointing me in this direction Jason looking into it now. >The parameters dictionary contains a null entry for parameter 'firstDate' of non-nullable type 'System.DateTime' for method 'System.Web.Mvc.ActionResult BranchCheckBoxes(System.DateTime, System.DateTime, System.String, System.String)' in 'DuckCallWeb.Controllers.TestScriptResultsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. — syghts, Aug 18 '16 at 14:18

score 1 · Answer 1 · answered Aug 17 '16 at 20:54

Your JavaScript object initializer syntax is backward for data. Try using: data: { firstDate: fDateChanged, lastDate: lDateChanged, platformConfig: platformConfig, triggered: triggered } The proper syntax is { 'key': 'value' }
'@Url.Action("BranchCheckBoxes", "TestScriptResults")' will not work unless you are inside a Razor page. Ensure that your JavaScript is within a .cshtml or .vbhtml page or (preferably) use url: '/TestScriptResults/BranchCheckBoxes/'
BranchCheckBoxes() needs to have an [HttpPost] attribute, as MVC defaults to GET for controller actions:
```
[HttpPost]
public ActionResult BranchCheckBoxes (...)
```

I tried all three of these suggestions same result it is never reaching my ActionResult method. For the second point it is contained within a .cshtml so I did not switch the format there but I can see with FireBug that it switches it to what you suggested url: '/TestScriptResults/BranchCheckBoxes/'. Thanks for the responses all looking into the other comments now. — syghts, Aug 18 '16 at 13:59

syghts · Accepted Answer · 2016-08-18T15:31:39.983

Thanks Jason pointing me to the HTTP response lead me to the answer for this as .datepick('getDate') was returning an object instead of a string and therefore breaking before it could enter the ActionResult method I had setup. I changed the way I was retrieving the value from the datepicker, my data line in the AJAX call and I changed my actionResult parameters and it is now working. Is there a way I can give Jason some points on this I'm new to StackOverflow and his comment was very helpful in getting to the answer?

JavaScript for datePicker:

            $(function () {
            $("#FirstDate").datepicker()
              .on("input change", function (e) {
                  var firstDateChanged = $(this).val();
                  firstDateChange();

              });

        });

AJAX change:

data: { firstDate: firstDateChanged, lastDate: lastDateChanged, platformConfig: platformConfig, triggered: triggered },

Controller Change:

        public ActionResult BranchCheckBoxes(string firstDate, string lastDate, string platformConfig, string triggered)
    { }

AJAX not calling the required C# controller method

2 Answers2