Encode viewmodel properties to JavaScript in Razor

Question

I have a simple ViewModel:

public class IndexViewModel
{
    public bool ShowWelcomeMsg { get; set; }
}

And in my view I need this property in JS:

<script type="text/javascript">
    var ShowWelcomeMsg = @Model.ShowWelcomeMsg;
</script>

But that's not correct because it outputs False instead of false but anyway, the question is more generic because I want to know the solution for int, string, etc as well:

What is the correct way to encode a viewmodel property to use it in JavaScript (in Razor)?

Answer 1

You could just handle the conversion yourself:

<script type="text/javascript">
    var ShowWelcomeMsg = @(Model.ShowWelcomeMsg ? "true" : "false");
    var WelcomeMsg = "@Model.WelcomeMsg.Replace("\r\n", "<br />")";
</script>

Answer 2

This should do the work:

<script type="text/javascript">
    var ShowWelcomeMsg = @Html.Raw(Model.ShowWelcomeMsg);
</script>

You should serialize first your data. Instead of passing a boolean, you should pass a string with json notation:

public class IndexViewModel
{
    public string ShowWelcomeMsg { get; set; }
}

In order to serialize to json you should do:

public ActionResult Index()
{
    var serializer = new JavaScriptSerializer();
    var vm = new IndexViewModel
    {
         ShowWelcomeMsg = serializer.Serialize(true)
    };
    return View(vm);
}

This way you can even serialize a whole C# Object and use it as any other object in JavaScript.