JavaScript is not playing nice with boolean false

Question

In my partial view, I have a model that has boolean properties that I will pass to JavaScript functions.

namespace GbngWebClient.Models
{
   public class LikeOrDislikeVM
   {
    // Auto-implemented properties.

    public int BlogId { get; set; }
    public int UserId { get; set; }
    public int LikeCount { get; set; }
    public int DisLikeCount { get; set; }
    public bool LikeDisabled { get; set; }
    public bool DisLikeDisabled { get; set; }
   }
}

I pass the model boolean properties to JavaScript functions as such.

@model GbngWebClient.Models.LikeOrDislikeVM

<style>
.fa {
    cursor: pointer;
    user-select: none;
}

    .fa:hover {
        color: blue;
    }

/* I added. */
.my-size {
    font-size: 20px;
}
</style>

@* Use the values that were passed via a model. *@
<div class="row">
<p><span class="blogLike my-size fa fa-thumbs-up"></span><span class="my-size"> : @Model.LikeCount</span> <span class="my-size"> | </span><span class="blogDisLike my-size fa fa-thumbs-down"></span><span class="my-size"> : @Model.DisLikeCount</span></p>
</div>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">
$(document).ready(function () {
    console.log('Here at document ready');
    console.log('@Model.LikeDisabled');
    console.log('@Model.DisLikeDisabled');

    SetLike('@Model.LikeDisabled');
    SetDisLike('@Model.DisLikeDisabled');

    $('.blogLike').on('click', function () {
        alert('Here at like');
        $.ajax({
            type: 'POST',
            url: '@Url.Action("SetBlogLikeOrDisLike", "BlogPublished")',
            data: { likeOrDislikeVM: @Model, likeOrDislikeIndicator: "L"},
            success: function (response) {

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Critical Error: something is wrong in the call to SetBlogLikeOrDisLike for a Like! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
            }
        })
    });

    $('.blogDisLike').on('click', function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("SetBlogLikeOrDisLike", "BlogPublished")',
            data: { likeOrDislikeVM: @Model, likeOrDislikeIndicator: "D"},
            success: function (response) {

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Critical Error: something is wrong in the call to SetBlogLikeOrDisLike for a DisLike! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
            }
        })
    });

    function SetLike(disabledSwitch) {
        //alert('Here at SetLike');
        console.log('Here at SetLike');
        console.log('disabledSwitch ' + disabledSwitch);

        $(".blogLike").attr('disabled', disabledSwitch);

        if (disabledSwitch == false )
        {
            console.log('True');
            $(".blogLike").color('green');
        }
    }

    function SetDisLike(disabledSwitch) {
        //alert('Here at SetDisLike');
        console.log('Here at SetDisLike');
        console.log('disabledSwitch ' + disabledSwitch);

        $(".blogDisLike").attr('disabled', disabledSwitch);

        if (disabledSwitch == false)
        {
            console.log('True');
            $(".blogDisLike").color('green');
        }
    }
});
</script>

The code executes but the boolean values are False instead of false. Yet the model screen shot above shows them as false.

JavaScript needs them to be false. Why is this happening and how to fix?

clearly, `@Model.LikeDisabled` and `@Model.DisLikeDisabled` are strings like False or True ... you could do something like `SetLike('@Model.LikeDisabled' === 'True');` - alternatively ... `const False=false, True=true;` then `SetLike(@Model.LikeDisabled)` - note the lack of `' '` — Jaromanda X, Aug 20 '20 at 02:29
Ok..but the Model shows them as a value of false (see screen shot above'. How did they become a value of False? — user3020047, Aug 20 '20 at 02:37
Which screenshot shows that? Oh, nevermind, I see now ... the second screenshot is so full of errors it's a wonder anything is running at all — Jaromanda X, Aug 20 '20 at 02:40
Yeah, I know...those are all library issues. Not my custom code. I added the model used too. — user3020047, Aug 20 '20 at 02:48
Please refer below https://stackoverflow.com/questions/491334/why-does-boolean-tostring-output-true-and-not-true — Pranali Gajjar, Aug 20 '20 at 12:14
[Please refer below link for the same](https://stackoverflow.com/questions/491334/why-does-boolean-tostring-output-true-and-not-true) — Pranali Gajjar, Aug 20 '20 at 13:31

score 0 · Accepted Answer · answered Aug 20 '20 at 03:24

0

Looks like .NET is returning them as strings: https://learn.microsoft.com/en-us/dotnet/api/system.boolean?view=netcore-3.1

in javascript, 'False' !== false

@jaromanda-x's comment will be the right way to deal with it.

answered Aug 20 '20 at 03:24

steven

312
2
5

score 0 · Answer 2 · answered Aug 20 '20 at 03:42

As per the second screen shot, the value passed by @Model.LikeDisabled is False, which is a string and not falsewhich is the boolean property. I would recomend you to validate the properties before hand storing them in variables and then setting the SetLike('@Model.LikeDisabled') with the variable.

var like;
if('@Model.LikeDisabled' === 'False') {
    like = false;
} else { like = true; }
SetLike(like)

and the same for the dislike property.

JavaScript is not playing nice with boolean false

2 Answers2