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 pilation 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?
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 pilation 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?
Share Improve this question edited Apr 10, 2011 at 18:07 Melissa asked Apr 10, 2011 at 17:55 MelissaMelissa 311 gold badge1 silver badge3 bronze badges 4- 2 You know the javascript runs client-side, after Razor and ASP/MVC, which run server side? – Dykam Commented Apr 10, 2011 at 18:09
-
In general, writing
== trueand== falsein your C# code is the sign of a newbie, so try not to do that :) – Domenic Commented Apr 10, 2011 at 18:21 -
In C#,
if (SomeBoolVar == true)can be written asif (SomeBoolVar)andif (SomeBoolVar == false)can be written asif (!SomeBoolVar ). The later ones are written with less number of characters and are more readable if the boolean variable is named properly by prefixingis,hasetc. – IsmailS Commented Apr 29, 2011 at 7:42 - 1 You know you are doing the same thing in the event of C1 being true or false? – Fenton Commented Aug 15, 2011 at 15:04
2 Answers
Reset to default 11The 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.
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>
}