Jquery ajax gives error when moved to a .js file - asp.net-mvc-3

Question

in a asp.net MVC3 application I have this jquery ajax function
function CheckValue() {
var Returnvalue ="";
$.ajax({
type: 'POST',
url: '#Url.Action("CheckValue", "Home")',
async: false,
success: function (Value) {
Returnvalue= Value;
},
complete: function (IsValid) {
},
error: function (xhr, textStatus, errorThrown) {
alert(errorThrown);
}
})
return Returnvalue;
}
What it does is call an action from the HomeController called CheckValue() that returns a value.
When I had it in my view page it worked correctly. But then, I moved it to a .js file MyFunctions.js and included the file in my view
<script src="#Url.Content("~/Scripts/MyFunctions.js")" type="text/javascript"></script>
and the ajax does not work anymore.
I get an alert "Not Found"
any idea on the problem?
Thanks a lot

Answer 1

The problem is due to the fact that your code is now in .js file, yet it contains C# code, specifically #Url.Action("CheckValue", "Home"). .js files are not compiled or interpreted, hence the error you get. Also, the way your code was structured is incorrect. You need to return the value in the success handler due to the AJAX call being asynchronous.
The fix is to pass the url as a parameter of your function:
function CheckValue(url) {
var Returnvalue ="";
$.ajax({
type: 'POST',
url: url,
async: false,
success: function (Value) {
return Value;
},
complete: function (IsValid) {
},
error: function (xhr, textStatus, errorThrown) {
alert(errorThrown);
}
})
}
Then in your page you can pass the C# variable to the javascript function:
<script src="#Url.Content("~/Scripts/MyFunctions.js")" type="text/javascript"></script>
<script type="text/javascript">
CheckValue('#Url.Action("CheckValue", "Home")');
</script>

Answer 2

A better way of injecting MVC controller url's is through a server side rendered settings JS
#{
Layout = null;
Response.Expires = 120;
Response.CacheControl = "public";
Response.ContentType = "text/javascript";
}
MyApp = {};
MyApp.settings = {
checkValueUrl: "#Url.Action("CheckValue", "Home")"
};