在javascript

Question

这是我的代码。我基本上想看看我的模型，看看是否存在任何东西。使用三元运算符根据存在显示或隐藏。

$(document).ready(function() {
        (@Model.MyProperties.Any()) ? $('#removeall-toggle').show() : $('#removeall-toggle').hide();
    });

我在Chrome开发工具中遇到错误：

Uncaught ReferenceError: False is not defined

我如何解决这个问题，或者这是一种更好的方法来实现这个目标？

Answer 1

Any()方法将返回True，您的代码将在呈现页面时生成以下javascript代码。

$(document).ready(function() {

    (True) ? $('#removeall-toggle').show() : $('#removeall-toggle').hide();
});

现在，Javascript会认为True是可变的，并尝试使用它的值，但由于未在页面中定义，因此无法找到它。 由于此页面中未定义此变量，因此您收到了未定义的错误。

未定义True varibale在javascript中不是布尔true。所以做一个字符串比较。

$(document).ready(function() {

    ("@Model.Products.Any()"==="True") ?
                        $('#removeall-toggle').show() : $('#removeall-toggle').hide();

});

Answer 2

@Model.MyProperties.Any()产生一个布尔值，当布尔值输出到javascript时，你最终会得到＆＃34; False＆＃34;而不是＆＃34; false＆＃34;。有几种方法可以解决这个问题。

方法1：JSON序列化

$(document).ready(function() {
    (@JsonConvert.SerializeObject(Model.MyProperties.Any())) ? $('#removeall-toggle').show() : $('#removeall-toggle').hide();
});

或者，更简单的版本：

$(document).ready(function() {
    var shouldShow = @JsonConvert.SerializeObject(Model.MyProperties.Any());
    $('#removeall-toggle').toggle(shouldShow);
});

方法2：仅输出您需要的内容

$(document).ready(function() {
    @if(Model.MyProperties.Any())
    {
       @:$('#removeall-toggle').show();
    }
    else
    {
       @:$('#removeall-toggle').hide();
    }
});