absolute path on call ajax mvc4 c#

Question

i have a project in mvc 4 entity framework and call the controller method with ajax. My problem is when i am using my app local, url is "Controller/Method" but when i publish i have to change url to "http://domain/appName/Controller/Method"

who can i do to get absolute path on ajax url??? my ajax is on js file and i can't use function like html.actionlink

example:

$("#btnAnswer").click(function () {

            $.ajax({

                url: "http://domain/appName/Controller/method/",
                //url: "/Controller/method/",
                data: { answer: $("#answer").val(), question_id: $("#question_id").val(), answer_id: $("#answer_id").val() },
                success: function (result) {
                    alert(result);

                }

            }).error(function () {

            }).fail(function () {

            });

    });

score 5 · Answer 1 · edited May 23 '17 at 11:59

You don't really need the absolute url. Correct relative url is fine.

You should use the Url.Action helper method to generate the correct relative path to your action method. This will generated the proper path irrespective of your current page/view.

url: "@Url.Action("ActionMethodName","YourControllerName")"

Url.Action helper method will work if your javascript code is inside a razor view. But if your code is inside an external js file, you should build the relative url to your app root using Url.Content("~") helper method and pass that to your js code via a variable as explained in this post . Try to use javascript namespacing when doing so to prevent possible conflict/overwriting from other global variables with same name.

EDIT : Including Marko's comment as an alternate solution. Thank you :)

If it is an anchor tag, you can simply use the href attribute value of the clicked link.

<a href="@Url.Action("Delete","Product")" class="ajaxLink">Delete</a>

and in your js code

$("a.ajaxLink").click(function(e){

   e.preventDefault();
   var url = $(this).attr("href");
   //use url variable value for the ajax call now.

});

If it is any other type of html element, you can use html5 data attribute to keep the target url and use the jQuery data method to retrieve it in your js code.

<div data-url="@Url.Action("Delete","Product")" class="ajaxLink">Delete</div>

and in your js code

$(".ajaxLink").click(function(e){

   e.preventDefault(); // to be safe
   var url = $(this).data("url");
   //use url variable value for the ajax call now.

});

To expand on this, in the razor code where you rended the btnAnswer button add data-url-location="@Url.Action("ActionMethodName","YourControllerName")" and in your javascript external file simply read the $("#btnAnswer").data('url-location') this will provide you the correct url. — Marko, Jan 28 '16 at 16:39
Thanks @Marko. That is an excellent alternate solution. I added it to the answer ( with proper attribution :) )for future readers. Let me know if that is a problem. — Shyju, Jan 28 '16 at 17:40

score 1 · Accepted Answer · answered Jan 28 '16 at 16:33

As you are using this in a js file you can do something like this:

$("#btnAnswer").click(function () {

                var hostString = window.location.protocol + "//" + window.location.host + /";

                $.ajax({

                    url: hostString + "/appName/Controller/method/",
                    //url: "/Controller/method/",
                    data: { answer: $("#answer").val(), question_id: $("#question_id").val(), answer_id: $("#answer_id").val() },
                    success: function (result) {
                        alert(result);

                    }

                }).error(function () {

                }).fail(function () {

                });

        });

absolute path on call ajax mvc4 c#

2 Answers2