How to set javascript variables using MVC4 with Ra

Question

Can someone format the code below so that I can set srcript variables with c# code using razor?

The below does not work, i've got it that way to make is easy for someone to help.

@{int proID = 123; int nonProID = 456;}

<script type="text/javascript">
    @{

     <text>  

    var nonID =@nonProID;
    var proID= @proID;
    window.nonID = @nonProID;
    window.proID=@proID;

    </text>
}
</script>

I am getting a design time error

Answer 1

I use a very simple function to solve syntax errors in body of JavaScript codes that mixed with Razor codes ;)

function n(num){return num;}

var nonID = n(@nonProID);
var proID= n(@proID);

Answer 2

You should take a look at the output that your razor page is resulting. Actually, you need to know what is executed by server-side and client-side. Try this:

@{
    int proID = 123; 
    int nonProID = 456;
}

<script>

    var nonID = @nonProID;
    var proID = @proID;
    window.nonID = @nonProID;
    window.proID = @proID;

</script>

The output should be like this:

Depending what version of Visual Studio you are using, it point some highlights in the design-time for views with razor.

Answer 3

Not so much an answer as a cautionary tale: this was bugging me as well - and I thought I had a solution by pre-pending a zero and using the @(...) syntax. i.e your code would have been:

var nonID = 0@(nonProID);
var proID = 0@(proID);

Getting output like:

var nonId = 0123;

What I didn't realise was that this is how JavaScript (version 3) represents octal/base-8 numbers and is actually altering the value. Additionally, if you are using the "use strict"; command then it will break your code entirely as octal numbers have been removed.

I'm still looking for a proper solution to this.

Answer 4

It works if you do something like this:

var proID = @proID + 0;

Which produces code that is something like:

var proID = 4 + 0;

A bit odd for sure, but no more fake syntax errors at least. Sadly the errors are still reported in VS2013, so this hasn't been properly addressed (yet).

Answer 5

I've been looking into this approach:

function getServerObject(serverObject) {
  if (typeof serverObject === "undefined") {
    return null;
  }
  return serverObject;
}

var itCameFromDotNet = getServerObject(@dotNetObject);

To me this seems to make it safer on the JS side... worst case you end up with a null variable.

Answer 6

Since razor syntax errors can become problematic while you're working on the view, I totally get why you'd want to avoid them. Here's a couple other options.

<script type="text/javascript">
    // @Model.Count is an int
    var count = '@Model.Count';
    var countInt = parseInt('@Model.ActiveLocsCount');
</script>

The quotes act as delimiters, so the razor parser is happy. But of course your C# int becomes a JS string in the first statement. For purists, the second option might be better.

If somebody has a better way of doing this without the razor syntax errors, in particular maintaining the type of the var, I'd love to see it!