Javascript Syntax Error when Assigning Razor variable to a Javascript Variable

Question

Very strange behavior that I could not understand where the razor variable completely disappears as seen in the screenshot (@SomeID disappears). My goal is to get the id from the server, then assign it to a javascript variable. The problem appears to happen when the razor variable is null and also no matter where I assign this variable even with document ready.

The View:

@{
long? SomeID= (long?)ViewBag.BoxID;
}

<script type="text/javascript">
var testVariable;

function OnElementLoaded() {
    testVariable = @SomeID; 
}     
</script>

don't dump data directly into a JS context. as you see, it's very easy to generate JS syntax errors, which then kill the entire JS code block. always output via json, which will handle the translation from native->js for you, including any necessary quoting/escaping. — Marc B
– Marc B, Commented Aug 11, 2016 at 21:10
@MarcB, could you please clarify about the benefit of json in this situation. I already send the data wrapped in a model that has a c# type. — usefulBee
– usefulBee, Commented Aug 11, 2016 at 21:21
in your case, it's a long value, so not a big deal. but consider a string. foo = "Miles O'brien";, and then dump that into js: testVar = Miles O'Brien;. now you've got an undefined variable (Miles) and a flat-out syntax error with an unexpected extra undefined variable (O) followed by an unterminated string 'Brien — Marc B
– Marc B, Commented Aug 11, 2016 at 21:23

Shyju · Accepted Answer · 2016-08-11 21:22:46Z

1

Asssuming SomeID variable has some value like 2545 in it. Razor will render your code like below.

testVariable = 2545;

But your variable is nullable type. That means it could have a null value. I believe your ViewBag.BoxID value is null, hence your variable became null and your resulting HTML became,

function OnElementLoaded() {
    testVariable = ;
}

One thing you can do is to wrap the value in quotes. But this works best for non numeric values(strings).

function OnElementLoaded() {
    testVariable = `@SomeID`; 
}

For numeric values, It is best do a null check and assign value. If the value of your c# expression is null, set to 0 ( or any default value you want);

For example, the below code will set 0 if the ViewBag.BoxID expression returns null.

@{
    long? SomeID = ViewBag.BoxID!=null ? (long?)ViewBag.BoxID:0;
}

<script type="text/javascript">
    var testVariable;

    function OnElementLoaded() {
        testVariable = @SomeID;

    }
</script>

edited Aug 11, 2016 at 21:22

answered Aug 11, 2016 at 21:11

Shyju

220k106 gold badges420 silver badges498 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

usefulBee Over a year ago

Wrapping in quotes surely fix the problem! Based on your second sentence, how do I even define/initialize it if I wanted to?

Shyju Over a year ago

You can add a null check and set a default value if needed. See the updated answer

Collectives™ on Stack Overflow

Javascript Syntax Error when Assigning Razor variable to a Javascript Variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related