Using Razor, how do I render a Boolean to a JavaScript variable?
Javascriptasp.net MvcRazorJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
You may also want to try:
isFollowing: '@(Model.IsFollowing)' === '@true'
and an ever better way is to use:
isFollowing: @Json.Encode(Model.IsFollowing)
Solution 2 - Javascript
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)
Solution 3 - Javascript
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)
};
Solution 4 - Javascript
var myViewModel = {
isFollowing: '@(Model.IsFollowing)' == "True";
};
Why True
and not true
you ask... Good question:
https://stackoverflow.com/q/491334/601179
Solution 5 - Javascript
A solution which is easier to read would be to do this:
isFollowing: @(Model.IsFollowing ? "true" : "false")
Solution 6 - Javascript
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)
Solution 7 - Javascript
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.