Razor 视图引擎中的 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5613637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript within Razor view engine
提问by Melissa
I have the following javascript:
我有以下 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.
我想这样做，以便函数 doReveal 将检查 Model.C1（这是一个布尔值），然后更改背景颜色（如果为真）。
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.
但是，我收到一条消息说“条件编译已关闭”和 Model.C1 下的绿色波浪线，即使我有真假，背景颜色也永远不会改变。
I tested out the background change line and that works outside of the "if's".
我测试了背景更改线，它在“if”之外工作。
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.
我更改了它并删除了 ==true 但它仍然不起作用。即使以下也不起作用。然而它的工作原理是我删除了“if（True）”并只设置颜色。
if (True) document.getElementById('A1').style.backgroundColor = 'yellow';
Does anyone know what might be wrong?
有谁知道可能有什么问题？
回答by archil
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
剃刀代码起始符必须在 if 语句之前。否则，引擎会认为 if 是 javascript 代码的一部分，而不是 razor 代码。此外，我认为您将需要剃刀文本标记
<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
另一种情况是当您想在 javascript 而不是服务器端运行 if 语句时。在这种情况下，您的剃刀标记是正确的，但生成的代码将类似于
<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.
假不等于真，也不等于假。（javascript 区分大小写）。True 的情况相同。所以，你的 if 语句不会执行。
回答by Domenic
It's important to realize that something like this will notmake 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.
重要的是要意识到这样的事情不会使您的页面动态更改背景颜色以响应模型的更改值，因为 ASP.NET 在构建页面期间在服务器上运行，而 JavaScript 在页面构建后在浏览器上运行构建和下载。
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>
}
