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>
You may also want to try:
isFollowing: '@(Model.IsFollowing)' === '@true'
and an ever better way is to use:
isFollowing: @Json.Encode(Model.IsFollowing)
@Json.Encode(Model.IsFollowing) is imho the most elegant solution. Thank you!@using System.Web.Helpers to complete the code.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)
};
var myViewModel = {
isFollowing: '@(Model.IsFollowing)' == "True";
};
Why True and not true you ask... Good question:
Why does Boolean.ToString output "True" and not "true"
@Model.IsFollowing actually valid JS syntax? Or is it relying on the fact that it will be because it happens to be boolean?'@(Model.IsFollowing)'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)
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();
}
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.