I'm tying to implement a cascading dropdown on a form. When the user selects a value from one select list, an AJAX call is made to retrieve the data to fill a second dropdown. This is an Umbraco form in a partial view rendered with an @Html.Action and a child [HttpGet] method to populate it. This part is working, but mention it for reference.

In my view, I try to issue an AJAX post request to '/Umbraco/Surface/{surface-controller-name}/{action-method-name}" when the dropdown changes, but I get a 404 Not Found error.

I'm new to Umbraco. Any help would be much appreciated.

In Surface Controller...

public class PricingRequestFormSurfaceController : SurfaceController
    {
        public ActionResult TestAjaxCall()
        {
            var result = "Test result from controller";
            return Json(result);
        }
    }

In my view...

$(stateDropdown).change(function () {
    alert('dropdown change detected');
    $.ajax({
        type: "POST",
        url: "/Umbraco/Surface/PricingRequestFormSurfaceController/TestAjaxCall/",
        datatype: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            alert('success!');
        },
        error: function (result) {
            alert(JSON.stringify(result));
        }
    });
});