JQuery Ajax function not calling backend method in DNN

Question

I cannot get DotNetNuke to execute the backend code from my JQuery Ajax function. I have the following JQuery code on my View.ascx file

I did try to change the URL to View.ascx/DeleteReviewData but no luck.

function deleteReview(ReviewID){
    var ReviewIDToDelete = ReviewID;
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "https://dnndev.me/Product-View/DeleteReviewData",
        data: "{'deleteReviewID': '"+ ReviewIDToDelete +"'}",
        datatype: "json",
        success: function (data) {
            alert("Delete successfull");
        },
        error: function (error) {
            alert(error);
        }
    });
}

This is my back-end code which doesn't get executed on the View.ascx.cs file:

[System.Web.Services.WebMethod]
    public static void DeleteReviewData(int deleteReviewID)
    {
        try
        {
            //Deletes a review from the database
            using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SiteSqlServer"].ToString()))
            {
                connection.Open();

                using (SqlCommand command = new SqlCommand($"delete from ProductReviews where ReviewID = {deleteReviewID}"))
                {
                    command.Connection = connection;
                    command.ExecuteNonQuery();
                }
                connection.Close();
            }
        }
        catch(Exception ex)
        {
            throw;
        }
    }

If I should use MapHttpRoute. Does someone have an example, please?

I looked at the following post, but I am not sure about using RouteConfig.cs and extra headers and etc: https://www.dnnsoftware.com/answers/execute-an-action-by-calling-an-ajax-post

I currently get no Console errors. It goes to the success section. When I hover over Type, ContentType or any one of those while debugging it says not defined. See example below. The site is using JQuery 01.09.01

2nd image

UPDATE

I have changed the URL which now gives me a 404 error: url: $.fn.GetBaseURL() + 'DesktopModules/ProductDetailedView/DeleteReviewData'

I also tried this URL path with adding API API/DeleteReviewData , but I get a [object Object] error as it shows a 404 error in the console.

Answer 1

This is an example:

    $.ajax({
        data: { "Id": IdToDelete },
        type: "POST",
        dataType: "json",
        url: "/DesktopModules/{API-ProjectName}/API/Main/DeleteExpenseByID"
    }).complete(function () {
        //...
    });

Api method:

    [HttpPost]
    [DnnAuthorize]
    public void DeleteExpenseByID(int Id)
    {
       //...
    }

You need to send a number so you dont need the "'" surrounding ReviewIDToDelete var.

Also check DeleteReviewData for a [POST] attribute, it seems to be a [GET] call.