ajax call to asp mvc controller

Question

Hi I am trying to have my ajax make a call to my controller when the "remove' button is clicked. The image preview is being removed, but the breakpoints on my controller never hit. Can someome take a look at my code and shed a little light. Thanks!

<script>
Dropzone.options.myDropzone = {
    init: function () {
        this.on("addedfile", function (file) {
            var removeButton = Dropzone.createElement("<button id='btnDel' class='btnRemove'>Remove file</button>");
            var _this = this;

            // Listen to the click event
            removeButton.addEventListener("click", function (e) {

                _this.removeFile(file);
                var delURL = "~/Home/DeleteFiles";

                $.ajax({
                    type: "POST",
                    url: delURL,
                    data: param = "",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: alert("worked"),
                    error: errorFunc
                });
            });
            file.previewElement.appendChild(removeButton);
            $(".dz-error-message").remove();
        });
    }
};

Answer 1

This URL means nothing to your browser:

~/Home/DeleteFiles

That ~ character represents a reference to the server-side "home" or "root" path for the application. But client-side code has no notion of that. It needs an actual URL.

If the action being invoked is called DeleteFiles on the Home controller then you can use the URL helper to generate the URL when rendering the client-side code:

var delURL = '@Url.Action("DeleteFiles", "Home")';

This will use server-side code in the view to generate the actual URL to be used client-side, relative to anything else known server-side about the application. It would render as something like:

var delURL = 'http://yourserver/Home/DeleteFiles';