Why is my REST method not being called by this jQuery?

Question

I have a similar question about jQuery button click handler code not being fired at all here.

In this case, it is being fired (when the jQuery is added to a sta

Answer 1

You have a few issues with how you are generating the route and how you are trying to access it.

You Web API action is using attribute routing so by default there is no route name to match like in the convention-based routing.

Update the route attribute to include a name to find in the route table.

[RoutePrefix("api")]
public class LandingPageController : ApiController {

    [HttpGet]
    [Route("{unit}/{begdate}/{enddate}", Name="QuadrantData")]
    public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate) {
        _unit = unit;
        _beginDate = begdate;
        _endDate = enddate;
        //...other code
    }

    //...other code
}

Next even though you have the name you also need to include the template parameters in order to get a match from MVC and have it generate the url in the template you defined on the action.

To generate link to Web API, it would look like this

@Url.RouteUrl(routeName : "QuadrantData", routeValues : new { httpRoute = true , unit = "ABUELOS", begdate = "2016-08-07", enddate = "2016-08-13"  })

or

@Url.HttpRouteUrl(routeName : "QuadrantData", routeValues : new { unit = "ABUELOS", begdate = "2016-08-07", enddate = "2016-08-13"  })

which would add the httpRoute to the route values.

Reference: Construct url in view for Web Api with attribute routing

Now with your approach out of the way, I would suggest the following alternative approach.

KISS principle. Change Web API (REST) endpoint to POST and change its template.

[RoutePrefix("api")]
public class LandingPageController : ApiController {

    //eg POST api/QuadrantData
    [HttpPost]
    [Route("QuadrantData", Name="GenerateQuadrantData")]
    public HttpResponseMessage QuadrantData(string unit, string begdate, string enddate) {
        _unit = unit;
        _beginDate = begdate;
        _endDate = enddate;
        //...other code
    }

    //...other code
}

and send the data in the body of a JSON POST request

$(function () {
    $("#btnGetData").click(function () {
        document.body.style.cursor = 'wait';
        var unitval = "ABUELOS"; //$('#unitName').val();
        var begdateval = $('#datepickerFrom').val();
        var enddateval = $('#datepickerTo').val();

        var jsonBody = JSON.stringify({ unit: unitval, begdate: begdateval, enddate: enddateval });

        $.ajax({
            type: 'POST',
            url: '@Url.HttpRouteUrl("GenerateQuadrantData", null)',
            contentType: 'application/json',
            dataType: 'json',
            data: jsonBody,
            cache: false,
            success: function (returneddata) {
                alert($(returneddata));
            },
            error: function () {
                alert('error in ajax');
            }
        });
    });

}); // end ready function