Take the 2-minute tour ×

Is it possible to access a Model property in an external Javascript file?

e.g. In "somescript.js" file

var currency = '@Model.Currency';

On my View

<script src="../../Scripts/somescript.js" type="text/javascript">

This doesn't appear to work, however if I put the javascript directly into the view inside script tags then it does work? This means having to put the code in the page all the time instead of loading the external script file like this:

@model MyModel;

<script lang=, type=>
var currency = '@Model.Currency';

Is there any way around this?

share|improve this question
If you could generate the external js file then their browser would cache your dynamically generated view model data. Probably not what you want? –  BritishDeveloper Apr 25 '12 at 10:07
I recently blogged about how you can [generate external JavaScript files using partial Razor views][blogpost]. The blog post shows how to use a custom action filter to parse Razor code within an external JavaScript file. tl;dr: Yes, it is possible using a simple, but clever workaround. [blogpost]: blog.mariusschulz.com/… –  Marius Schulz Jul 11 '13 at 22:31
add comment

5 Answers

up vote 6 down vote accepted

There is no way to implement MVC / Razor code in JS files.

You should set variable data in your HTML (in the .cshtml files), and this is conceptually OK and does not violate separation of concerns (Server-generated HTML vs. client script code) because if you think about it, these variable values are a server concern.

Take a look at this (partial but nice) workaround: Using Inline C# inside Javascript File in MVC Framework

share|improve this answer
Thats a great solution. I can keep all of the "static" javascript in a file, and then put the "vars" part into the partial view and just load that. Nice :) –  BlueChippy Oct 3 '11 at 7:17
add comment

I tackled this problem using data attributes, along with jQuery. It makes for very readable code, and without the need of partial views or running static javascript through a ViewEngine. The JavaScript file is entirely static and will be cached normally.


@model Namespace.ViewModels.HomeIndexViewModel

@section scripts
    <script id="Index.js" src="~/Path/To/Index.js"


jQuery(document).ready(function ($) {
    // import all the variables from the model
    var $vars = $('#Index\\.js').data();

    alert($vars.actionUrl); // Note: hyphenated names become camelCased

_Layout.cshtml (optional, but good habit):

    <!-- html content here. scripts go to bottom of body -->

    @RenderSection("scripts", required: false)
share|improve this answer
add comment

Try JavaScriptModel ( http://jsm.codeplex.com ):

Just add the following code to your controller action:

this.AddJavaScriptVariable("Currency", Currency);

Now you can access the variable "Currency" in JavaScript.

If this variable should be available on the hole site, put it in a filter. An example how to use JavaScriptModel from a filter can be found in the documentation.

share|improve this answer
add comment

You could always try RazorJs. It's pretty much solves not being able to use a model in your js files RazorJs

share|improve this answer
add comment

What you could do is passing the razor tags in as a variable.

In razor File>

var currency = '@Model.Currency';

in JS file >

function doAlert(curr){
share|improve this answer
add comment

Your Answer


