CODEWITHSUNDEEP
javascriptasp.net-mvcrazor
Nikos
Nikos

Reputation: 7552

Using Razor, how do I render a Boolean to a JavaScript variable?

How do I render a Boolean to a JavaScript variable in a cshtml file?

Presently this shows a syntax error:

<script type="text/javascript" >

    var myViewModel = {
        isFollowing: @Model.IsFollowing  // This is a C# bool
    };
</script>

Upvotes: 188

Views: 108670

Answers (7)

General Grievance
General Grievance

Reputation: 4988

Defining a conversion operation and adding an override of .ToString() can save a lot of work.

Define this struct in your project:

/// <summary>
/// A <see cref="bool"/> made for use in creating Razor pages.
/// When converted to a string, it returns "true" or "false".
/// </summary>
public struct JSBool
{
    private readonly bool _Data;

    /// <summary>
    /// While this creates a new JSBool, you can also implicitly convert between the two.
    /// </summary>
    public JSBool(bool b)
    {
        _Data = b;
    }

    public static implicit operator bool(JSBool j) => j._Data;
    public static implicit operator JSBool(bool b) => new JSBool(b);

    // Returns "true" or "false" as you would expect
    public override string ToString() => _Data.ToString().ToLowerInvariant();
}

Usage

You can directly cast a C# bool, as in the case of the question:

{
    // Results in `isFollowing : true`
    isFollowing : @((JSBool)Model.IsFollowing)
}

But you can also use a JSBool directly in the Razor code with the expectation that it will give true and false without having to do any extra work:

@{
    JSBool isA = true;
    JSBool isB = false;
    // Standard boolean operations work too:
    JSBool isC = a || b;
}

<script>
    if (@isC)
        console.log('true');
</script>

This works because of the implicit conversion operators we defined above.

Just make sure to only ever use this when you intend to use it in Razor code. In other words, don't use it with normal C# as this can make your code messy.

Upvotes: 1

marxlaml
marxlaml

Reputation: 351

A solution which is easier to read would be to do this:

isFollowing: @(Model.IsFollowing ? "true" : "false")

Upvotes: 12

Marc L.
Marc L.

Reputation: 3399

Because a search brought me here: in ASP.NET Core, IJsonHelper doesn't have an Encode() method. Instead, use Serialize(). E.g.:

isFollowing: @Json.Serialize(Model.IsFollowing)

Upvotes: 81

Stuart Hallows
Stuart Hallows

Reputation: 8953

Here's another option to consider, using the !! conversion to boolean.

isFollowing: !!(@Model.IsFollowing ? 1 : 0)

This will generate the following on the client side, with 1 being converted to true and 0 to false.

isFollowing: !!(1)  -- or !!(0)

Upvotes: 6

another_user
another_user

Reputation: 3658

You may also want to try:

isFollowing: '@(Model.IsFollowing)' === '@true'

and an ever better way is to use:

isFollowing: @Json.Encode(Model.IsFollowing)

Upvotes: 363

Lucero
Lucero

Reputation: 60190

The JSON boolean must be lowercase.

Therefore, try this (and make sure nto to have the // comment on the line):

var myViewModel = {
    isFollowing: @Model.IsFollowing.ToString().ToLower()
};

Or (note: you need to use the namespace System.Xml):

var myViewModel = {
    isFollowing: @XmlConvert.ToString(Model.IsFollowing)
};

Upvotes: 32

gdoron
gdoron

Reputation: 150253

var myViewModel = {
    isFollowing: '@(Model.IsFollowing)' == "True";
};

Why True and not true you ask... Good question:
Why does Boolean.ToString output "True" and not "true"

Upvotes: 16

Related Questions