Javascript within Razor view engine

Question

I have the following javascript:

<script type="text/javascript">
    function doReveal() {
        if (@Model.C1 == true) {
            document.getElementById('A1').style.backgroundColor = 'yellow';
        }
        if (@Model.C1 == false) {
            document.getElementById('A1').style.backgroundColor = 'yellow';
        }
</script>

I wanted to make it so that the function doReveal would check the Model.C1 (which is a boolean) and then change the background color if it was true.

However I get a message saying "conditional compilation is turned off" and a green squiggle under the Model.C1 and also the background color never changes even when I have both a true and false.

I tested out the background change line and that works outside of the "if's".

Looking at the page source I see this:

if (True == true) document.getElementById('A1').style.backgroundColor = 'yellow';

I changed it and removed the ==true but it still does not work. Even the following does not work. Yet it works is I remove the "if (True)" and just set the color.

if (True) document.getElementById('A1').style.backgroundColor = 'yellow';

Does anyone know what might be wrong?

Solution 1

The razor code starter sign must be in front of if statement. Otherwise, engine thinks that if is part of the javascript code, not the razor one. Also i think you will need razor text markers

      <script type="text/javascript">
            function doReveal() {
                @if (Model.C1 == true) {
<text>
                    document.getElementById('A1').style.backgroundColor = 'yellow';
</text>
                }
                @if (Model.C1 == false) {
                    document.getElementById('A1').style.backgroundColor = 'yellow';
                }
        </script>

Another case is when you want to run if statement in javascript and not the server side. In this case your razor markup is corect, but code generated would be like

    <script type="text/javascript">

    function doReveal() {

        if (False == true) {

            document.getElementById('A1').style.backgroundColor = 'yellow';

        }

        if (False == false) {

            document.getElementById('A1').style.backgroundColor = 'yellow';

        }

</script>

False is not equal to true, neither is equal to false. (javascript is case sensitive). Same case for True. So, your if statement won't execute.

Solution 2

It's important to realize that something like this will not make your page dynamically change background colors in response to changing values of the model, because ASP.NET runs on the server during the construction of the page, while JavaScript runs on the browser after the page is constructed and downloaded.

With that in mind, if you just want to change the background color that appears on page load, the following is probably a better bet:

@if (Model.C1) {
    <div id="A1" style="background-color: yellow;"></div>
} else {
    <div id="A1" style="background-color: blue;"></div>
}

Comments

[Vishnoo Rath]

Plus one for the Text Marker hint. Wow life is easier now!