I been trying to use @Url.Action inside Ajax url in another external .JS file but unfortunately i got no luck.
Here's my Code:
$.ajax({
type: 'post',
url: "@Url.Action("ClearData","Home")",
success: function () {
}
});
This Code working only inside the View itself but not in Javascript externally.
Iv'e been searched some possible solution but it seems different than this.
Is there any alternative way to use @Url.Action in another .Js File?
@Url.Action() is razor (server side) code and is not parsed in external files. Options include
Declaring a global variable in the main file, say
var url = @Url.Action("ClearData","Home");
and then in the external script use url: url in the ajax call
Including a data- attribute in the element your handling, for example if its a button click event, then
<button data-url="@Url.Action("ClearData","Home")" id="mybutton">
and then reading that value in the external file, for example
$('#mybutton').click(function() {
var url = $(this).data('url');
$.ajax({
url: url,
....
data- attribute in the element I am handling and then read the value in the external file as you said var url = $(this).data('url');, it was working fine. Thanks for the answer.
<input type="hidden" data-url="@Url.Action("Action", "Controller")" id="hidUrl"> and call it from jquery var url = $('#hidUrl').data('url');. its work perfectly.if your js code inside view
$.ajax({
type: 'post',
url: "@Url.Action("ClearData","Home")",
success: function () {
}
});
this is work
when js code is an separate (external file)
@Url.Action("ClearData","Home") is not work ,
this case you have to write total url or folder path
You can create a partial view, then inside this view are just list of hidden fields such as
@Html.Hidden("ActionName", @Url.Action("ActionName", "Controller"))
which generates this
<input id="ActionName" name="ActionName" type="hidden" value="/controller/ActionName">
then you can call it like
var urlAction = $('#ActioName').val();
or you can create a js function like what I did
function ActionCaller(actionName)
{
return $('#' + actionName).val();
}
var action = ActionCaller(ActionName);
