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（这是一个布尔值）然后更改背景颜色（如果它是真的）。

然而，我收到一条消息，说“条件编辑已关闭”，并且Model.C1下的绿色波浪线以及背景颜色永远不会改变，即使我同时具有true和false。

我测试了背景更改行，并且在“if's”之外工作。

查看页面源我看到了：

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

我更改了它并删除了== true但它仍然不起作用。即使以下也行不通。然而它的作用是删除“if（True）”并设置颜色。

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

有谁知道可能出错了什么？

Answer 1

剃刀代码启动器标志必须位于if语句前面。否则，引擎认为如果是javascript代码的一部分，而不是剃刀。另外我认为你需要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>

另一种情况是你想在javascript而不是服务器端运行if语句。在这种情况下，您的剃刀标记是corect，但生成的代码就像

    <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语句不会执行。

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

Razor视图引擎中的Javascript

2 个答案: