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)?

marcos.borunda · Accepted Answer · 2012-03-16 17:43:33Z

4

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.

edited Mar 16, 2012 at 17:43

answered Mar 16, 2012 at 17:06

marcos.borunda

1,4862 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc Over a year ago

Thank you very much, that's a good approach, I think I will build a custom html helper which will encode it to json. I absolutely don't want to do that in the controller or the viewmodel. I'm just wondering why this is not build-in or I'm unable to find it...

marcos.borunda Over a year ago

Sure! you don't want that code neither in your controller nor viewmodel, a html helper sounds like a clean approach, glad my answer helped you

mgnoonan · Accepted Answer · 2012-03-16 19:18:55Z

0

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>

edited Mar 16, 2012 at 19:18

answered Mar 16, 2012 at 17:39

mgnoonan

7,2005 gold badges26 silver badges28 bronze badges

1 Comment

Marc Over a year ago

That would work for my simple example but what about a string with linebreak?

Collectives™ on Stack Overflow

Encode viewmodel properties to JavaScript in Razor

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related