How do I pass a ViewModel boolean to a jquery function?

Question

I'd like a div to show if a ViewModel bool is set to true.

I tried this:

$(function () {
    $("#myDiv").toggle(@Model.IsRequired);
}

But @Model.IsRequired appears as either "True" or "False", rather than "true" or "false".

Any ideas?

Answer 1

You can just write @Model.IsRequired.ToString().ToLower().

I don't think there's any better solution (other than your own extension method)

Answer 2

Some alternatives to just lowercasing the string:

Use the ternary operator with actual strings

$(function () {
    $("#myDiv").toggle(@(Model.IsRequired?"true":"false"));
}

or you can output different invocations depending on the value

$(function () {
    @if (Model.Required)
    {
        $("#myDiv").toggle(true);
    }
    else
    {
        $("#myDiv").toggle(false);
    }
}

or combine them

$(function () {
    @(Model.IsRequired
         ?"$('#myDiv').toggle(true);"
         :"$('#myDiv').toggle(false);")
}