Best way to get server values into JavaScript in .NET MVC?

Question

Using ASP.NET MVC + jQuery:

I need to use some values owned by the server in my client-side JavaScript.

Right now, I've temporarily got a script tag in the actual view like this:

<script>
var savePath = '<%= Url.Action("Save") %>';
</script>

But I want to move it into something cleaner and more maintainable. I'm thinking of something along the lines of creating a JavaScript controller/action and returning a JSON object that would contain all the data I need, then using the view as the src for a script tag.

Any other ideas?

Answer 1

This actually depends. For simple inliners, the line above works just fine. If you need a LOT of server data in the JavaScript, your view approach may work. However you'll get the same result if you just render partial view that outputs the required JavaScript.

There's a problem with this, since you may end up mixing server data with JavaScript. The best approach would be to minimize server data to absolute minimum, and pass it to JavaScript functions instead of mixing with JavaScript code. That is, not

function func() {
  var path = '<%= Url.Action("my") %>';
  $(".selector").append("<img src='" + path + "' />");
}

but

function AppendImageToSelector(path) {
  $(".selector").append("<img src='" + path + "' />");
}

function func() {
  var path = '<%= Url.Action("my") %>';
  AppendImageToSelector(path);
}

This makes the code cleaner and easier to understand, helps to move JavaScript out to separate .js files, helps to re-use JavaScript when needed, and so on.

If you need a lot of server-related URLs in JavaScript, you may want to create global (in master page) function like

function url(relative) {
   return '<%= Url.Content("~") %>' + relative;
}

and use it from JavaScript scripts. This technique is questionable, though; for example it doesn't use MVC routing rules so URLs may not be out of sync; etc.

Answer 2

• Stephen Walther - ASP.NET MVC Tip #45 – Use Client View Data

Answer 3

I know this is not applicable in all cases but when I need to pass an Url to a client script (as in your example) it is often to ajaxify some anchor or button I already have in the DOM:

<%= Html.ActionLink("Save data", "save") %>

and in my script:

$('a').click(function() {
    $.get(this.href);
    return false;
});