Razor视图引擎中的Javascript

Question

我有以下的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>

我希望让函数 doReveal 检查 Model.C1（一个布尔值），并在其为 true 时更改背景颜色。但是我收到一条消息，显示“条件编译被关闭”，并且 Model.C1 下面有一个绿色的波浪线，而且即使我有真和假两种情况，背景颜色也从未发生变化。 我测试了背景修改代码，并且在“if”之外它可以工作。查看页面源代码，我看到了这个：

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

我更改了它并删除了 “==true” 但它仍然不起作用。即使下面的代码也不起作用，但如果我移除 “if(True)” 并设置颜色，则可以正常工作。

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

有人知道可能出了什么问题吗？

- Melissa

---

你知道JavaScript是在客户端运行的吗？它是在Razor和ASP/MVC之后运行在服务器端的。 - Dykam

通常在C#代码中写== true和== false是新手的标志，所以尽量不要这样做 :) - Domenic

在C＃中，可以将if（SomeBoolVar == true）写成if（SomeBoolVar），并且可以将if（SomeBoolVar == false）写成if（！SomeBoolVar）。如果布尔变量以适当的前缀命名，如“is”、“has”等，则后者使用更少的字符，并且更易读。 - IsmailS

你知道在C1为真或假的情况下，你正在做同样的事情吗？ - Fenton

Answer 1

剃刀代码起始标记必须在if语句前面。否则，引擎会认为if是JavaScript代码的一部分，而不是剃刀代码的一部分。我还认为您需要剃刀文本标记

      <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>

另一种情况是，当你想在 JavaScript 中运行 if 语句而不是在服务器端时。在这种情况下，你的 Razor 标记是正确的，但生成的代码会像下面这样：

    <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并不等于true，也不等于false。（javascript是区分大小写的）。True也是一样。所以，你的if语句将不会执行。

- archil

---

文本标记提示加一分。哇，现在生活更轻松了！ - Vishnoo Rath

Answer 2

重要的是要意识到像这样的东西不会使您的页面根据模型的变化动态更改背景颜色，因为ASP.NET在构建页面期间在服务器上运行，而JavaScript在页面构建和下载后在浏览器上运行。

考虑到这一点，如果您只想在页面加载时更改出现的背景颜色，则以下可能是更好的选择：

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

- Domenic